update

Author: devxprite

app/globals.scss

@@ -42,6 +42,9 @@ body {
     // display: flex;
     // flex-direction: column;
 
+    // remove blue tap highlight on mobile
+    -webkit-tap-highlight-color: transparent;    
+
     main{
         // flex: 1;
         min-height: 100vh;

app/layout.js

@@ -3,7 +3,8 @@ import { headers } from 'next/headers'
 import AuthContext from '@/context/AuthContext';
 import Footer from '@/components/shared/Footer'
 import './globals.scss'
-import { ThemeProvider } from '@/context/ThemeContext';
+import { ThemeProvider, ThemeContext } from '@/context/ThemeContext';
+
 
 async function getSession(cookies) {
   const response = await fetch(`${process.env.NEXTAUTH_URL}/api/auth/session`, {

app/variables.scss

@@ -44,7 +44,9 @@ $variables-light: (
     }
 }
 
-html[data-theme="light"] {
+html[data-theme="light"] ,
+body[data-theme="light"]
+{
 
     @each $key,
     $value in $variables-light {

components/pages/all/CardSkeleton/index.js

@@ -1,12 +1,19 @@
-import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'
-import 'react-loading-skeleton/dist/skeleton.css'
 import styles from '../Card/card.module.scss'
+import 'react-loading-skeleton/dist/skeleton.css'
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'
+import { ThemeContext } from "@/context/ThemeContext";
+import { useContext } from "react";
 
 const CardSkeleton = () => {
+
+    const { theme } = useContext(ThemeContext);
+    const baseColor = theme === "dark" ? "#343434" : "#f5f5f5";
+    const highlightColor = theme === "dark" ? "#565656" : "#e5e5e5";
+
     return (
         <div className={styles.card + " " + styles.skeleton}>
             <div className={styles.card__body}>
-                <SkeletonTheme baseColor="#343434" highlightColor="#565656">
+                <SkeletonTheme baseColor={baseColor} highlightColor={highlightColor}>
                     <Skeleton height={200} />
                     <Skeleton height={22} width={'50%'} style={{ margin: '10px 0 5px 0' }} />
                     <Skeleton height={14} count={8} />

components/pages/all/SnippetSkeleton/index.js

@@ -1,19 +1,21 @@
-import Skeleton, { SkeletonTheme }  from 'react-loading-skeleton'
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'
 import 'react-loading-skeleton/dist/skeleton.css'
+import { ThemeContext } from "@/context/ThemeContext";
+import { useContext } from "react";
 
 const ResultSkeleton = () => {
-    return (
-        <SkeletonTheme 
-               count={9}
-                baseColor="#444" 
-                highlightColor="#888"
-            >
-               <br/>                
 
-               <p style={{width: '40%' }}>{<Skeleton height={14} />}</p>
-               <h1>{<Skeleton />}</h1>
-               <p>{<Skeleton />}</p>
-               <p>{<Skeleton />}</p>
+    const { theme } = useContext(ThemeContext);
+    const baseColor = theme === "dark" ? "#343434" : "#f5f5f5";
+    const highlightColor = theme === "dark" ? "#565656" : "#e5e5e5";
+
+    return (
+        <SkeletonTheme count={9} baseColor={baseColor} highlightColor={highlightColor}>
+            <br />
+            <p style={{ width: '40%' }}>{<Skeleton height={14} />}</p>
+            <h1>{<Skeleton />}</h1>
+            <p>{<Skeleton />}</p>
+            <p>{<Skeleton />}</p>
         </SkeletonTheme>
     )
 }

components/pages/images/CardSkeleton/index.js

@@ -1,10 +1,17 @@
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'
 import 'react-loading-skeleton/dist/skeleton.css'
+import { ThemeContext } from "@/context/ThemeContext";
+import { useContext } from "react";
 
 const CardSkeleton = () => {
+
+    const { theme } = useContext(ThemeContext);
+    const baseColor = theme === "dark" ? "#343434" : "#f5f5f5";
+    const highlightColor = theme === "dark" ? "#565656" : "#e5e5e5";
+
     return (
         <div>
-            <SkeletonTheme baseColor="#343434" highlightColor="#565656">
+            <SkeletonTheme baseColor={baseColor} highlightColor={highlightColor}>
                 <Skeleton height={160} />
                 <Skeleton height={16} width={'65%'} style={{ margin: '6px 0 4px 0' }} />
                 <Skeleton height={12} count={2} />

components/pages/videos/CardSkeleton/index.js

@@ -1,11 +1,18 @@
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'
 import 'react-loading-skeleton/dist/skeleton.css'
 import styles from "../VideoCard/videoCard.module.scss"
+import { ThemeContext } from "@/context/ThemeContext";
+import { useContext } from "react";
 
 const CardSkeleton = () => {
+
+    const { theme } = useContext(ThemeContext);
+    const baseColor = theme === "dark" ? "#343434" : "#f5f5f5";
+    const highlightColor = theme === "dark" ? "#565656" : "#e5e5e5";
+
     return (
         <div>
-            <SkeletonTheme baseColor="#343434" highlightColor="#565656">
+            <SkeletonTheme baseColor={baseColor} highlightColor={highlightColor}>
                 <div className={styles.videoCard + ' ' + styles.skeleton}>
                     <Skeleton className={styles.thumbnail} height={160} />
                     <div className={styles.content}>

components/shared/SearchBar/index.js

@@ -23,7 +23,7 @@ const fetchSuggestions = async (search, signal) => {
 }
 
 const renderSuggestion = suggestion => (
-    <p onClick={() => console.log("clicked")}>
+    <p>
         <span className={styles.searchIcon}><FaSearch /></span> {suggestion}
     </p>
 );
@@ -47,13 +47,7 @@ const SearchBar = (props) => {
     const query = searchParams.get("q");
 
     const [search, setSearch] = useState(props.value || "");
-    const [suggestions, setSuggestions] = useState([
-        "World Cup",
-        "Elon Musk",
-        "Facebook",
-        "Artificial Intelligence",
-        "Narendra Modi",
-    ]);
+    const [suggestions, setSuggestions] = useState([]);
 
 
     useEffect(() => {
@@ -87,7 +81,15 @@ const SearchBar = (props) => {
 
     const onSuggestionSelected = (e, { suggestion }) => {
         console.log("selected", suggestion);
+
         setSearch(suggestion);
+    
+        if (pathname === "/") {
+            router.push(`/search?q=${suggestion}`);
+        } else {
+            router.push(`${pathname}?q=${suggestion}`);
+        }
+
     }
 
     return (
@@ -99,7 +101,7 @@ const SearchBar = (props) => {
                 renderSuggestion={renderSuggestion}
                 getSuggestionValue={suggestion => suggestion}
                 onSuggestionSelected={onSuggestionSelected}
-                renderInputComponent={renderInputComponent} 
+                renderInputComponent={renderInputComponent}
                 inputProps={{
                     placeholder: 'Start typing to search ...',
                     value: search || "",

context/ThemeContext.js

@@ -5,28 +5,26 @@ import React, { createContext, useState, useEffect } from 'react';
 export const ThemeContext = createContext();
 
 export const ThemeProvider = ({ children }) => {
-  const [theme, setTheme] = useState('dark');
-
-  const toggleTheme = () => {
-    setTheme(theme === 'light' ? 'dark' : 'light');
-  };
+  const [theme, setTheme] = useState();
 
   useEffect(() => {
     const localTheme = localStorage.getItem('theme');
-    console.log('localTheme', localTheme);
+    console.log('Get LocalStorage theme', localTheme);
 
-    if (localTheme) {
-      setTheme(localTheme);
-    } else {
-      const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
-      setTheme(prefersDarkMode ? 'dark' : 'light');
-    }
+    setTheme(localTheme || 'dark');
   }, []);
 
+  const toggleTheme = () => {
+    setTheme(theme === 'light' ? 'dark' : 'light');
+  };
+
   useEffect(() => {
-    localStorage.setItem('theme', theme);
-    document.documentElement.setAttribute('data-theme', theme); // set data-theme attribute on the root HTML tag
-    console.log('theme', theme);
+    // if theme available and not equal to undefined or null
+    if (theme && theme !== 'undefined' && theme !== 'null') {
+      localStorage.setItem('theme', theme);
+      console.log('Set LocalStorage theme', theme);
+      document.documentElement.setAttribute('data-theme', theme);
+    }
   }, [theme]);
 
   return (