From 3e998a1bc7fad32488771052d63c99a2c591ed12 Mon Sep 17 00:00:00 2001
From: Jeff Canale <canalejeff@gmail.com>
Date: Sun, 16 Oct 2022 22:08:59 +0800
Subject: [PATCH 1/5] Added initial settings drawer

---
 src/components/settings.js | 86 ++++++++++++++++++++++++++++++++++++++
 src/pages/index.js         | 54 +++++++++++++++++++++---
 src/util/localstorage.js   |  9 ++++
 3 files changed, 144 insertions(+), 5 deletions(-)
 create mode 100644 src/components/settings.js
 create mode 100644 src/util/localstorage.js

diff --git a/src/components/settings.js b/src/components/settings.js
new file mode 100644
index 0000000..1243f36
--- /dev/null
+++ b/src/components/settings.js
@@ -0,0 +1,86 @@
+import React, { useEffect, useState } from "react";
+import {
+  Drawer,
+  Divider,
+  TextField,
+  Typography,
+  Box,
+  Stack,
+  Switch,
+} from "@mui/material";
+
+function Settings({
+  open,
+  closeModal,
+  changeName,
+  changeTimeFormat,
+  checkedFormat,
+  username,
+}) {
+  const handleNameChange = (event) => {
+    changeName(event.target.value);
+  };
+
+  const handleTimeFormatChange = (event) => {
+    const value = event.target.checked;
+    const format = value ? "24" : "12";
+    changeTimeFormat(format);
+  };
+
+  return (
+    <React.Fragment key="right">
+      <Drawer
+        anchor="right"
+        PaperProps={{
+          sx: {
+            width: "25%",
+          },
+        }}
+        open={open}
+        onClose={closeModal}
+        className="p-3"
+      >
+        <Box sx={{ paddingX: 1 }}>
+          <Typography align="center" variant="h6">
+            Your Name
+          </Typography>
+          <Divider
+            sx={{
+              marginBottom: 2,
+            }}
+          />
+          <TextField
+            color="secondary"
+            sx={{ width: "100%" }}
+            value={username}
+            onChange={handleNameChange}
+          />
+          <Typography align="center" variant="h6">
+            Time Format
+          </Typography>
+          <Divider
+            sx={{
+              marginBottom: 2,
+            }}
+          />
+          <Stack
+            direction="row"
+            spacing={1}
+            alignItems="center"
+            justifyContent="center"
+          >
+            <Typography>12 Hour</Typography>
+            <Switch
+              size="large"
+              checked={checkedFormat}
+              onChange={handleTimeFormatChange}
+            />
+            <Typography>24 Hour</Typography>
+          </Stack>
+        </Box>
+      </Drawer>
+    </React.Fragment>
+  );
+}
+
+export default Settings;
diff --git a/src/pages/index.js b/src/pages/index.js
index 360b49a..cfb2079 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -2,11 +2,15 @@ import React, { useEffect, useState } from "react";
 import { Blurhash } from "react-blurhash";
 import { FullScreen, useFullScreenHandle } from "react-full-screen";
 import { retrieveImage } from "../util/index";
-import InfoIcon from "@mui/icons-material/Info";
-import FullscreenIcon from "@mui/icons-material/Fullscreen";
-import AutorenewIcon from "@mui/icons-material/Autorenew";
-import CameraIcon from "@mui/icons-material/Camera";
-import SearchIcon from "@mui/icons-material/Search";
+import { getStorageItem, setStorageItem } from "../util/localstorage";
+import {
+  Info as InfoIcon,
+  Fullscreen as FullscreenIcon,
+  Autorenew as AutorenewIcon,
+  Camera as CameraIcon,
+  Search as SearchIcon,
+  Settings as SettingsIcon,
+} from "@mui/icons-material";
 
 import { ReactComponent as BingLogo } from "../svg/bing.svg";
 import { ReactComponent as GoogleLogo } from "../svg/google.svg";
@@ -15,6 +19,7 @@ import { ReactComponent as YahooLogo } from "../svg/yahoo.svg";
 import Clock from "../components/clock";
 import About from "../components/about";
 import Quote from "../components/quotes";
