add redux and settings slice

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@picocss/pico": "^2.0.6",
+        "@reduxjs/toolkit": "^2.2.3",
         "axios": "^1.6.8",
         "cheerio": "^1.0.0-rc.12",
         "classnames": "^2.5.1",
@@ -17,6 +18,8 @@
         "react": "^18",
         "react-dom": "^18",
         "react-image": "^4.1.0",
+        "react-redux": "^9.1.1",
+        "redux-persist": "^6.0.0",
         "video.js": "^8.10.0",
         "videojs-hls-quality-selector": "^2.0.0"
       },
@@ -471,6 +474,29 @@
         "node": ">=14"
       }
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.3.tgz",
+      "integrity": "sha512-76dll9EnJXg4EVcI5YNxZA/9hSAmZsFqzMmNRHvIlzw2WS/twfcVX3ysYrWGJMClwEmChQFC4yRq74tn6fdzRA==",
+      "dependencies": {
+        "immer": "^10.0.3",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.0.1"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.10.2.tgz",
@@ -510,13 +536,13 @@
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
       "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/react": {
       "version": "18.2.79",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.79.tgz",
       "integrity": "sha512-RwGAGXPl9kSXwdNTafkOEuFrTBD5SA2B3iEB96xi8+xu5ddUa/cpvyVCSNn+asgLCTHkb5ZxN8gbuibYJi4s1w==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -531,6 +557,11 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
+      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
+    },
     "node_modules/@typescript-eslint/parser": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.2.0.tgz",
@@ -1350,7 +1381,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
@@ -2705,6 +2736,15 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immer": {
+      "version": "10.0.4",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.0.4.tgz",
+      "integrity": "sha512-cuBuGK40P/sk5IzWa9QPUaAdvPHjkk1c+xYsd9oZw+YQQEV+10G0P5uMpGctZZKnyQ+ibRO08bD25nWLmYi2pw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/immutable": {
       "version": "4.3.5",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz",
@@ -4060,6 +4100,32 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "dev": true
     },
+    "node_modules/react-redux": {
+      "version": "9.1.1",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.1.1.tgz",
+      "integrity": "sha512-5ynfGDzxxsoV73+4czQM56qF43vsmgJsO22rmAvU5tZT2z5Xow/A2uhhxwXuGTxgdReF3zcp7A80gma2onRs1A==",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.3",
+        "use-sync-external-store": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25",
+        "react": "^18.0",
+        "react-native": ">=0.69",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -4072,6 +4138,27 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="
+    },
+    "node_modules/redux-persist": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/redux-persist/-/redux-persist-6.0.0.tgz",
+      "integrity": "sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==",
+      "peerDependencies": {
+        "redux": ">4.0.0"
+      }
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
@@ -4116,6 +4203,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/reselect": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.0.tgz",
+      "integrity": "sha512-aw7jcGLDpSgNDyWBQLv2cedml85qd95/iszJjN988zX1t7AVRJi19d9kto5+W7oCfQ94gyo40dVbT6g2k4/kXg=="
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -4875,6 +4967,14 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.1.tgz",
+      "integrity": "sha512-6MCBDr76UJmRpbF8pzP27uIoTocf3tITaMJ52mccgAhMJycuh5A/RL6mDZCTwTisj0Qfeq69FtjMCUX27U78oA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/video.js": {
       "version": "8.10.0",
       "resolved": "https://registry.npmjs.org/video.js/-/video.js-8.10.0.tgz",

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@picocss/pico": "^2.0.6",
+    "@reduxjs/toolkit": "^2.2.3",
     "axios": "^1.6.8",
     "cheerio": "^1.0.0-rc.12",
     "classnames": "^2.5.1",
@@ -18,6 +19,8 @@
     "react": "^18",
     "react-dom": "^18",
     "react-image": "^4.1.0",
+    "react-redux": "^9.1.1",
+    "redux-persist": "^6.0.0",
     "video.js": "^8.10.0",
     "videojs-hls-quality-selector": "^2.0.0"
   },

src/app/[locale]/layout.tsx

@@ -1,20 +1,22 @@
+'use client'
+
 import "@/styles/globals.scss"
 
+import ReduxProvider from "@/store/redux-provider";
+
 export default function RootLayout({
   children,
-  params: {locale}
+  // params: { locale }
 }: Readonly<{
   children: React.ReactNode;
-  params: {locale: string};
+  // params: { locale: string };
 }>) {
+
   return (
-      <html lang={locale}>
+    <>
-        <head>
+      <ReduxProvider>
-          <meta charSet="utf-8" />
+        {children}
-          <meta name="viewport" content="width=device-width, initial-scale=1" />
+      </ReduxProvider>
-          <title>Proxy Raye: un proxy per XVideos basato su PornInvidious</title>
+    </>
-        </head>
-        <body>{children}</body>
-      </html>
   );
 }

src/components/Layout/index.tsx

@@ -1,13 +1,27 @@
+'use client'
+
 import React from 'react';
 
+import { useAppSelector } from '@/store/store';
+import Head from 'next/head';
+
 const Layout: React.FC<React.PropsWithChildren> = (props) => {
 
   const { children } = props;
 
+  const theme = useAppSelector((state) => state.settings.theme);
+
   return (
-    <main className="container">
+    <html data-theme={theme} /*lang={locale}*/>
-      {children}
+      <Head>
-    </main>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Proxy Raye: un proxy per XVideos basato su PornInvidious</title>
+      </Head>
+      <body>
+        <main className="container">{children}</main>
+      </body>
+    </html>
   );
 };
 

src/meta/settings.ts

@@ -0,0 +1,4 @@
+export enum Themes {
+    light= 'light',
+    dark= 'dark'
+}

src/store/redux-provider.tsx

@@ -0,0 +1,13 @@
+import { Provider } from "react-redux";
+import { store } from "./store";
+import { persistStore } from "redux-persist";
+
+persistStore(store);
+
+export default function ReduxProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <Provider store={store}>{children}</Provider>;
+}

src/store/settingsSlice.ts

@@ -0,0 +1,26 @@
+import { Themes } from "@/meta/settings";
+
+import { createSlice } from "@reduxjs/toolkit";
+import type { PayloadAction } from "@reduxjs/toolkit";
+
+
+export interface ISettingsState {
+  theme: Themes;
+}
+
+const initialState: ISettingsState = {
+  theme: Themes.light,
+};
+
+export const settingsSlice = createSlice({
+  name: "settings",
+  initialState,
+  reducers: {
+    setCurrentTheme: (state, action: PayloadAction<Themes>) => {
+      state.theme = action.payload;
+    },
+  },
+});
+
+export const { setCurrentTheme } = settingsSlice.actions;
+export const settingsReducer = settingsSlice.reducer;

src/store/store.ts

@@ -0,0 +1,29 @@
+import { combineReducers, configureStore } from "@reduxjs/toolkit";
+import { useDispatch, TypedUseSelectorHook, useSelector } from "react-redux";
+
+import { settingsReducer } from "@/store/settingsSlice";
+
+import { persistReducer } from "redux-persist";
+import storage from "redux-persist/lib/storage";
+
+const settingsPersistConfig = {
+  key: "settings",
+  storage: storage,
+  whitelist: ["settingsState"],
+};
+
+const rootReducer = combineReducers({
+  settings: persistReducer(settingsPersistConfig, settingsReducer),
+});
+
+export const store = configureStore({
+  reducer: rootReducer,
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({ serializableCheck: false }),
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;