add platform settings and cookie set mechanism

2024-05-11 16:43:48 +02:00 · 2024-05-11 16:43:48 +02:00 · 295fc4dadb
parent 209285d3fa
commit 295fc4dadb
12 changed files with 154 additions and 12 deletions
--- a/locale/en.json
+++ b/locale/en.json
@ -23,7 +23,8 @@
        "lang_title": "Please select language",
        "lang_it": "Italian",
        "lang_en": "English",
-        "settings_title": "Settings"
+        "settings_title": "Settings",
+        "platform_title": "Platform:"
    },
    "Results": {
        "query": "Search results for: {{ query }}",
--- a/locale/it.json
+++ b/locale/it.json
@ -23,7 +23,8 @@
        "lang_title": "Seleziona la lingua",
        "lang_it": "Italiano",
        "lang_en": "Inglese",
-        "settings_title": "Impostazioni"
+        "settings_title": "Impostazioni",
+        "platform_title": "Piattaforma:"
    },
    "Results": {
        "query": "Risultati della ricerca per: {{ query }}",
--- a/package-lock.json
+++ b/package-lock.json
@ -17,6 +17,7 @@
        "next-intl": "^3.11.3",
        "next-nprogress-bar": "^2.3.11",
        "react": "^18",
+        "react-cookie": "^7.1.4",
        "react-dom": "^18",
        "react-icons": "^5.1.0",
        "react-image": "^4.1.0",
@ -519,6 +520,20 @@
        "tslib": "^2.4.0"
      }
    },