+import Settings from "../components/settings";
 import Tooltip from "../components/Tooltip/tooltip";
 
 function Home(props) {
@@ -24,6 +29,11 @@ function Home(props) {
   const [data, setData] = useState({});
   const [openAbout, setOpenAbout] = useState(false);
   const [searchText, setSearchText] = useState("");
+  const [openSettings, setOpenSettings] = useState(false);
+  const [timeFormat, setTimeFormat] = useState(
+    getStorageItem("timeFormat") || "12"
+  );
+  const [name, setName] = useState(getStorageItem("name") || "");
 
   const handleFullscreen = useFullScreenHandle();
 
@@ -71,6 +81,21 @@ function Home(props) {
     setOpenAbout(value);
   };
 
+  const handleSettingsDrawer = (value) => {
+    setOpenSettings(value);
+  };
+
+  const changeTimeFormat = (value) => {
+    setStorageItem("timeFormat", value);
+    setTimeFormat(value);
+  };
+
+  const changeName = (value) => {
+    console.log("asdasd");
+    setStorageItem("name", value);
+    setName(value);
+  };
+
   const changeSearchEngine = () => {
     const engines = ["google", "bing", "yahoo"];
     let idx = 0;
@@ -202,10 +227,29 @@ function Home(props) {
                   <SearchIcon />
                 </button>
               </Tooltip>
+              &nbsp; &middot; &nbsp;
+              <Tooltip tooltip="Settings" addon="break-word">
+                <button
+                  className="flex flex-row items-center gap-1 font-medium hover:text-gray-200"
+                  onClick={() => {
+                    handleSettingsDrawer(true);
+                  }}
+                >
+                  <SettingsIcon />
+                </button>
+              </Tooltip>
             </div>
           </div>
         </FullScreen>
       ) : null}
+      <Settings
+        open={openSettings}
+        closeModal={() => handleSettingsDrawer(false)}
+        checkedFormat={timeFormat === "24"}
+        changeTimeFormat={changeTimeFormat}
+        username={name}
+        changeName={changeName}
+      />
     </div>
   );
 }
diff --git a/src/util/localstorage.js b/src/util/localstorage.js
new file mode 100644
index 0000000..99efd85
--- /dev/null
+++ b/src/util/localstorage.js
@@ -0,0 +1,9 @@
+const getStorageItem = (key) => {
+  return localStorage.getItem(key);
+};
+
+const setStorageItem = (key, value) => {
+  localStorage.setItem(key, value);
+};
+
+export { getStorageItem, setStorageItem };

From 7c84be24645aba5f54d7a92920f0536fcfcc3734 Mon Sep 17 00:00:00 2001
From: Jeff Canale <canalejeff@gmail.com>
Date: Mon, 17 Oct 2022 19:52:28 +0800
Subject: [PATCH 2/5] Added greetings on search place holder

---
 src/pages/index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/index.js b/src/pages/index.js
index cfb2079..3f478d0 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -159,7 +159,8 @@ function Home(props) {
                     className="pl-4 h-full w-full outline-none text-sm text-white bg-transparent placeholder-gray-100"
                     type="text"
                     id="search"
-                    placeholder="Search something.."
+                  
+                    placeholder={ (name.length > 0 ? "Hello " + name + "! " : "") + "Search something.."}
                     value={searchText}
                     autoComplete="off"
                     onChange={(e) => setSearchText(e.target.value)}

From 6d48afdf9921c32cdaf189ec8611e69b164ad9e3 Mon Sep 17 00:00:00 2001
From: Jeff Canale <canalejeff@gmail.com>
Date: Mon, 17 Oct 2022 20:14:47 +0800
Subject: [PATCH 3/5] Supported changing of time format

---
 src/components/clock.js | 7 ++++---
 src/pages/index.js      | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/clock.js b/src/components/clock.js
index 6becdec..53fa325 100644
--- a/src/components/clock.js
+++ b/src/components/clock.js
@@ -1,19 +1,20 @@
 import React, { useEffect, useState } from "react";
 import { DateTime } from "luxon";
 
-function Clock(props) {
+function Clock({ timeFormat }) {
   const [time, setTime] = useState(
     DateTime.now().toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS)
   );
 
   useEffect(() => {
     const timer = setInterval(() => {
-      setTime(DateTime.now().toFormat("cccc · LLLL dd, yyyy · hh:mm:ss a"));
+      const hourFormat = timeFormat === "12" ? "hh" : "HH"
+      setTime(DateTime.now().toFormat(`cccc · LLLL dd, yyyy · ${hourFormat}:mm:ss a`));
     }, 1000);
     return () => {
       clearInterval(timer);
     };
-  }, []);
+  }, [timeFormat]);
 
   return <div data-testid="clock">{time}</div>;
 }
