Merge pull request #68 from AndyOooh/ED1-52-add-caching-of-fb-fetching

Ed1 52 add caching of fb fetching

apps/app/src/app/(combo)/(checksidebar)/LayoutProvider.tsx

@@ -3,7 +3,7 @@
 
 import React from 'react';
 import { useAuthState } from 'react-firebase-hooks/auth';
-import Sidebar from '__components/Sidebar/Sidebar';
+import { Sidebar } from '__components/Sidebar/Sidebar';
 import { LoaderSpinner } from '__components/ui/LoaderSpinner';
 import { auth } from '__firebase/clientApp';
 import { PageWithAuthCard } from '__components/PageWithAuthCard';
@@ -12,11 +12,12 @@ import { CurrentUserProvider } from 'app/(protected)/components/Providers/Curren
 type Props = {
   privatePage: React.ReactNode;
   publicPage: React.ReactNode;
+  sideBar: React.ReactNode;
 };
 
 // Check if logged in and show page based on that, similar to facebook!
 
-export const ComboSidebarLayoutProvider = ({ privatePage, publicPage }: Props) => {
+export const ComboSidebarLayoutProvider = ({ privatePage, publicPage, sideBar }: Props) => {
   const [user, loading, error] = useAuthState(auth);
 
   return loading ? (
@@ -26,7 +27,7 @@ export const ComboSidebarLayoutProvider = ({ privatePage, publicPage }: Props) =
     // Create a component?
     <section className='flex'>
       <CurrentUserProvider>
-        <Sidebar />
+        {sideBar}
         <PageWithAuthCard>{privatePage}</PageWithAuthCard>
       </CurrentUserProvider>
     </section>

apps/app/src/app/(combo)/(checksidebar)/LayoutProvider2.tsx

@@ -3,7 +3,7 @@
 
 import React from 'react';
 import { useAuthState } from 'react-firebase-hooks/auth';
-import Sidebar from '__components/Sidebar/Sidebar';
+import { Sidebar } from '__components/Sidebar/Sidebar';
 import { LoaderSpinner } from '__components/ui/LoaderSpinner';
 import { auth } from '__firebase/clientApp';
 import { PageWithAuthCard } from '__components/PageWithAuthCard';

apps/app/src/app/(combo)/(checksidebar)/freelancers/[username]/components/FreelancerPrivate/FreelancerPrivate.tsx

@@ -1,15 +1,10 @@
-import React from 'react';
 import { ColoredDiv } from 'ui';
 import { FreelancerLeft } from './FreelancerLeft';
 import { FreelancerRight } from './FreelancerRight';
-import { CurrentUserProvider } from 'app/(protected)/components/Providers/CurrentUserProvider';
 import { UserProvider } from 'app/(protected)/components/Providers/UserProvider';
 
-type Props = {};
-
-export const FreelancerPrivate = (props: Props) => {
+export const FreelancerPrivate = () => {
   return (
-    // <CurrentUserProvider>
     <UserProvider>
       <div className='w-full'>
         <div className='relative mx-auto'>
@@ -21,8 +16,5 @@ export const FreelancerPrivate = (props: Props) => {
         </div>
       </div>
     </UserProvider>
-    // </CurrentUserProvider>
   );
 };
-
-// AuthFreelancerProfile

apps/app/src/app/(combo)/(checksidebar)/freelancers/[username]/page.tsx

@@ -1,3 +1,4 @@
+import { Sidebar } from '__components/Sidebar/Sidebar';
 import { ComboSidebarLayoutProvider } from '../../LayoutProvider';
 import { FreelancerPrivate } from './components/FreelancerPrivate/FreelancerPrivate';
 import { FreelancerPublic } from './components/FreelancerPublic/FreelancerPublic';
@@ -10,6 +11,7 @@ export default function FreelancerPage() {
     <ComboSidebarLayoutProvider
       privatePage={<FreelancerPrivate />}
       publicPage={<FreelancerPublic />}
+      sideBar={<Sidebar />}
     />
   );
 }

apps/app/src/app/(protected)/events/components/Event.tsx

@@ -52,7 +52,7 @@ const Event = ({ event }: any) => {
   const onLoad = useCallback(map => (mapRef.current = map), []);
 
   return event ? (
-    <div key={event.id} className={`${cardWithAndHeight} bg-base-100 shadow-xl`}>
+    <div key={event.id} className={`${cardWithAndHeight} card bg-base-100 shadow-xl`}>
       <div className='card-body'>
         <div className='flex justify-between'>
           <h2 className='card-title'>{event.event_header}!</h2>

apps/app/src/app/(protected)/layout.tsx

@@ -1,5 +1,5 @@
 import { PageWithAuthCard } from '__components/PageWithAuthCard';
-import Sidebar from '../../components/Sidebar/Sidebar';
+import { Sidebar } from '../../components/Sidebar/Sidebar';
 import { CurrentUserProvider } from './components/Providers/CurrentUserProvider';
 import { PrivateRoutes } from './components/Providers/PrivateRoutes';
 

apps/app/src/components/Sidebar/Sidebar.tsx

@@ -1,55 +1,14 @@
-import {
-  BiHome,
-  BiSearchAlt,
-  BiDollarCircle,
-  BiCalendarCheck,
-  BiCog,
-  BiTestTube,
-} from 'react-icons/bi';
+import { BiTestTube } from 'react-icons/bi';
 import Image from 'next/image';
 import combi_mint from '/public/logo/combi/combi_mint.png';
 import Link from 'next/link';
+import { iconSize, menuItems } from './menu-items';
 
-type Props = {};
-
-function Sidebar({}: Props) {
-  const iconSize = '1.4rem';
-
-  const menuItems = [
-    {
-      icon: <BiHome size={iconSize} />,
-      title: 'Home',
-      link: '/',
-    },
-    {
-      icon: <BiSearchAlt size={iconSize} />,
-      title: 'Search',
-      link: '/search',
-    },
-    {
-      icon: <BiCalendarCheck size={iconSize} />,
-      title: 'Events',
-      link: '/events',
-    },
-    {
-      icon: <BiDollarCircle size={iconSize} />,
-      title: 'Payments',
-      link: '/payments',
-    },
-    {
-      icon: <BiCog size={iconSize} />,
-      title: 'Settings',
-      link: '/settings',
-    },
-  ];
-
-  // const [first, setfirst] = useState('second');
-
+export const Sidebar = () => {
   // TODO: On small screens show a hamburger menu which pushes sidebar in
   // from the left, pushing dashboard content to the right with a dark overlay
 
   return (
-    // <div className='h-screen sticky top-0'>
     <aside className='w-[15.5rem] h-screen sticky top-0 hidden lg:flex flex-col p-4'>
       <Link href={'/'} className='px-2 py-6'>
         <Image src={combi_mint} alt='logo' width={800} height={800} />
@@ -80,6 +39,4 @@ function Sidebar({}: Props) {
       </ul>
     </aside>
   );
-}
-
-export default Sidebar;
+};

apps/app/src/components/Sidebar/menu-items.tsx

@@ -0,0 +1,31 @@
+import { BiHome, BiSearchAlt, BiDollarCircle, BiCalendarCheck, BiCog } from 'react-icons/bi';
+
+export const iconSize = '1.4rem';
+
+export const menuItems = [
+  {
+    icon: <BiHome size={iconSize} />,
+    title: 'Home',
+    link: '/',
+  },
+  {
+    icon: <BiSearchAlt size={iconSize} />,
+    title: 'Search',
+    link: '/search',
+  },
+  {
+    icon: <BiCalendarCheck size={iconSize} />,
+    title: 'Events',
+    link: '/events',
+  },
+  {
+    icon: <BiDollarCircle size={iconSize} />,
+    title: 'Payments',
+    link: '/payments',
+  },
+  {
+    icon: <BiCog size={iconSize} />,
+    title: 'Settings',
+    link: '/settings',
+  },
+];

apps/app/src/firebase/clientApp.ts

@@ -41,7 +41,7 @@ const getCloudFunction = (functionName: string) => {
   return returnedFunction;
 };
 
-if (process.env.NODE_ENV === 'development' || process.env.NEXT_PUBLIC_EMULATORS_ON === 'true') {
+if (process.env.NEXT_PUBLIC_EMULATORS_ON === 'true') {
   connectAuthEmulator(auth, 'http://localhost:9099');
   connectFirestoreEmulator(db, 'localhost', 8080);
   connectStorageEmulator(storage, 'localhost', 9199);