Merge pull request #12 from LeoOuyang24/LeoOuyang24-main

Leo ouyang24 main

package-lock.json

@@ -17,6 +17,7 @@
         "fuse.js": "^6.4.6",
         "jQuery": "^1.7.4",
         "react": "^17.0.2",
+        "react-cookie": "^4.1.1",
         "react-dom": "^17.0.2",
         "react-scripts": "4.0.3",
         "web-vitals": "^1.1.2"
@@ -3251,6 +3252,14 @@
         "@babel/types": "^7.3.0"
       }
     },
+<<<<<<< HEAD
+    "node_modules/@types/cookie": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz",
+      "integrity": "sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow=="
+    },
+=======
+>>>>>>> ae9e6661c93752d3fcc178ab811e19bdf7f73313
     "node_modules/@types/eslint": {
       "version": "7.28.2",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.28.2.tgz",
@@ -3282,6 +3291,18 @@
         "@types/node": "*"
       }
     },
+<<<<<<< HEAD
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "dependencies": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
+=======
+>>>>>>> ae9e6661c93752d3fcc178ab811e19bdf7f73313
     "node_modules/@types/html-minifier-terser": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz",
@@ -3499,11 +3520,32 @@
       "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.4.1.tgz",
       "integrity": "sha512-Fo79ojj3vdEZOHg3wR9ksAMRz4P3S5fDB5e/YWZiFnyFQI1WY2Vftu9XoXVVtJfxB7Bpce/QTqWSSntkz2Znrw=="
     },
+<<<<<<< HEAD
+    "node_modules/@types/prop-types": {
+      "version": "15.7.4",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
+      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
+    },
+=======
+>>>>>>> ae9e6661c93752d3fcc178ab811e19bdf7f73313
     "node_modules/@types/q": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
       "integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ=="
     },
+<<<<<<< HEAD
+    "node_modules/@types/react": {
+      "version": "17.0.39",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.39.tgz",
+      "integrity": "sha512-UVavlfAxDd/AgAacMa60Azl7ygyQNRwC/DsHZmKgNvPmRR5p70AJ5Q9EAmL2NWOJmeV+vVUI4IAP7GZrN8h8Ug==",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+=======
+>>>>>>> ae9e6661c93752d3fcc178ab811e19bdf7f73313
     "node_modules/@types/resolve": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
@@ -3512,6 +3554,14 @@
         "@types/node": "*"
       }
     },
+<<<<<<< HEAD
+    "node_modules/@types/scheduler": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
+    },
+=======
+>>>>>>> ae9e6661c93752d3fcc178ab811e19bdf7f73313
     "node_modules/@types/source-list-map": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
@@ -6567,6 +6617,14 @@
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
       "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg=="
     },
+<<<<<<< HEAD
+    "node_modules/csstype": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
+      "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
+    },
+=======
+>>>>>>> ae9e6661c93752d3fcc178ab811e19bdf7f73313
     "node_modules/cyclist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@@ -9736,6 +9794,17 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+<<<<<<< HEAD
+    "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"
+      }
+    },
+=======
+>>>>>>> ae9e6661c93752d3fcc178ab811e19bdf7f73313
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -16210,6 +16279,22 @@
         "node": ">=10"
       }
     },
+<<<<<<< HEAD
+    "node_modules/react-cookie": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-4.1.1.tgz",
+      "integrity": "sha512-ffn7Y7G4bXiFbnE+dKhHhbP+b8I34mH9jqnm8Llhj89zF4nPxPutxHT1suUqMeCEhLDBI7InYwf1tpaSoK5w8A==",
+      "dependencies": {
+        "@types/hoist-non-react-statics": "^3.0.1",
+        "hoist-non-react-statics": "^3.0.0",
+        "universal-cookie": "^4.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0"
+      }
+    },
+=======
+>>>>>>> ae9e6661c93752d3fcc178ab811e19bdf7f73313
     "node_modules/react-dev-utils": {
       "version": "11.0.4",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
@@ -19251,6 +19336,18 @@
         "node": ">=4"
       }
     },