diff --git a/src/pages/index.js b/src/pages/index.js
index 3f478d0..e074eaa 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -170,7 +170,7 @@ function Home(props) {
               </div>
             </div>
             <div className="absolute bottom-5 left-5 flex flex-row w-100 text-sm text-white p-3 bg-opacity-20 bg-black rounded-sm">
-              <Clock></Clock>
+              <Clock timeFormat={timeFormat}></Clock>
             </div>
             <div className="absolute bottom-5 left-2/4 transform -translate-x-2/4 w-100 text-base text-white text-center bg-opacity-20 bg-black rounded-sm">
               <Quote />

From 27669b94d49b794a4060e45fe6d36579b9ec7f50 Mon Sep 17 00:00:00 2001
From: Jeff Canale <canalejeff@gmail.com>
Date: Mon, 17 Oct 2022 20:57:37 +0800
Subject: [PATCH 4/5] Added prettier

---
 .prettierrc       | 4 ++++
 package-lock.json | 6 ++++++
 package.json      | 1 +
 3 files changed, 11 insertions(+)
 create mode 100644 .prettierrc

diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..c1a6f66
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5"
+}
diff --git a/package-lock.json b/package-lock.json
index 4c1f5cf..d402009 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11016,6 +11016,12 @@
       "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
       "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw="
     },
+    "prettier": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
+      "integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==",
+      "dev": true
+    },
     "pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
diff --git a/package.json b/package.json
index 6383ce2..3b7581f 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
     "@craco/craco": "^6.3.0",
     "autoprefixer": "^9.8.7",
     "postcss": "^7.0.38",
+    "prettier": "^2.7.1",
     "prop-types": "^15.7.2",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.16"
   }

From 64c11c5fe55698a4c9519a8203acb5e6ccf25ba2 Mon Sep 17 00:00:00 2001
From: Jeff Canale <canalejeff@gmail.com>
Date: Mon, 17 Oct 2022 20:58:45 +0800
Subject: [PATCH 5/5] Used tailwind classes on settings

---
 src/components/settings.js | 84 ++++++++++++++++----------------------
 1 file changed, 35 insertions(+), 49 deletions(-)

diff --git a/src/components/settings.js b/src/components/settings.js
index 1243f36..a02d92e 100644
--- a/src/components/settings.js
+++ b/src/components/settings.js
@@ -1,13 +1,5 @@
-import React, { useEffect, useState } from "react";
-import {
-  Drawer,
-  Divider,
-  TextField,
-  Typography,
-  Box,
-  Stack,
-  Switch,
-} from "@mui/material";
+import React from 'react';
+import { Drawer, TextField, Typography, Stack, Switch } from '@mui/material';
 
 function Settings({
   open,
@@ -23,7 +15,7 @@ function Settings({
 
   const handleTimeFormatChange = (event) => {
     const value = event.target.checked;
-    const format = value ? "24" : "12";
+    const format = value ? '24' : '12';
     changeTimeFormat(format);
   };
 
@@ -33,51 +25,45 @@ function Settings({
         anchor="right"
         PaperProps={{
           sx: {
-            width: "25%",
+            width: '25%',
           },
         }}
         open={open}
         onClose={closeModal}
         className="p-3"
       >
-        <Box sx={{ paddingX: 1 }}>
-          <Typography align="center" variant="h6">
-            Your Name
-          </Typography>
-          <Divider
-            sx={{
-              marginBottom: 2,
-            }}
-          />
-          <TextField
-            color="secondary"
-            sx={{ width: "100%" }}
-            value={username}
-            onChange={handleNameChange}
-          />
-          <Typography align="center" variant="h6">
-            Time Format
-          </Typography>
-          <Divider
-            sx={{
-              marginBottom: 2,
-            }}
-          />
-          <Stack
-            direction="row"
-            spacing={1}
-            alignItems="center"
-            justifyContent="center"
-          >
-            <Typography>12 Hour</Typography>
-            <Switch
-              size="large"
-              checked={checkedFormat}
-              onChange={handleTimeFormatChange}
+        <div className="bg-blue-200 h-full">
+          <div className="h-10 p-2 text-center text-xl tracking-wide font-semibold">
+            Enter your name
+          </div>
+          <div className="px-5">
+            <TextField
+              color="info"
+              sx={{ width: '100%' }}
+              value={username}
+              onChange={handleNameChange}
             />
-            <Typography>24 Hour</Typography>
-          </Stack>
-        </Box>
+          </div>
+          <div className="h-10 p-2 text-center text-xl text-center text-xl tracking-wide font-semibold">
+            Time Format
+          </div>
+          <div className="h-10">
+            <Stack
+              direction="row"
+              spacing={1}
+              alignItems="center"
+              justifyContent="center"
+            >
+              <Typography>12 Hour</Typography>
+              <Switch
+                size="large"
+                checked={checkedFormat}
+                onChange={handleTimeFormatChange}
+              />
+              <Typography>24 Hour</Typography>
+            </Stack>
+          </div>
+        </div>
       </Drawer>
     </React.Fragment>
   );