Add dark mode & refactor styling (#323)

Author: js0mmer

api/src/controllers/users.ts

@@ -4,6 +4,7 @@
 
 import express, { Request, Response } from 'express';
 import passport from 'passport';
+import { COLLECTION_NAMES, addDocument, containsID, getDocuments, updateDocument } from '../helpers/mongo';
 import { SESSION_LENGTH } from '../config/constants';
 import { User } from 'express-session';
 
@@ -16,6 +17,52 @@ router.get('/', function (req, res) {
   res.json(req.session);
 });
 
+router.get('/preferences', async (req, res) => {
+  if (!req.session.passport) {
+    res.json({ error: 'Must be logged in to get preferences.' });
+    return;
+  }
+
+  const userID = req.session.passport.user.id;
+  const preferences = await getDocuments(COLLECTION_NAMES.PREFERENCES, { _id: userID });
+
+  if (preferences.length > 0) {
+    res.json(preferences[0]);
+  } else {
+    res.json({ error: 'No preferences found' });
+  }
+});
+
+interface UserPreferences {
+  theme?: 'light' | 'dark' | 'system';
+}
+
+router.post('/preferences', async (req, res) => {
+  if (!req.session.passport) {
+    res.json({ error: 'Must be logged in to get preferences.' });
+    return;
+  }
+
+  const userID = req.session.passport.user.id;
+
+  // make user's preference doc if it doesn't exist
+  if (!(await containsID(COLLECTION_NAMES.PREFERENCES, userID))) {
+    await addDocument(COLLECTION_NAMES.PREFERENCES, { _id: userID });
+  }
+
+  // grab valid preferences from request body
+  const preferences: UserPreferences = {};
+  if (req.body.theme) {
+    preferences.theme = req.body.theme;
+  }
+
+  // set the preferences
+  await updateDocument(COLLECTION_NAMES.PREFERENCES, { _id: userID }, { $set: preferences });
+
+  // echo back body
+  res.json(req.body);
+});
+
 /**
  * Get whether or not a user is an admin
  */

api/src/helpers/mongo.ts

@@ -22,6 +22,7 @@ const COLLECTION_NAMES = {
   ROADMAPS: 'roadmaps',
   VOTES: 'votes',
   REPORTS: 'reports',
+  PREFERENCES: 'preferences',
 };
 /**
  * Global reference to database

site/public/working.gif

@@ -14,6 +14,6 @@
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
-  background-color: var(--peterportal-gray-blue);
+  background-color: var(--background);
   box-sizing: border-box;
 }

site/src/App.scss

@@ -1,7 +1,9 @@
+import { useCallback, useEffect, useState } from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import 'semantic-ui-css/semantic.min.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'react-bootstrap-range-slider/dist/react-bootstrap-range-slider.css';
+import './style/theme.scss';
 import './App.scss';
 
 import AppHeader from './component/AppHeader/AppHeader';
@@ -15,28 +17,92 @@ import AdminPage from './pages/AdminPage';
 import ReviewsPage from './pages/ReviewsPage';
 import SideBar from './component/SideBar/SideBar';
 
+import ThemeContext, { Theme } from './style/theme-context';
+import axios from 'axios';
+import { useCookies } from 'react-cookie';
+
+function isSystemDark() {
+  return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+}
+
 export default function App() {
+  // default darkMode to local or system preferences
+  const [usingSystemTheme, setUsingSystemTheme] = useState(
+    localStorage.getItem('theme') === 'system' || !localStorage.getItem('theme'),
+  );
+  const [darkMode, setDarkMode] = useState(
+    usingSystemTheme ? isSystemDark() : localStorage.getItem('theme') === 'dark',
+  );
+  const [cookies] = useCookies(['user']);
+
+  /**
+   * Sets the theme state
+   * @param theme
+   */
+  const setThemeState = useCallback((theme: Theme) => {
+    if (theme === 'system') {
+      setDarkMode(isSystemDark());
+      setUsingSystemTheme(true);
+    } else {
+      setDarkMode(theme === 'dark');
+      setUsingSystemTheme(false);
+    }
+  }, []);
+
+  /**
+   * Sets the theme state and saves the users theme preference.
+   * Saves to account if logged in, local storage if not
+   * @param theme
+   */
+  const setTheme = (theme: Theme) => {
+    setThemeState(theme);
+    if (cookies.user) {
+      axios.post('/api/users/preferences', { theme });
+    } else {
+      localStorage.setItem('theme', theme);
+    }
+  };
+
+  useEffect(() => {
+    // if logged in, load user prefs (theme) from mongo
+    if (cookies.user) {
+      axios.get('/api/users/preferences').then((res) => {
+        const { theme }: { theme?: Theme } = res.data;
+        if (theme) {
+          setThemeState(theme);
+        }
+      });
+    }
+  }, [cookies.user, setThemeState]);
+
+  useEffect(() => {
+    // Theme styling is controlled by data-theme attribute on body being set to light or dark
+    document.querySelector('body')!.setAttribute('data-theme', darkMode ? 'dark' : 'light');
+  }, [darkMode]);
+
   return (
     <Router>
-      <AppHeader />
-      <div className="app-body">
-        <div className="app-sidebar">
-          <SideBar></SideBar>
-        </div>
-        <div className="app-content">
-          <Routes>
-            <Route path="/roadmap" element={<RoadmapPage />} />
-            <Route path="/" element={<SearchPage />} />
-            <Route path="/search/:index" element={<SearchPage />} />
-            <Route path="/course/:id" element={<CoursePage />} />
-            <Route path="/professor/:id" element={<ProfessorPage />} />
-            <Route path="/admin/*" element={<AdminPage />} />
-            <Route path="/reviews" element={<ReviewsPage />} />
-            <Route path="*" element={<ErrorPage />} />
-          </Routes>
-          <Footer />
+      <ThemeContext.Provider value={{ darkMode, usingSystemTheme, setTheme }}>
+        <AppHeader />
+        <div className="app-body">
+          <div className="app-sidebar">
+            <SideBar></SideBar>
+          </div>
+          <div className="app-content">
+            <Routes>
+              <Route path="/roadmap" element={<RoadmapPage />} />
+              <Route path="/" element={<SearchPage />} />
+              <Route path="/search/:index" element={<SearchPage />} />
+              <Route path="/course/:id" element={<CoursePage />} />
+              <Route path="/professor/:id" element={<ProfessorPage />} />
+              <Route path="/admin/*" element={<AdminPage />} />
+              <Route path="/reviews" element={<ReviewsPage />} />
+              <Route path="*" element={<ErrorPage />} />
+            </Routes>
+            <Footer />
+          </div>
         </div>
-      </div>
+      </ThemeContext.Provider>
     </Router>
   );
 }