Merge pull request #29 from zainbinfurqan/add-context-api

update loading issue by adding context api

components/reuse/Search.js

@@ -1,8 +1,10 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { FaSearch, FaSpinner } from 'react-icons/fa';
 import { useRouter } from 'next/router';
+import { AppContext } from '../../pages/_app';
 
 const Search = ({ height }) => {
+  const { isLoading, toggleLoading } = useContext(AppContext)
   const router = useRouter();
   const [loading, setLoading] = useState(false);
 
@@ -15,12 +17,13 @@ const Search = ({ height }) => {
 
     if (username && !hasWhiteSpaceText(username)) {
       setLoading(true);
+      toggleLoading(true)
       router.push(`/user/${username}`);
     }
   };
 
   const hasWhiteSpaceText = (text) => {
-      return /\s/g.test(text);
+    return /\s/g.test(text);
   };
 
   return (
@@ -39,7 +42,7 @@ const Search = ({ height }) => {
         type="submit"
         className="bg-purple-mid text-white h-full px-4 rounded-r-md"
       >
-        {loading ? (
+        {isLoading ? (
           <div className="animate-spin">
             <FaSpinner />
           </div>

pages/_app.js

@@ -1,3 +1,4 @@
+import React, { useReducer } from 'react';
 import { ThemeProvider } from 'next-themes';
 import { RecoilRoot } from 'recoil';
 import '../styles/globals.css';
@@ -12,19 +13,40 @@ import { ApolloProvider } from '@apollo/client';
 import { client } from '../client';
 
 import Footer from '../components/footer/Footer';
+export const AppContext = React.createContext();
+
+const reducer = (state, action) => {
+  if (action.type === 'LOADING_TOGGLE') {
+    return { ...state, isLoading: action.payload };
+  }
+  return state;
+};
+const initialStates = { isLoading: false }
 
 function MyApp({ Component, pageProps }) {
+
+  const [state, dispatch] = useReducer(reducer, initialStates)
+
+  const toggleLoading = async (flag) => {
+    dispatch({
+      type: 'LOADING_TOGGLE',
+      payload: flag
+    });
+  }
+
   return (
     <ApolloProvider client={client}>
       <RecoilRoot>
         <DefaultSeo {...SEO} />
         <ThemeProvider attribute="class">
-          <Component {...pageProps} />
-          <ThemeButton />
-          <Footer />
+          <AppContext.Provider value={{ ...state, toggleLoading }}>
+            <Component {...pageProps} />
+            <ThemeButton />
+            <Footer />
+          </AppContext.Provider>
         </ThemeProvider>
       </RecoilRoot>
-    </ApolloProvider>
+    </ApolloProvider >
   );
 }
 

pages/user/[username].js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import dynamic from 'next/dynamic';
 import { v2 as cloudinary } from 'cloudinary';
 
@@ -8,6 +8,7 @@ import { client } from '../../client';
 import { NextSeo } from 'next-seo';
 import { useRouter } from 'next/router';
 import NotFound from '../../components/404/NotFound';
+import { AppContext } from '../_app';
 
 const Navbar = dynamic(() => import('../../components/nav/Navbar'));
 const SocialCard = dynamic(() => import('../../components/social/SocialCard'));
@@ -34,32 +35,33 @@ const MostStar = dynamic(() => import('../../components/graphs/MostStar'));
 const ContributionGraph = dynamic(() =>
   import('../../components/graphs/ContributionGraph')
 );
-
 const { SITE_URL } = process.env;
 
 const UserName = ({ user, ogImageUrl }) => {
+  const { toggleLoading } = useContext(AppContext)
   const router = useRouter();
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     setLoading(true);
-
     setTimeout(() => {
       setLoading(false);
     }, 2500);
   }, [router.query.username]);
 
+  useEffect(() => {
+    toggleLoading(false)
+  }, [user])
+
   const SEO = {
-    title: `${user?.name ? user.name : 'User'} (@${
-      user?.login
-    }) : Github Profile Stats and Graphs in One Place`,
+    title: `${user?.name ? user.name : 'User'} (@${user?.login
+      }) : Github Profile Stats and Graphs in One Place`,
     description: `${user?.name} (@${user?.login}) Github Profile Stats, Languge Graph, Social Card, Contribution Graph, Repository Stats, Graphs and more`,
     canonical: `${SITE_URL}/user/${user?.login}`,
 
     openGraph: {
-      title: `${user?.name ? user.name : 'User'} (@${
-        user?.login
-      }) : Github Profile Stats and Graphs in One Place`,
+      title: `${user?.name ? user.name : 'User'} (@${user?.login
+        }) : Github Profile Stats and Graphs in One Place`,
       description: `${user?.name} (@${user?.login}) Github Profile Stats, Languge Graph, Social Card, Contribution Graph, Repository Stats, Graphs and more`,
       url: `${SITE_URL}/user/${user?.login}`,
 
@@ -130,10 +132,11 @@ export async function getServerSideProps({ params }) {
       username: params.username,
     },
   });
-
-  const errorCode = data.user === null && true;
-
-  const user = data.user;
+  const errorCode = null;
+  let user = []
+  if (data.user !== null) {
+    user = data.user;
+  }
 
   cloudinary.config({
     cloud_name: CLOUD_NAME,