nextjs app dir optimization things

xvvvyz · Sep 8, 2023 · 1aaf7b5 · 1aaf7b5
1 parent ad79495
commit 1aaf7b5
Show file tree

Hide file tree

Showing 97 changed files with 1,098 additions and 1,328 deletions.
diff --git a/README.md b/README.md
@@ -46,6 +46,7 @@ pnpm run db:diff -- migration-description
 - Update auth providers
 - Update email templates
 - Update url config
+- Add custom SMTP server
 - Enable realtime
 - Github environment secrets:
   - NEXT_PUBLIC_SUPABASE_ANON_KEY

diff --git a/app/(account)/inputs/(page)/layout.tsx b/app/(account)/inputs/(page)/layout.tsx
@@ -0,0 +1,20 @@
+import Button from '@/_components/button';
+import { ReactNode } from 'react';
+
+interface LayoutProps {
+  children: ReactNode;
+}
+
+const Layout = async ({ children }: LayoutProps) => (
+  <>
+    <div className="my-16 flex h-8 items-center justify-between gap-8 px-4">
+      <h1 className="text-2xl">Inputs</h1>
+      <Button href="/inputs/create" size="sm">
+        Create input
+      </Button>
+    </div>
+    {children}
+  </>
+);
+
+export default Layout;
diff --git a/app/(account)/inputs/(page)/loading.tsx b/app/(account)/inputs/(page)/loading.tsx
@@ -0,0 +1,5 @@
+import Spinner from '@/_components/spinner';
+
+const Loading = () => <Spinner className="mx-auto" />;
+
+export default Loading;
diff --git a/app/(account)/inputs/(page)/page.tsx b/app/(account)/inputs/(page)/page.tsx
@@ -0,0 +1,30 @@
+import FilterableInputLinkList from '@/(account)/inputs/_components/filterable-input-link-list';
+import Empty from '@/_components/empty';
+import listInputs from '@/_server/list-inputs';
+import sortInputs from '@/_utilities/sort-inputs';
+import { InformationCircleIcon } from '@heroicons/react/24/outline';
+
+export const metadata = {
+  title: 'Inputs',
+};
+
+export const revalidate = 0;
+
+const Page = async () => {
+  const { data: inputs } = await listInputs();
+
+  if (!inputs?.length) {
+    return (
+      <Empty className="mx-4">
+        <InformationCircleIcon className="w-7" />
+        Inputs define the specific data points
+        <br />
+        you are interested in tracking.
+      </Empty>
+    );
+  }
+
+  return <FilterableInputLinkList inputs={inputs.sort(sortInputs)} />;
+};
+
+export default Page;
diff --git a/app/(account)/inputs/[inputId]/loading.tsx b/app/(account)/inputs/[inputId]/loading.tsx
@@ -0,0 +1,14 @@
+import BackButton from '@/_components/back-button';
+import Spinner from '@/_components/spinner';
+
+const Loading = () => (
+  <>
+    <div className="my-16 flex h-8 items-center justify-between gap-8 px-4">
+      <BackButton disabled />
+      <div className="h-6 w-32 animate-pulse rounded-sm bg-alpha-3" />
+    </div>
+    <Spinner className="mx-auto" />
+  </>
+);
+
+export default Loading;
diff --git a/app/(account)/inputs/[inputId]/page.tsx b/app/(account)/inputs/[inputId]/page.tsx
@@ -1,11 +1,9 @@
 import InputForm from '@/(account)/inputs/_components/input-form';
 import BackButton from '@/_components/back-button';
 import Breadcrumbs from '@/_components/breadcrumbs';
-import Header from '@/_components/header';
 import getInput, { GetInputData } from '@/_server/get-input';
 import listSubjectsByTeamId from '@/_server/list-subjects-by-team-id';
 import formatTitle from '@/_utilities/format-title';
