- integrating sign in with google

- set up dark mode context and other services

src/contexts/ModalContext.js

@@ -0,0 +1,25 @@
+import React, { createContext, useState } from "react";
+
+const defaultState = {
+  authModal: {},
+};
+
+const ModalContext = createContext(defaultState);
+
+const ModalProvider = ({ children }) => {
+  const [authOpen, setAuthOpen] = useState(false);
+
+  return (
+    <ModalContext.Provider
+      value={{
+        authModal: { isOpen: authOpen, setOpen: setAuthOpen },
+      }}
+    >
+      {children}
+    </ModalContext.Provider>
+  );
+};
+
+export default ModalContext;
+
+export { ModalProvider };

src/contexts/ThemeContext.js

@@ -0,0 +1,59 @@
+import React, { useState, useEffect, createContext } from "react";
+
+const COLOR_CONFIG = {
+  light: {
+    "--color-primary": "#444",
+    "--color-primary-dark": "#333",
+    "--color-inverse": "#fff",
+    "--color-inverse-dark": "#f5f5f5",
+  },
+  dark: {
+    "--color-primary": "#f5f5f5",
+    "--color-primary-dark": "#eee",
+    "--color-inverse": "#212121",
+    "--color-inverse-dark": "#121212",
+  },
+};
+
+const defaultState = {
+  darkMode: false,
+  toggleDarkMode: () => {},
+};
+
+const ThemeContext = createContext(defaultState);
+
+const ThemeProvider = ({ children }) => {
+  const [darkMode, setDarkMode] = useState(defaultState.darkMode);
+
+  useEffect(() => {
+    const isDarkMode = JSON.parse(localStorage.getItem("darkMode"));
+    isDarkMode ? setDarkMode(true) : setDarkMode(false);
+  }, []);
+
+  useEffect(() => {
+    const colorConfig = darkMode ? COLOR_CONFIG.dark : COLOR_CONFIG.light;
+    for (const [key, value] of Object.entries(colorConfig)) {
+      document.documentElement.style.setProperty(key, value);
+    }
+  }, [darkMode]);
+
+  const toggleDarkMode = () => {
+    setDarkMode(!darkMode);
+    localStorage.setItem("darkMode", JSON.stringify(!darkMode));
+  };
+
+  return (
+    <ThemeContext.Provider
+      value={{
+        darkMode,
+        toggleDarkMode,
+      }}
+    >
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export default ThemeContext;
+
+export { ThemeProvider };

src/contexts/UserContext.js

@@ -0,0 +1,52 @@
+import React, { createContext, useState, useEffect } from "react";
+import { useAuthState } from "react-firebase-hooks/auth";
+import firebase from "gatsby-plugin-firebase";
+import { toast } from "react-toastify";
+
+const defaultState = {
+  user: null,
+  logout: () => {},
+  loginWithGoogle: async () => {},
+};
+
+const UserContext = createContext(defaultState);
+
+const UserProvider = ({ children }) => {
+  const [firebaseUser, loading] = useAuthState(firebase.auth());
+  const [user, setUser] = useState(null);
+
+  useEffect(() => {
+    setUser(firebaseUser);
+  }, [firebaseUser]);
+
+  const loginWithGoogle = async () => {
+    const provider = new firebase.auth.GoogleAuthProvider();
+
+    try {
+      await firebase.auth().signInWithPopup(provider);
+    } catch (error) {
+      toast.error(error.message);
+    }
+  };
+
+  const logout = () => {
+    firebase.auth().signOut();
+  };
+
+  return (
+    <UserContext.Provider
+      value={{
+        user,
+        loading,
+        logout,
+        loginWithGoogle,
+      }}
+    >
+      {children}
+    </UserContext.Provider>
+  );
+};
+
+export default UserContext;
+
+export { UserProvider };