Merge pull request #50 from je-poy/feature/settings

Feature/settings

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

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"
   }

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>;
 }

src/components/settings.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Drawer, TextField, Typography, 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"
+      >
+        <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}
+            />
+          </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>
+  );
+}
+
+export default Settings;

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;
@@ -134,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)}
@@ -144,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 />
@@ -202,10 +228,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>
   );
 }

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 };