-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #278 from COS301-SE-2024/chore/mobile/refactor2
Chore/mobile/refactor2
- Loading branch information
Showing
49 changed files
with
4,203 additions
and
1,840 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| // ThemeContext.tsx | ||
|
|
||
| import React, { createContext, useState, useEffect, ReactNode } from 'react'; | ||
| import * as SecureStore from 'expo-secure-store'; | ||
| import { View, ActivityIndicator, useColorScheme } from 'react-native'; | ||
|
|
||
| // Define the shape of the context state | ||
| interface ThemeContextType { | ||
| theme: string; | ||
| setTheme: (theme: string) => void; | ||
| } | ||
|
|
||
| // Create the context | ||
| const ThemeContext = createContext<ThemeContextType | undefined>(undefined); | ||
|
|
||
| // Create a provider component | ||
| export const ThemeProvider = ({ children }: { children: ReactNode }) => { | ||
| const [theme, setTheme] = useState<string | null>(null); // Start with null to indicate loading | ||
|
|
||
| useEffect(() => { | ||
| const fetchTheme = async () => { | ||
| try { | ||
| const storedTheme = await SecureStore.getItemAsync('Theme'); | ||
| if (storedTheme) { | ||
| setTheme(storedTheme); | ||
| } else { | ||
| // If no theme is found, set a default theme | ||
| setTheme('light'); | ||
| } | ||
| } catch (error) { | ||
| console.error('Failed to load theme from SecureStore:', error); | ||
| setTheme('light'); // Set a default theme in case of an error | ||
| } | ||
| }; | ||
|
|
||
| fetchTheme(); | ||
| }, []); | ||
|
|
||
| const updateTheme = async (newTheme: string) => { | ||
| console.log('updating theme'); | ||
| try { | ||
| await SecureStore.setItemAsync('Theme', newTheme); | ||
| setTheme(newTheme); | ||
| } catch (error) { | ||
| console.error('Failed to save theme to SecureStore:', error); | ||
| } | ||
| }; | ||
|
|
||
| if (theme === null) { | ||
| // Show a loading spinner while the theme is being fetched | ||
| return ( | ||
| <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> | ||
| <ActivityIndicator size="large" color="#0000ff" /> | ||
| </View> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <ThemeContext.Provider value={{ theme, setTheme: updateTheme }}> | ||
| {children} | ||
| </ThemeContext.Provider> | ||
| ); | ||
| }; | ||
|
|
||
| // Custom hook to use the ThemeContext | ||
| export const useTheme = (): ThemeContextType => { | ||
| const context = React.useContext(ThemeContext); | ||
| if (!context) { | ||
| throw new Error('useTheme must be used within a ThemeProvider'); | ||
| } | ||
| return context; | ||
| }; |
22 changes: 18 additions & 4 deletions
22
frontend/occupi-mobile4/components/__tests__/NavBar-test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,23 @@ | ||
| import * as React from 'react'; | ||
| import renderer from 'react-test-renderer'; | ||
| import NavBar from '../NavBar'; | ||
| import { useNavBar } from '../NavBarProvider'; | ||
|
|
||
| it(`renders correctly`, () => { | ||
| const tree = renderer.create(<NavBar>Snapshot test!</NavBar>).toJSON(); | ||
| // Mock the NavBarProvider module | ||
| jest.mock('../NavBarProvider', () => ({ | ||
| useNavBar: jest.fn(), | ||
| })); | ||
|
|
||
| expect(tree).toMatchSnapshot(); | ||
| }); | ||
| describe('NavBar', () => { | ||
| it(`renders correctly`, () => { | ||
| // Mock the useNavBar hook implementation | ||
| (useNavBar as jest.Mock).mockReturnValue({ | ||
| currentTab: 'Home', | ||
| setCurrentTab: jest.fn(), | ||
| }); | ||
|
|
||
| const tree = renderer.create(<NavBar />).toJSON(); | ||
|
|
||
| expect(tree).toMatchSnapshot(); | ||
| }); | ||
| }); |
Oops, something went wrong.