Front: settings persistance (#108)

* Front: Add peristance dependencies

* Front: Fix Cross-platform persistance

* Front: Create Settings Slice

* Front: Use Redux State for settings

* Front: Check if access token is still valid

* Front: Create Language Gate to set correct language at startup

* Front: BEtter handling of Access Token validity

front/state/LanguageSlice.ts

@@ -1,5 +1,5 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-import i18n, { AvailableLanguages, DefaultLanguage } from "../i18n/i18n";
+import { AvailableLanguages, DefaultLanguage } from "../i18n/i18n";
 
 
 export const languageSlice = createSlice({
@@ -10,11 +10,9 @@ export const languageSlice = createSlice({
 	reducers: {
 		useLanguage: (state, action: PayloadAction<AvailableLanguages>) => {
 			state.value = action.payload;
-			i18n.changeLanguage(state.value);
 		},
 		resetLanguage: (state) => {
 			state.value = DefaultLanguage;
-			i18n.changeLanguage(DefaultLanguage);
 		},
 	},
 });

front/state/SettingsSlice.ts

@@ -0,0 +1,36 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+export type SettingsState = {
+	colorScheme: "dark" | "light" | "system",
+	enablePushNotifications: boolean,
+	enableMailNotifications: boolean,
+	enableLessongsReminders: boolean,
+	enableReleaseAlerts: boolean,
+	preferedLevel: 'easy' | 'medium' | 'hard',
+	colorBlind: boolean,
+	micLevel: number,
+	preferedInputName?: string
+}
+
+export const settingsSlice = createSlice({
+	name: 'settings',
+	initialState: {
+		settings: <SettingsState>{
+			enablePushNotifications: true,
+			enableMailNotifications: true,
+			enableLessongsReminders: true,
+			enableReleaseAlerts: true,
+			preferedLevel: 'easy',
+			colorBlind: false,
+			micLevel: 50,
+			colorScheme: "system"
+		},
+	},
+	reducers: {
+		updateSettings: (state, action: PayloadAction<Partial<SettingsState>>) => {
+			state.settings = { ...state.settings, ...action.payload }; 
+		}
+	}
+});
+export const { updateSettings } = settingsSlice.actions;
+export default settingsSlice.reducer;

front/state/Store.ts

@@ -1,14 +1,30 @@
 import userReducer from '../state/UserSlice';
+import settingsReduder from '../state/SettingsSlice';
 import { configureStore } from '@reduxjs/toolkit';
 import languageReducer from './LanguageSlice';
 import { TypedUseSelectorHook, useDispatch as reduxDispatch, useSelector as reduxSelector } from 'react-redux'
+import { persistStore, persistCombineReducers, FLUSH, PAUSE, PERSIST, PURGE, REGISTER, REHYDRATE } from "redux-persist";
+import AsyncStorage from '@react-native-async-storage/async-storage';
 
-const store = configureStore({
-	reducer: {
+const persistConfig = {
+	key: 'root',
+	storage: AsyncStorage
+}
+
+let store = configureStore({
+	reducer: persistCombineReducers(persistConfig, {
 		user: userReducer,
-		language: languageReducer
-	},
+		language: languageReducer,
+		settings: settingsReduder
+	}),
+	middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+    	serializableCheck: {
+    		ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
+    	},
+    }),
 })
+let persistor = persistStore(store);
 
 // Infer the `RootState` and `AppDispatch` types from the store itself
 export type RootState = ReturnType<typeof store.getState>
@@ -18,4 +34,5 @@ export type AppDispatch = typeof store.dispatch;
 export const useDispatch: () => AppDispatch = reduxDispatch
 export const useSelector: TypedUseSelectorHook<RootState> = reduxSelector
 
-export default store
+export default store
+export { persistor }