feat: enable cookie for quiz data

apollo/apollo-client.ts

@@ -1,23 +1,3 @@
-import { ApolloClient, InMemoryCache } from '@apollo/client';
-
-const apolloClient = new ApolloClient({
-  uri: process.env.GRAPHQL_URL,
-  cache: new InMemoryCache(),
-  connectToDevTools: true,
-  defaultOptions: {
-    watchQuery: {
-      fetchPolicy: 'no-cache',
-      errorPolicy: 'ignore',
-    },
-    query: {
-      fetchPolicy: 'no-cache',
-      errorPolicy: 'all',
-    },
-  },
-});
-
-export default apolloClient;
-
 import { HttpLink } from '@apollo/client';
 import { registerApolloClient } from '@apollo/experimental-nextjs-app-support/rsc';
 import {

package.json

@@ -39,6 +39,7 @@
     "graphql": "^16.8.0",
     "i18next": "^23.4.5",
     "inquirer-fuzzy-path": "^2.3.0",
+    "js-cookie": "^3.0.5",
     "next": "^13.4.9",
     "next-cloudinary": "^4.18.1",
     "next-themes": "^0.2.1",
@@ -78,6 +79,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@types/jest": "^29.5.4",
+    "@types/js-cookie": "^3.0.4",
     "@types/react": "^18.2.7",
     "@types/react-headroom": "^3.2.0",
     "@types/react-syntax-highlighter": "^15.5.7",

src/app/(public)/i18n.ts

@@ -11,7 +11,7 @@ i18n.use(initReactI18next).init({
       translation: require('@/data/locales/it.json'),
     },
   },
-  lng: 'en', // Default language
+  // lng: 'en', // Default language
   fallbackLng: 'en', // Fallback language
   interpolation: {
     escapeValue: false, // Allow interpolation in translations

src/components/layout/Header.tsx

@@ -29,7 +29,7 @@ export const links = [
 export default function Header() {
   const { t } = useTranslation();
 
-  const i18nEnabled = false;
+  const i18nEnabled = true;
 
   const languageDefs = languages as LanguageDef[];
 

src/components/molecules/RandomFacts/GeneralView.tsx

@@ -32,6 +32,7 @@ const GeneralView = ({ randomFacts }: GeneralViewProps) => {
             That was the last cool fact I could think of... come back in some
             time for more :)
           </div>
+          // (or refresh the page to read them again)
         )}
       </div>
 

src/components/molecules/RandomFacts/Quiz.tsx

@@ -7,10 +7,7 @@ import RadioGroup from '@mui/material/RadioGroup';
 import * as React from 'react';
 import { useState } from 'react';
 
-import { saveToLocalStorage } from '@/lib/helper';
-
 import Button from '@/components/atoms/buttons/Button';
-import { localStorageKey } from '@/components/organisms/about/RandomFacts';
 
 import { RandomFact } from '@/types/RandomFact';
 
@@ -42,8 +39,6 @@ const Quiz = ({ options, falseOption, onAnswerSubmission }: QuizProps) => {
   };
 
   const submitAnswer = () => {
-    saveToLocalStorage(localStorageKey, 'true');
-
     onAnswerSubmission(falseOption === selectedAnswer);
   };
 

src/components/organisms/about/RandomFacts.tsx

@@ -3,13 +3,13 @@
 import * as React from 'react';
 import { useEffect, useState } from 'react';
 
-import { getFromLocalStorage, saveToLocalStorage } from '@/lib/helper';
+import { getFromCookie, saveToCookie } from '@/lib/helper';
 
 import GeneralView from '@/components/molecules/RandomFacts/GeneralView';
 import Quiz, { QuizData } from '@/components/molecules/RandomFacts/Quiz';
 import QuizAnswers from '@/components/molecules/RandomFacts/QuizAnswers';
 
-export const localStorageKey = 'alreadyPlayed';
+export const alreadyPlayedKey = 'QuizAlreadyPlayed';
 
 const RandomFacts = ({ options, falseOption, trueFacts }: QuizData) => {
   const [submitted, setSubmitted] = useState(false);
@@ -20,7 +20,8 @@ const RandomFacts = ({ options, falseOption, trueFacts }: QuizData) => {
 
   useEffect(() => {
     const fetchDataFromLocalStorage = () => {
-      const alreadyPlayedValue = getFromLocalStorage(localStorageKey);
+      const alreadyPlayedValue = getFromCookie(alreadyPlayedKey);
+
       setAlreadyPlayed(
         alreadyPlayedValue ? JSON.parse(alreadyPlayedValue) : false,
       );
@@ -36,7 +37,7 @@ const RandomFacts = ({ options, falseOption, trueFacts }: QuizData) => {
     setAnswerCorrect(isCorrect);
 
     if (!alreadyPlayed) {
-      saveToLocalStorage(localStorageKey, JSON.stringify(true));
+      saveToCookie(alreadyPlayedKey, JSON.stringify(true));
 
       setAlreadyPlayed(true);
     }

src/lib/helper.ts

@@ -1,3 +1,5 @@
+import Cookies from 'js-cookie';
+
 type OpenGraphType = {
   siteName: string;
   description: string;
@@ -47,6 +49,14 @@ export function getFromSessionStorage(key: string): string | null {
   return null;
 }
 
+export function saveToCookie(key: string, value: string, options = {}): void {
+  Cookies.set(key, value, options);
+}
+
+export function getFromCookie(key: string): string | undefined {
+  return Cookies.get(key);
+}
+
 export function shuffleArray<T>(array: T[]): T[] {
   const shuffledArray = [...array];
   for (let i = shuffledArray.length - 1; i > 0; i--) {

yarn.lock

@@ -4097,6 +4097,11 @@
     expect "^29.0.0"
     pretty-format "^29.0.0"
 
+"@types/js-cookie@^3.0.4":
+  version "3.0.4"
+  resolved "https://verdaccio.mein-recycling.de/@types%2fjs-cookie/-/js-cookie-3.0.4.tgz#23475b6d3b03acc84192e7c24da88eb38c1039ef"
+  integrity sha512-vMMnFF+H5KYqdd/myCzq6wLDlPpteJK+jGFgBus3Da7lw+YsDmx2C8feGTzY2M3Fo823yON+HC2CL240j4OV+w==
+
 "@types/jsdom@^20.0.0":
   version "20.0.1"
   resolved "https://verdaccio.mein-recycling.de/@types%2fjsdom/-/jsdom-20.0.1.tgz#07c14bc19bd2f918c1929541cdaacae894744808"
@@ -9657,6 +9662,11 @@ jiti@^1.18.2:
   resolved "https://verdaccio.mein-recycling.de/jiti/-/jiti-1.20.0.tgz#2d823b5852ee8963585c8dd8b7992ffc1ae83b42"
   integrity sha512-3TV69ZbrvV6U5DfQimop50jE9Dl6J8O1ja1dvBbMba/sZ3YBEQqJ2VZRoQPVnhlzjNtU1vaXRZVrVjU4qtm8yA==
 
+js-cookie@^3.0.5:
+  version "3.0.5"
+  resolved "https://verdaccio.mein-recycling.de/js-cookie/-/js-cookie-3.0.5.tgz#0b7e2fd0c01552c58ba86e0841f94dc2557dcdbc"
+  integrity sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://verdaccio.mein-recycling.de/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"