feat(DEV-27): enable conditional rendering

also remove header from OfflineResults

src/components/Starter/Header/header.module.css

@@ -4,7 +4,7 @@
   grid-template-columns: auto 1fr;
   padding: 20px;
   position: sticky;
-  top: 0
+  top: 0;
 }
 
 .menuContainer {

src/components/Starter/OfflineResults/index.tsx

@@ -4,7 +4,6 @@ import { GithubUser } from '../../../../types';
 import Offline from '../../../icons/offline.svg';
 import styles from './offlineResults.module.css';
 import { ListCachedGithubUsers } from '../ListCachedGithubUsers';
-import { AppShell } from '../AppShell';
 
 export const OfflineResults = () => {
   const [cachedResponses, setCachedResponses] = useState<GithubUser[]>([]);
@@ -14,15 +13,15 @@ export const OfflineResults = () => {
   }, [getCachedGithubUsers, setCachedResponses]);
 
   return (
-    <AppShell>
+    <>
       <div className={styles.offlineResults}>
         <OfflineHeader />
         <h3>Your Past Searches</h3>
         <div className={styles.offlineResultsContainer}>
           <ListCachedGithubUsers users={cachedResponses} />
         </div>
       </div>
-    </AppShell>
+    </>
   );
 };
 

src/containers/HomeContainer.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import { AppShell } from '../components/Starter/AppShell';
 import { Home } from '../components/Starter/Home';
+import { OfflineResults } from '../components/Starter/OfflineResults';
 
 export const HomeContainer = () => {
   return (
     <AppShell>
-      <Home />
+      {window.navigator.onLine && <Home />}
+      {!window.navigator.onLine && <OfflineResults />}
     </AppShell>
   );
 };