YOU STREAM 0.42.0

Add store.ts
Add _redirects
Add app.slice.ts
Update index.tsx
Update README.md
Update package.json
Update App.context.tsx
Update package-lock.json

README.md

@@ -12,10 +12,11 @@
 
 - **STACK :**
 
-  - **YOU STREAM** : `0.41.0`
+  - **YOU STREAM** : `0.42.0`
   - **FAKER** : `8.4.1`
   - **REACT** : `18.2.0`
   - **PEXELS** : `1.4.0`
+  - **TOOLKIT** : `2.2.3`
   - **REACT ICONS** : `5.0.1`
   - **REACT PLAYER** : `2.16.0`
   - **REACT TOOLTIP** : `5.26.3`

package.json

@@ -1,9 +1,10 @@
 {
   "name": "you-stream",
-  "version": "0.41.0",
+  "version": "0.42.0",
   "private": true,
   "dependencies": {
     "@faker-js/faker": "^8.4.1",
+    "@reduxjs/toolkit": "^2.2.3",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -16,6 +17,7 @@
     "react-dom": "^18.2.0",
     "react-icons": "^5.0.1",
     "react-player": "^2.16.0",
+    "react-redux": "^9.1.1",
     "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
     "react-speech-recognition": "^3.10.0",

public/_redirects

@@ -0,0 +1 @@
+/* /index.html 200

src/components/header/Header.tsx

@@ -60,7 +60,7 @@ const Header = () => {
         </Icon>
         <LogoSection to="/">
           <FaYoutube color="#FF0000" size={30} />
-          <Text className="logo">YouStream v0.41.0</Text>
+          <Text className="logo">YouStream v0.42.0</Text>
         </LogoSection>
       </LeftSection>
       <SearchSection>

src/context/App.context.tsx

@@ -11,6 +11,8 @@ import { ITranslations, LANGUAGE } from "../utils/translations";
 import { Video, Videos, createClient } from "pexels";
 import { PEXELES_API_KEY } from "../utils/pexels";
 import { useNavigate } from "react-router-dom";
+import { useAppDispatch, useAppSelector } from "../store/store";
+import { changeTheme } from "../store/app.slice";
 
 interface IAppContextValue {
   theme: "light" | "dark";
@@ -50,7 +52,7 @@ interface IAppContextProviderProps {
 const client = createClient(PEXELES_API_KEY);
 
 export const AppContextProvider = ({ children }: IAppContextProviderProps) => {
-  const [theme, setTheme] = useState<"light" | "dark">("dark");
+  const [theme, setTheme] = useState<"light" | "dark">("light");
   const [language, setLanguage] = useState<"english" | "french">("english");
   const [searchBarText, setSearchBarText] = useState("");
   const [isMenuSmall, setIsMenuSmall] = useState(false);
@@ -60,6 +62,7 @@ export const AppContextProvider = ({ children }: IAppContextProviderProps) => {
   const [isFetchingVideos, setIsFetchingVideos] = useState(false);
   const [videoToWatch, setVideoToWatch] = useState<number>(0);
   const [videoToWatchData, setVideoToWatchData] = useState<Video>();
+  const dispatch = useAppDispatch();
 
   let navigate = useNavigate();
 
@@ -98,7 +101,7 @@ export const AppContextProvider = ({ children }: IAppContextProviderProps) => {
     setIsFetchingVideos(false);
   };
   const toggleTheme = () => {
-    setTheme((theme) => (theme === "light" ? "dark" : "light"));
+    dispatch(changeTheme());
   };
   const toggleLanguage = () => {
     setLanguage((language) => (language === "english" ? "french" : "english"));
@@ -108,7 +111,7 @@ export const AppContextProvider = ({ children }: IAppContextProviderProps) => {
   };
 
   const value = {
-    theme,
+    theme: useAppSelector((state) => state.app.theme),
     language,
     toggleTheme,
     toggleLanguage,
@@ -117,7 +120,7 @@ export const AppContextProvider = ({ children }: IAppContextProviderProps) => {
     setSearchBarText,
     isMenuSmall,
     toggleMenuSize,
-    activeMenuText : LANGUAGE[language][activeMenuText as keyof ITranslations],
+    activeMenuText: LANGUAGE[language][activeMenuText as keyof ITranslations],
     activeCategory,
     setActiveCategory,
     videos,

src/index.tsx

@@ -5,16 +5,20 @@ import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 import { AppContextProvider } from "./context/App.context";
 import { BrowserRouter } from "react-router-dom";
+import { Provider } from "react-redux";
+import { store } from "./store/store";
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
 );
 root.render(
   <React.StrictMode>
     <BrowserRouter>
-      <AppContextProvider>
-        <App />
-      </AppContextProvider>
+      <Provider store={store}>
+        <AppContextProvider>
+          <App />
+        </AppContextProvider>
+      </Provider>
     </BrowserRouter>
   </React.StrictMode>
 );

src/store/app.slice.ts

@@ -0,0 +1,19 @@
+import { PayloadAction, createSlice } from "@reduxjs/toolkit";
+
+interface IAppState {
+  theme: "light" | "dark";
+}
+const initialState: IAppState = {
+  theme: "dark",
+};
+
+export const appSlice = createSlice({
+  name: "app",
+  initialState,
+  reducers: {
+    changeTheme(state) {
+      state.theme = state.theme === "light" ? "dark" : "light";
+    },
+  },
+});
+export const { changeTheme } = appSlice.actions;

src/store/store.ts

@@ -0,0 +1,13 @@
+import { configureStore } from "@reduxjs/toolkit";
+import { appSlice } from "./app.slice";
+import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
+
+export const store = configureStore({
+  reducer: {
+    app: appSlice.reducer,
+  },
+});
+export const useAppDispatch: () => typeof store.dispatch = useDispatch;
+export const useAppSelector: TypedUseSelectorHook<
+  ReturnType<typeof store.getState>
+> = useSelector;