From 0d0c4c89dde4e7f5374ef41e5f6e43ce243faca3 Mon Sep 17 00:00:00 2001
From: Sirin Puenggun <sirin_29@hotmail.co.th>
Date: Mon, 3 Jul 2023 16:40:35 +0700
Subject: [PATCH] Add cookie to checkbox/Add inv text fill menu

---
 package.json                |   1 +
 src/components/Menu.jsx     |   3 +
 src/components/Problems.jsx | 152 +++++++++++++++++++-----------------
 yarn.lock                   |   5 ++
 4 files changed, 91 insertions(+), 70 deletions(-)

diff --git a/package.json b/package.json
index b573098..39e9f40 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "@react-three/fiber": "^8.11.1",
     "add": "^2.0.6",
     "framer-motion": "^9.0.7",
+    "js-cookie": "^3.0.5",
     "maath": "^0.5.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/src/components/Menu.jsx b/src/components/Menu.jsx
index b9e08f3..b12f808 100644
--- a/src/components/Menu.jsx
+++ b/src/components/Menu.jsx
@@ -63,6 +63,9 @@ const Menu = () => {
       ))}
       </div>
       <StarsCanvas />
+      <div class="invisible">blankblankblankblankblankblankblankblankblankblankblank
+      blankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblank
+      blankblankblankblankblankblankblankblankblankblankblankblankblankblankblank</div>
     </>
   );
 };
diff --git a/src/components/Problems.jsx b/src/components/Problems.jsx
index ff921a6..0704012 100644
--- a/src/components/Problems.jsx
+++ b/src/components/Problems.jsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {createContext, useState} from 'react';
+import { createContext, useState, useEffect } from 'react';
 import Button from '@mui/material/Button';
 import Card from '@mui/material/Card';
 import CardActions from '@mui/material/CardActions';
@@ -10,81 +10,93 @@ import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 import Container from '@mui/material/Container';
 import Checkbox from '@mui/material/Checkbox';
-import {createTheme, ThemeProvider} from '@mui/material/styles';
 import cards from '../constants/Card';
-import myimage from '../../public/images/syntax.jpeg'
-import {SectionWrapper} from "../hoc";
-import Preproblems from "./Preproblems";
+import myimage from '../../public/images/syntax.jpeg';
+import { SectionWrapper } from '../hoc';
+import Cookies from 'js-cookie';
 
 export const ThemeContext = createContext(null);
 
-const defaultTheme = createTheme();
+const CardItem = ({ card }) => {
+  const [checked, setChecked] = useState(false);
+
+  useEffect(() => {
+    const savedCheckedValue = Cookies.get(`checkboxValue_${card.id}`);
+    if (savedCheckedValue === 'true') {
+      setChecked(true);
+    }
+  }, [card.id]);
+
+  const handleCheckboxChange = (event) => {
+    setChecked(event.target.checked);
+    Cookies.set(`checkboxValue_${card.id}`, event.target.checked, {
+      expires: 9999,
+    });
+  };
+
+  return (
+    <Grid item xs={12} sm={6} md={4} key={card.id}>
+      <Card
+        sx={{
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        <CardMedia
+          component="div"
+          sx={{
+            pt: '56.25%',
+            height: 0,
+          }}
+          image={myimage}
+        />
+        <CardContent sx={{ flexGrow: 1 }}>
+          <Typography
+            gutterBottom
+            variant="h5"
+            component="h2"
+            color="#7DD6F6"
+          >
+            {card.title}
+          </Typography>
+          <Typography color="aliceblue">{card.describe}</Typography>
+        </CardContent>
+        <CardActions>
+        <Button size="small">
+          <a href={card.link} target="_blank" rel="noopener noreferrer">
+            View
+          </a>
+        </Button>
+          <Checkbox
+            className="jodeCheckBox"
+            checked={checked}
+            onChange={handleCheckboxChange}
+          />
+        </CardActions>
+      </Card>
+    </Grid>
+  );
+};
 
 const Problems = () => {
 
-    const [theme, setTheme] = useState('dark');
-    const toggleTheme = () => {
-        setTheme(theme === 'light' ? 'dark' : 'light');
-    }
-    return (
-        <div className="Problems">
-            <Preproblems/>
-            <ThemeContext.Provider value={{theme, toggleTheme}}>
-                <ThemeProvider theme={defaultTheme}>
-                    <CssBaseline/>
-                    <main>
-                        <Container
-                            sx={{py: 8}} maxWidth="fit-content">
-                            <div className="flex mt-4 border border-gray-500 p-4">
-                                <Grid container spacing={4}>
-                                    {cards.map((card) => (
-                                        <Grid item xs={12} sm={6} md={4} key={card.id}>
-                                            {/*<img src={require("./images/syntax.jpeg")} alt="jode"/>*/}
-                                            <Card
-                                                sx={{
-                                                    height: '100%',
-                                                    display: 'flex',
-                                                    flexDirection: 'column',
-                                                }}
-                                            >
-                                                <CardMedia
-                                                    component="div"
-                                                    sx={{
-                                                        // 16:9
-                                                        pt: '56.25%',
-                                                        height: 0,
-                                                        // objectFit: 'cover',
-                                                    }}
-                                                    image={myimage}
-                                                />
-
-                                                <CardContent sx={{flexGrow: 1}}>
-                                                    <Typography gutterBottom variant="h5" component="h2"
-                                                                color="#7DD6F6">
-                                                        {card.title}
-                                                    </Typography>
-                                                    <Typography color="aliceblue">
-                                                        {card.describe}
-                                                    </Typography>
-                                                </CardContent>
-                                                <CardActions>
-                                                    <Button size="small"><a
-                                                        href={card.link}>View</a></Button>
-                                                    <Checkbox className="jodeCheckBox"/>
-                                                </CardActions>
-                                            </Card>
-                                        </Grid>
-                                    ))}
-
-                                </Grid>
-                            </div>
-                        </Container>
-                    </main>
-                </ThemeProvider> */
-
-            </ThemeContext.Provider>
-        </div>
-    );
-}
+  return (
+    <div className="Problems">
+          <CssBaseline />
+          <main>
+            <Container sx={{ py: 8 }} maxWidth="fit-content">
+              <div className="flex mt-4 border border-gray-500 p-4">
+                <Grid container spacing={4}>
+                  {cards.map((card) => (
+                    <CardItem card={card} key={card.id} />
+                  ))}
+                </Grid>
+              </div>
+            </Container>
+          </main>
+    </div>
+  );
+};
 
 export default SectionWrapper(Problems, "");
diff --git a/yarn.lock b/yarn.lock
index 9f62eff..d5a1c89 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1340,6 +1340,11 @@ jiti@^1.18.2:
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.18.2.tgz#80c3ef3d486ebf2450d9335122b32d121f2a83cd"
   integrity sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==
 
+js-cookie@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/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://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"