+<<<<<<< HEAD
+    "node_modules/universal-cookie": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-4.0.4.tgz",
+      "integrity": "sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==",
+      "dependencies": {
+        "@types/cookie": "^0.3.3",
+        "cookie": "^0.4.0"
+      }
+    },
+=======
+>>>>>>> ae9e6661c93752d3fcc178ab811e19bdf7f73313
     "node_modules/universalify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
@@ -23591,6 +23688,11 @@
         "@babel/types": "^7.3.0"
       }
     },
+    "@types/cookie": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz",
+      "integrity": "sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow=="
+    },
     "@types/eslint": {
       "version": "7.28.2",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.28.2.tgz",
@@ -23622,6 +23724,15 @@
         "@types/node": "*"
       }
     },
+    "@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "requires": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "@types/html-minifier-terser": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz",
@@ -23801,11 +23912,26 @@
       "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.4.1.tgz",
       "integrity": "sha512-Fo79ojj3vdEZOHg3wR9ksAMRz4P3S5fDB5e/YWZiFnyFQI1WY2Vftu9XoXVVtJfxB7Bpce/QTqWSSntkz2Znrw=="
     },
+    "@types/prop-types": {
+      "version": "15.7.4",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
+      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
+    },
     "@types/q": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
       "integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ=="
     },
+    "@types/react": {
+      "version": "17.0.39",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.39.tgz",
+      "integrity": "sha512-UVavlfAxDd/AgAacMa60Azl7ygyQNRwC/DsHZmKgNvPmRR5p70AJ5Q9EAmL2NWOJmeV+vVUI4IAP7GZrN8h8Ug==",
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
     "@types/resolve": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
@@ -23814,6 +23940,11 @@
         "@types/node": "*"
       }
     },
+    "@types/scheduler": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
+    },
     "@types/source-list-map": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
@@ -26251,6 +26382,11 @@
         }
       }
     },
+    "csstype": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
+      "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
+    },
     "cyclist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@@ -28659,6 +28795,14 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "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==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -33648,6 +33792,16 @@
         "whatwg-fetch": "^3.4.1"
       }
     },
+    "react-cookie": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-4.1.1.tgz",
+      "integrity": "sha512-ffn7Y7G4bXiFbnE+dKhHhbP+b8I34mH9jqnm8Llhj89zF4nPxPutxHT1suUqMeCEhLDBI7InYwf1tpaSoK5w8A==",
+      "requires": {
+        "@types/hoist-non-react-statics": "^3.0.1",
+        "hoist-non-react-statics": "^3.0.0",
+        "universal-cookie": "^4.0.0"
+      }
+    },
     "react-dev-utils": {
       "version": "11.0.4",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
@@ -36036,6 +36190,15 @@
         "crypto-random-string": "^1.0.0"
       }
     },
+    "universal-cookie": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-4.0.4.tgz",
+      "integrity": "sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==",
+      "requires": {
+        "@types/cookie": "^0.3.3",
+        "cookie": "^0.4.0"
+      }
+    },
     "universalify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",

package.json

@@ -13,6 +13,7 @@
     "fuse.js": "^6.4.6",
     "jQuery": "^1.7.4",
     "react": "^17.0.2",
+    "react-cookie": "^4.1.1",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.1.2"

src/App.css

@@ -291,6 +291,55 @@ footer {
 
 .sect-drop {
   box-sizing: border-box;
+  background-color: #222222;
+  color: white;
+}
+
+#root {
+  box-sizing: border-box;
+}
+
+.dark-content {
+  background-color: black;
+  color: white;
+}
+
+.frontPage {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  display: flex;
+  flex-direction: column;
+  height: 100;
+  text-align: center;
+  justify-content: center;
+}
+
+a{
+	color: inherit;
+}
+
+.search-results {
+  justify-content: center;
+  align-items: flex-start;
+  display: flex;
+  flex-direction: row;
+  flex-flow: row wrap;
+  box-sizing: border-box;
+  /* justify-content: normal ; */
+  align-content: flex-start;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+
+.result {
+  width: 30%;
+  padding: 0.25em 0.5em;
+}
+
+=======
   width: 10rem;
   align-self: center;
 }

src/App.js