-import { notFound } from 'next/navigation';
 
 interface PageProps {
   params: {
@@ -29,14 +27,14 @@ const Page = async ({ params: { inputId } }: PageProps) => {
     listSubjectsByTeamId(),
   ]);
 
-  if (!input) notFound();
+  if (!input) return null;
 
   return (
     <>
-      <Header>
+      <div className="my-16 flex h-8 items-center justify-between gap-8 px-4">
         <BackButton href="/inputs" />
         <Breadcrumbs items={[['Inputs', '/inputs'], [input.label]]} />
-      </Header>
+      </div>
       <InputForm input={input as GetInputData} subjects={subjects} />
     </>
   );

diff --git a/app/(account)/inputs/_components/filterable-input-link-list.tsx b/app/(account)/inputs/_components/filterable-input-link-list.tsx
@@ -4,9 +4,9 @@ import Avatar from '@/_components/avatar';
 import Button from '@/_components/button';
 import Input from '@/_components/input';
 import INPUT_LABELS from '@/_constants/constant-input-labels';
-import usePrevious from '@/_hooks/use-previous';
 import { ListInputsData } from '@/_server/list-inputs';
 import forceArray from '@/_utilities/force-array';
+import { usePrevious } from '@uidotdev/usehooks';
 import Fuse from 'fuse.js';
 import InputListItemMenu from './input-list-item-menu';
 

diff --git a/app/(account)/inputs/create/from-template/[inputId]/page.tsx b/app/(account)/inputs/create/from-template/[inputId]/page.tsx
@@ -1,11 +1,9 @@
 import InputForm from '@/(account)/inputs/_components/input-form';
 import BackButton from '@/_components/back-button';
 import Breadcrumbs from '@/_components/breadcrumbs';
-import Header from '@/_components/header';
 import getInput, { GetInputData } from '@/_server/get-input';
 import listSubjectsByTeamId from '@/_server/list-subjects-by-team-id';
 import formatTitle from '@/_utilities/format-title';
-import { notFound } from 'next/navigation';
 
 export const metadata = {
   title: formatTitle(['Inputs', 'Create']),
@@ -25,14 +23,14 @@ const Page = async ({ params: { inputId } }: PageProps) => {
     getInput(inputId),
   ]);
 
-  if (!input) notFound();
+  if (!input) return null;
 
   return (
     <div className="px-4">
-      <Header>
+      <div className="my-16 flex h-8 items-center justify-between gap-8 px-4">
         <BackButton href="/inputs" />
         <Breadcrumbs items={[['Inputs', '/inputs'], ['Create']]} />
-      </Header>
+      </div>
       <InputForm
         duplicateInputData={input as GetInputData}
         subjects={subjects}

diff --git a/app/(account)/inputs/create/loading.tsx b/app/(account)/inputs/create/loading.tsx
@@ -0,0 +1,14 @@
+import BackButton from '@/_components/back-button';
+import Spinner from '@/_components/spinner';
+
+const Loading = () => (
+  <>
+    <div className="my-16 flex h-8 items-center justify-between gap-8 px-4">
+      <BackButton disabled />
+      <div className="h-6 w-32 animate-pulse rounded-sm bg-alpha-3" />
+    </div>
+    <Spinner className="mx-auto" />
+  </>
+);
+
+export default Loading;
diff --git a/app/(account)/inputs/create/page.tsx b/app/(account)/inputs/create/page.tsx
@@ -1,7 +1,6 @@
 import InputForm from '@/(account)/inputs/_components/input-form';
 import BackButton from '@/_components/back-button';
 import Breadcrumbs from '@/_components/breadcrumbs';
-import Header from '@/_components/header';
 import listSubjectsByTeamId from '@/_server/list-subjects-by-team-id';
 import formatTitle from '@/_utilities/format-title';
 
@@ -16,10 +15,10 @@ const Page = async () => {
 
   return (
     <>
-      <Header>
+      <div className="my-16 flex h-8 items-center justify-between gap-8 px-4">
         <BackButton href="/inputs" />
         <Breadcrumbs items={[['Inputs', '/inputs'], ['Create']]} />
-      </Header>
+      </div>
       <InputForm subjects={subjects} />
     </>
   );

diff --git a/app/(account)/inputs/page.tsx b/app/(account)/inputs/page.tsx
diff --git a/app/(account)/layout.tsx b/app/(account)/layout.tsx
@@ -15,7 +15,7 @@ const Layout = async ({ children }: LayoutProps) => {
   const { count } = await countNotifications();
 
   return (
-    <div className="mx-auto max-w-lg pb-16">
+    <div className="mx-auto max-w-lg pb-20">
       <nav className="-mb-3 flex items-center justify-between gap-4 px-4 pt-8 leading-none text-fg-3">
         <div className="flex flex-wrap gap-4">
           <Button activeClassName="text-fg-2" href="/subjects" variant="link">
@@ -55,14 +55,6 @@ const Layout = async ({ children }: LayoutProps) => {
         </div>
       </nav>
       {children}
-      {!user?.user_metadata?.is_client && (
-        <p className="mt-16 flex justify-center gap-4">
-          <span className="text-fg-4">Questions or feedback?</span>
-          <Button variant="link" href="mailto:[email protected]">
-            [email protected]
-          </Button>
-        </p>
-      )}
     </div>
   );
 };

diff --git a/app/(account)/loading.tsx b/app/(account)/loading.tsx
diff --git a/app/(account)/notifications/_components/notifications.tsx b/app/(account)/notifications/_components/notifications.tsx
@@ -5,7 +5,6 @@ import Avatar from '@/_components/avatar';
 import Button from '@/_components/button';
 import DateTime from '@/_components/date-time';
 import DirtyHtml from '@/_components/dirty-html';
-import Empty from '@/_components/empty';
 import IconButton from '@/_components/icon-button';
 import NotificationTypes from '@/_constants/enum-notification-types';
 import { ListNotificationsData } from '@/_server/list-notifications';
@@ -16,7 +15,6 @@ import {
   ChatBubbleBottomCenterTextIcon,
   EnvelopeIcon,
   EnvelopeOpenIcon,
-  InformationCircleIcon,
   StarIcon,
   UserPlusIcon,
   XMarkIcon,
@@ -40,19 +38,8 @@ const Notifications = ({
   eventOrSessionIdNotificationIdMap,
   notifications,
   toggleNotificationReadAction,
-}: NotificationsProps) => {
-  if (!notifications.length) {
-    return (
-      <Empty>
-        <InformationCircleIcon className="w-7" />
-        Events and comments added by
-        <br />
-        others will appear here.
-      </Empty>
-    );
-  }
-
-  return notifications.map((n) => {
+}: NotificationsProps) =>
+  notifications.map((n) => {
     const comment = firstIfArray(n.comment);
     const profile = firstIfArray(n.profile);
     const sourceEvent = comment?.event ?? n.event;
@@ -66,7 +53,7 @@ const Notifications = ({
         <div className="relative">
           <Button
             className="m-0 block p-0"
-            href={`/subjects/${subject.id}/timeline?back=/notifications`}
+            href={`/subjects/${subject.id}?back=/notifications`}
             variant="link"
           >
             <Avatar file={subject.image_uri} name={subject.name} />
@@ -137,7 +124,7 @@ const Notifications = ({
                 ? sourceEvent.type.session
                   ? `/subjects/${subject.id}/missions/${sourceEvent.type.session.mission.id}/sessions/${sourceEvent.type.session.id}?back=/notifications`
                   : `/subjects/${subject.id}/events/${sourceEvent.id}?back=/notifications`
-                : `/subjects/${subject.id}/timeline?back=/notifications`
+                : `/subjects/${subject.id}?back=/notifications`
             }
             notificationIds={
               eventOrSessionIdNotificationIdMap[
@@ -176,6 +163,5 @@ const Notifications = ({
       </div>
     );
   });
-};
 
 export default Notifications;
diff --git a/app/(account)/notifications/layout.tsx b/app/(account)/notifications/layout.tsx
@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+
+interface LayoutProps {
+  children: ReactNode;
+}
+
+const Layout = async ({ children }: LayoutProps) => (
+  <>
+    <div className="my-16 flex h-8 items-center justify-between gap-8 px-4">
+      <h1 className="text-2xl">Notifications</h1>
+    </div>
+    {children}
+  </>
+);
+
+export default Layout;
diff --git a/app/(account)/notifications/loading.tsx b/app/(account)/notifications/loading.tsx
@@ -0,0 +1,5 @@
+import Spinner from '@/_components/spinner';
+
+const Loading = () => <Spinner className="mx-auto" />;
+
+export default Loading;