+    "node_modules/@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="
+    },
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz",
+      "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==",
+      "dependencies": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
    "node_modules/@types/json5": {
      "version": "0.0.29",
      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@ -537,14 +552,12 @@
    "node_modules/@types/prop-types": {
      "version": "15.7.12",
      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
-      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
-      "devOptional": true
+      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
    },
    "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==",
-      "devOptional": true,
      "dependencies": {
        "@types/prop-types": "*",
        "csstype": "^3.0.2"
@ -1339,6 +1352,14 @@
      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
      "dev": true
    },
+    "node_modules/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
    "node_modules/cross-spawn": {
      "version": "7.0.3",
      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@ -1382,8 +1403,7 @@
    "node_modules/csstype": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "devOptional": true
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
    },
    "node_modules/damerau-levenshtein": {
      "version": "1.0.8",
@ -2711,6 +2731,14 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
    "node_modules/htmlparser2": {
      "version": "8.0.2",
      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
@ -4087,6 +4115,19 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-cookie": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-7.1.4.tgz",
+      "integrity": "sha512-wDxxa/HYaSXSMlyWJvJ5uZTzIVtQTPf1gMksFgwAz/2/W3lCtY8r4OChCXMPE7wax0PAdMY97UkNJedGv7KnDw==",
+      "dependencies": {
+        "@types/hoist-non-react-statics": "^3.3.5",
+        "hoist-non-react-statics": "^3.3.2",
+        "universal-cookie": "^7.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0"
+      }
+    },
    "node_modules/react-dom": {
      "version": "18.2.0",
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@ -4120,8 +4161,7 @@
    "node_modules/react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
    },
    "node_modules/react-redux": {
      "version": "9.1.1",
@ -4964,6 +5004,15 @@
      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
      "dev": true
    },
+    "node_modules/universal-cookie": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-7.1.4.tgz",
+      "integrity": "sha512-Q+DVJsdykStWRMtXr2Pdj3EF98qZHUH/fXv/gwFz/unyToy1Ek1w5GsWt53Pf38tT8Gbcy5QNsj61Xe9TggP4g==",
+      "dependencies": {
+        "@types/cookie": "^0.6.0",
+        "cookie": "^0.6.0"
+      }
+    },
    "node_modules/uri-js": {
      "version": "4.4.1",
      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
--- a/package.json
+++ b/package.json
@ -18,6 +18,7 @@
    "next-intl": "^3.11.3",
    "next-nprogress-bar": "^2.3.11",
    "react": "^18",
+    "react-cookie": "^7.1.4",
    "react-dom": "^18",
    "react-icons": "^5.1.0",
    "react-image": "^4.1.0",
--- a/src/components/Layout/Header/Menu/Settings/Modal/Modal.module.scss
+++ b/src/components/Layout/Header/Menu/Settings/Modal/Modal.module.scss
@ -2,6 +2,8 @@

 .container {

+    overflow: visible !important;
+
    .header {
        display: flex;
        justify-content: space-between;
--- a/src/components/Layout/Header/Menu/Settings/Modal/Platform/Platform.module.scss
+++ b/src/components/Layout/Header/Menu/Settings/Modal/Platform/Platform.module.scss
@ -0,0 +1,11 @@
+@import 'fontsize';
+@import 'spacing';
+
+
+.container {
+
+    .title {
+        margin-bottom: $spacing_16;
+    }   
+
+}
--- a/src/components/Layout/Header/Menu/Settings/Modal/Platform/index.tsx
+++ b/src/components/Layout/Header/Menu/Settings/Modal/Platform/index.tsx
@ -0,0 +1,42 @@
+'use client'
+
+import { Platforms } from '@/meta/settings';
+
+import css from './Platform.module.scss'
+
+import React from 'react';
+
+import { setCookie } from '@/utils/cookies/write';
+import { useCookies } from 'react-cookie';
+
+interface Props {
+    labels: {
+        title: string,
+    }
+}
+
+const Platform: React.FC<Props> = (props) => {
+
+    const { labels } = props
+    
+    const [cookies] = useCookies(['platform']);
+
+    const handleChange = async (event: React.ChangeEvent<HTMLSelectElement>) => {
+        const value = event.target.value;
+
+        await setCookie('platform', value)
+    }
+
+    return (
+        <div className={css.container}>
+            <div className={css.title}>{labels.title}</div>
+            <select defaultValue={ cookies.platform ?? Platforms.xvideos } onChange={handleChange} name={'platform'} aria-label={labels.title}>
+                {Object.keys(Platforms).map((elem, key) => {
+                    return <option className={css.option} key={key} value={elem}>{elem.toUpperCase()}</option>
+                })}
+            </select>
+        </div>
+    );
+};
+
+export default Platform;
--- a/src/components/Layout/Header/Menu/Settings/Modal/index.tsx
+++ b/src/components/Layout/Header/Menu/Settings/Modal/index.tsx
@ -5,11 +5,13 @@ import React from 'react';
 import { IoCloseCircleOutline } from "react-icons/io5";

 import style from './Modal.module.scss'
+import Platform from './Platform';

 interface Props {
  handleClose(): void
  labels: {
    title: string
+    platform: any
  }
 }

@ -24,9 +26,9 @@ const LangSwitcher: React.FC<Props> = (props) => {
          <div className={style.title}>{labels.title}</div>
          <div className={style.close} onClick={() => { handleClose() }}><IoCloseCircleOutline size={24} /></div>
        </header>
-        <p className={style.content}>
-            SETTINGS
-        </p>
+        <div className={style.content}>
+          <Platform labels={{ title: labels.platform.title }} />
+        </div>
      </article>
    </dialog >

--- a/src/components/Layout/Header/Menu/index.tsx
+++ b/src/components/Layout/Header/Menu/index.tsx
@ -26,6 +26,9 @@ const Menu: React.FC = () => {

    const settingsLabels = {
        title: t('settings_title'),
+        platform: {
+            title: t('platform_title')
+        }
    }

    return (
--- a/src/meta/settings.ts
+++ b/src/meta/settings.ts
@ -1,3 +1,8 @@
+export enum Platforms {
+    xvideos= 'xvideos',
+    xnxx= 'xnxx'
+}
+
 export enum Themes {
    light= 'light',
    dark= 'dark'
--- a/src/utils/cookies/read.ts
+++ b/src/utils/cookies/read.ts
@ -0,0 +1,11 @@
+'use server'
+
+import { cookies } from 'next/headers'
+
+export async function getCookie(name: string) {
+  return cookies().get(name);    
+}
+
+export async function hasCookie(name: string):Promise<boolean> {
+  return cookies().has(name)
+}
--- a/src/utils/cookies/write.ts
+++ b/src/utils/cookies/write.ts
@ -0,0 +1,14 @@
+'use server'
+
+import { cookies } from 'next/headers'
+
+export async function deleteCookie(name: string) {
+  cookies().delete(name)
+}
+
+export async function setCookie(name: string, value: string) {
+  cookies().set(name, value, {
+    sameSite: 'lax',
+    secure: false
+  })
+}