@@ -1,12 +1,15 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, createContext } from "react";
-import axios from "axios";
+import LangDropdown from "./components/LangDropdown";
-import Fuse from "fuse.js";
-
 import LangFilters from "./components/LangFilters";
 import SectDropdown from "./components/SectDropdown";
 import SearchBar from "./components/SearchBar";
 import SearchResult from "./components/SearchResult";
 import LightSwitch from "./components/LightSwitch";
+import axios from "axios";
+import Fuse from "fuse.js";
+import { ThemeContext, themes, swapMode } from './darkMode';
+import { useCookies } from 'react-cookie';
+
 import Default from "./components/Default";
 
 import SunImg from "./img/sun.png";
@@ -111,6 +114,8 @@ function App() {
   const [searchParams, setSearchParams] = useState({ searchTerm: "" });
   const [searchResults, setSearchResults] = useState([]);
   const [sectionResults, setSectionResults] = useState([]);
+const [cookies, setCookie, removeCookie] = useCookies(['lightMode']);
+
   const [lightMode, setLightMode] = useState(true);
 
   // eslint-disable-next-line
@@ -126,6 +131,7 @@ function App() {
 
   // fetches data the first time the page renders
   useEffect(() => {
+	swapMode(cookies.lightMode ? themes.lightMode : themes.darkMode)
     async function fetchData() {
       try {
         setLoading(true);
@@ -287,8 +293,31 @@ function App() {
     //   });
   }
   return (
-    <div className="wrapper">
+
+    <div
+      className="wrapper"
+      // style={{
+      //   color: lightMode ? "black" : "white",
+      //   backgroundColor: lightMode ? "white" : "black",
+      // }}
+    >
+  		<ThemeContext.Consumer>
+		{ ({ changeTheme }) => {
+			let willBeDarkMode = (cookies.lightMode && cookies.lightMode.toLowerCase() !== "true") //whether or not we are currently light mode and will become dark mode
+			changeTheme(willBeDarkMode ? themes.light : themes.dark)
+			return (<img src={willBeDarkMode ? MoonImg : SunImg}
+			onClick = {()=>{
+							setCookie("lightMode",willBeDarkMode);
+							changeTheme(willBeDarkMode ? themes.light : themes.dark)
+							}} 
+							style={{width: "20px", height: "20px",display: "block",
+															  marginLeft: "auto"
+															  }}
+		/>)}
+		}
+		</ThemeContext.Consumer>
       <header className="header">
+
         <h1>
           <a href="https://ebookfoundation.github.io/free-programming-books/" target="_blank" rel="noreferrer">
             free-programming-books

src/darkMode.js

@@ -0,0 +1,41 @@
+import React, { useState, useEffect, createContext } from "react";
+
+//https://levelup.gitconnected.com/dark-mode-in-react-533faaee3c6e
+
+export const themes = {
+  dark: "",
+  light: "dark-content",
+};
+
+export const swapMode = (theme) => {
+    switch (theme) {
+      case themes.light:
+        document.body.classList.add('dark-content');
+        break;
+      case themes.dark:
+      default:
+        document.body.classList.remove('dark-content');
+        break;
+    }
+  }
+
+export const ThemeContext = createContext({
+    theme: themes.dark,
+  changeTheme: () => {},
+});
+
+export default function ThemeContextWrapper(props) {
+  const [theme, setTheme] = useState(props.theme);
+
+  function changeTheme(theme) {
+    setTheme(theme);
+  }
+ // console.log(theme)
+  swapMode(theme)
+
+  return (
+    <ThemeContext.Provider value={{ theme: theme, changeTheme: changeTheme }}>
+      {props.children}
+    </ThemeContext.Provider>
+  );
+}

src/index.js

@@ -2,12 +2,18 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './App.css';
 import App from './App';
+import ThemeContextWrapper from './darkMode';
 import reportWebVitals from './reportWebVitals';
+import { CookiesProvider } from 'react-cookie';
 
 ReactDOM.render(
-  <React.StrictMode>
+<CookiesProvider>
-    <App />
+	<ThemeContextWrapper>
-  </React.StrictMode>,
+	  <React.StrictMode>
+		<App />
+	  </React.StrictMode>
+	</ThemeContextWrapper>
+</CookiesProvider>,
   document.getElementById('root')
 );