feat(con): 404 page for unavailable content

apps/redi-connect/src/components/templates/LoggedIn.tsx

@@ -26,6 +26,7 @@ import { Navbar, SideMenu } from '../organisms'
 import Footer from '../organisms/Footer'
 
 interface Props {
+  hideNavigation?: boolean
   children?: ReactNode
 }
 

apps/redi-connect/src/pages/app/404/404.tsx

@@ -0,0 +1,14 @@
+import FourOhFour from '../../../assets/images/404.png'
+import { LoggedIn } from '../../../components/templates'
+
+export default () => (
+  <LoggedIn hideNavigation>
+    <div className="tw-max-w-[240px] md:tw-max-w-[342px] tw-flex tw-justify-center tw-h-full tw-flex-col tw-m-auto tw-min-h-[40rem]">
+      <img src={FourOhFour} alt="404" className="tw-mb-6" />
+      <span className="tw-text-sm md:tw-text-base">
+        <b>Hey!</b> This page isn't available. We're sorry about that. Please go
+        back to our <a href="/">Homepage</a>.
+      </span>
+    </div>
+  </LoggedIn>
+)

apps/redi-connect/src/pages/app/profile/Profile.tsx

@@ -78,16 +78,6 @@ function Profile() {
   const userCanApplyForMentorship =
     !isAcceptedMatch && currentUserIsMentee && !hasOpenApplication
 
-  const contactInfoAvailable =
-    profile &&
-    (profile.firstName ||
-      profile.lastName ||
-      profile.email ||
-      profile.telephoneNumber ||
-      profile.linkedInProfileUrl ||
-      profile.githubProfileUrl ||
-      profile.slackUsername)
-
   const shouldHidePrivateContactInfo = currentUserIsMentee && !isAcceptedMatch
 
   const activeMentorshipMatch = myProfile.mentorshipMatches.find(
@@ -164,17 +154,14 @@ function Profile() {
             </Element>
           )}
 
-          {contactInfoAvailable && (
+          {!shouldHidePrivateContactInfo && (
             <Element className="block-separator">
               <Columns>
-                {!shouldHidePrivateContactInfo &&
-                  (profile.firstName || profile.age) && (
-                    <Columns.Column>
-                      <Element className="block-separator">
-                        <ReadContactDetails.Some profile={profile} />
-                      </Element>
-                    </Columns.Column>
-                  )}
+                <Columns.Column>
+                  <Element className="block-separator">
+                    <ReadContactDetails.Some profile={profile} />
+                  </Element>
+                </Columns.Column>
                 {(profile.linkedInProfileUrl ||
                   profile.githubProfileUrl ||
                   profile.slackUsername) && (

apps/redi-connect/src/routes/routes__logged-in.tsx

@@ -37,6 +37,9 @@ const Me = lazy(
       /* webpackChunkName: "Me", webpackPreload: true  */ '../pages/app/me/Me'
     )
 )
+const FourOFour = lazy(
+  () => import(/* webpackChunkName: "404" */ '../pages/app/404/404')
+)
 
 const routes: RouteDefinition[] = [
   {
@@ -85,6 +88,11 @@ const routes: RouteDefinition[] = [
     component: Me,
     exact: true,
   },
+  {
+    path: '/app/404',
+    component: FourOFour,
+    exact: true,
+  },
 ]
 
 const routesRequiringLoggedIn = routes.map((route) =>