merge FeedbackBanner and UserBanner into Banner

complexdatacollective · Dec 12, 2023 · bced69d · bced69d
1 parent 05a0596
commit bced69d
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 89 deletions.
diff --git a/app/(interview)/interview/_components/InterviewShell.tsx b/app/(interview)/interview/_components/InterviewShell.tsx
@@ -1,20 +1,19 @@
 'use client';
 
+import { isEqual } from 'lodash';
+import { useQueryState } from 'next-usequerystate';
+import { useEffect, useState } from 'react';
 import { Provider, useSelector } from 'react-redux';
+import usePrevious from '~/hooks/usePrevious';
 import DialogManager from '~/lib/interviewer/components/DialogManager';
 import ProtocolScreen from '~/lib/interviewer/containers/ProtocolScreen';
-import { store } from '~/lib/interviewer/store';
-import UserBanner from './UserBanner';
-import { useEffect, useState } from 'react';
 import {
   SET_SERVER_SESSION,
   type SetServerSessionAction,
 } from '~/lib/interviewer/ducks/modules/setServerSession';
 import { getActiveSession } from '~/lib/interviewer/selectors/session';
+import { store } from '~/lib/interviewer/store';
 import { api } from '~/trpc/client';
-import { useQueryState } from 'next-usequerystate';
-import usePrevious from '~/hooks/usePrevious';
-import { isEqual } from 'lodash';
 
 // The job of ServerSync is to listen to actions in the redux store, and to sync
 // data with the server.
@@ -107,7 +106,6 @@ const InterviewShell = ({ interviewID }: { interviewID: string }) => {
   return (
     <Provider store={store}>
       <ServerSync interviewId={interviewID} />
-      <UserBanner />
       <ProtocolScreen />
       <DialogManager />
     </Provider>

diff --git a/app/(interview)/interview/_components/UserBanner.tsx b/app/(interview)/interview/_components/UserBanner.tsx
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,5 +1,5 @@
 import { revalidatePath, revalidateTag } from 'next/cache';
-import FeedbackBanner from '~/components/FeedbackBanner/FeedbackBanner';
+import Banner from '~/components/Banner/Banner';
 import RedirectWrapper from '~/components/RedirectWrapper';
 import { Toaster } from '~/components/ui/toaster';
 import '~/styles/globals.scss';
@@ -28,13 +28,15 @@ async function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <body>
-        <FeedbackBanner />
         <RedirectWrapper
           configured={!!appSettings?.configured}
           expired={!!appSettings?.expired}
           session={session}
         >
-          <Providers initialSession={session}>{children}</Providers>
+          <Providers initialSession={session}>
+            <Banner />
+            {children}
+          </Providers>
           <Toaster />
         </RedirectWrapper>
       </body>

diff --git a/components/FeedbackBanner/FeedbackBanner.tsx → components/Banner/Banner.tsx b/components/FeedbackBanner/FeedbackBanner.tsx → components/Banner/Banner.tsx
@@ -1,6 +1,6 @@
-import FeedbackButton from './FeedbackButton';
+import BannerContent from './BannerContent';
 
-export default function FeedbackBanner() {
+export default function Banner() {
   return (
     <div className="sticky top-0 isolate z-50 flex w-full items-center justify-center gap-x-6 overflow-hidden bg-gray-50 px-6 py-2 sm:px-3.5 ">
       <div
@@ -27,21 +27,7 @@ export default function FeedbackBanner() {
           }}
         />
       </div>
-      <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
-        <p className="text-sm leading-6 text-gray-900">
-          <strong className="font-semibold">🤖 Fresco is Alpha software</strong>
-          <svg
-            viewBox="0 0 2 2"
-            className="mx-2 inline h-0.5 w-0.5 fill-current"
-            aria-hidden="true"
-          >
-            <circle cx={1} cy={1} r={1} />
-          </svg>
-          We would appreciate input about how we can improve it, and reports or
-          any issues you find.
-        </p>
-        <FeedbackButton />
-      </div>
+      <BannerContent />
     </div>
   );
 }
diff --git a/components/Banner/BannerContent.tsx b/components/Banner/BannerContent.tsx
@@ -0,0 +1,39 @@
+'use client';
+
+import { LogOut } from 'lucide-react';
+import Link from 'next/link';
+import { Button } from '~/components/ui/Button';
+import { useSession } from '~/providers/SessionProvider';
+import FeedbackBanner from './FeedbackBanner';
+import { usePathname } from 'next/navigation';
+
+const BannerContent = () => {
+  const { session, signOut } = useSession();
+  const pathname = usePathname();
+
+  if (session && pathname.startsWith('/interview/')) {
+    return (
+      <div className="flex w-full items-center justify-between px-4">
+        <p className="text-sm font-bold leading-6">
+          You are currently logged in.
+        </p>
+        <FeedbackBanner />
+        <div className="flex gap-x-4">
+          <Link href="/dashboard">
+            <Button variant="default" color="primary" size="sm">
+              Return to Dashboard{' '}
+              <LogOut className="ml-2" size={16} strokeWidth={3} />
+            </Button>
+          </Link>
+          <Button variant="link" color="primary" size="sm" onClick={signOut}>
+            Sign out
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return <FeedbackBanner />;
+};
+
+export default BannerContent;
diff --git a/components/Banner/FeedbackBanner.tsx b/components/Banner/FeedbackBanner.tsx
@@ -0,0 +1,23 @@
+import FeedbackButton from './FeedbackButton';
+
+const FeedbackBanner = () => {
+  return (
+    <div className="mx-auto flex items-center gap-x-3">
+      <p className="text-sm leading-6 text-gray-900">
+        <strong className="font-semibold">🤖 Fresco is Alpha software</strong>
+        <svg
+          viewBox="0 0 2 2"
+          className="mx-2 inline h-0.5 w-0.5 fill-current"
+          aria-hidden="true"
+        >
+          <circle cx={1} cy={1} r={1} />
+        </svg>
+        We would appreciate input about how we can improve it, and reports or
+        any issues you find.
+      </p>
+      <FeedbackButton />
+    </div>
+  );
+};
+
+export default FeedbackBanner;
diff --git a/components/FeedbackBanner/FeedbackButton.tsx → components/Banner/FeedbackButton.tsx b/components/FeedbackBanner/FeedbackButton.tsx → components/Banner/FeedbackButton.tsx
diff --git a/components/FeedbackBanner/FeedbackModal.tsx → components/Banner/FeedbackModal.tsx b/components/FeedbackBanner/FeedbackModal.tsx → components/Banner/FeedbackModal.tsx
diff --git a/lib/interviewer/containers/ProtocolScreen.js b/lib/interviewer/containers/ProtocolScreen.js
@@ -21,9 +21,13 @@ const ProtocolScreen = () => {
   }
 
   return (
-    <motion.div className='flex flex-1 w-screen flex-row' initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
+    <motion.div
+      className="flex w-full flex-1 flex-row"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+    >
       <Navigation />
-      <AnimatePresence mode='wait' initial={false}>
+      <AnimatePresence mode="wait" initial={false}>
         <Stage
           key={currentStage.id}
           stage={currentStage}
@@ -32,7 +36,7 @@ const ProtocolScreen = () => {
         />
       </AnimatePresence>
     </motion.div>
-  )
-}
+  );
+};
 
-export default ProtocolScreen;
+export default ProtocolScreen;