Await getUserFromSession and run prettier

storybookjs · Aug 15, 2024 · 841cdae · 841cdae
1 parent 785f5e4
commit 841cdae
Show file tree

Hide file tree

Showing 25 changed files with 99 additions and 214 deletions.
diff --git a/app/actions.ts b/app/actions.ts
@@ -6,12 +6,8 @@ import { cookies } from 'next/headers'
 import { redirect } from 'next/navigation'
 import { getUserFromSession } from '#lib/session'
 
-export async function saveNote(
-  noteId: number | undefined,
-  title: string,
-  body: string,
-) {
-  const user = getUserFromSession()
+export async function saveNote(noteId: number | undefined, title: string, body: string) {
+  const user = await getUserFromSession()
 
   if (!user) {
     redirect('/')

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -21,11 +21,7 @@ export const metadata = {
   },
 }
 
-export default async function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html>
       <body>
@@ -42,9 +38,7 @@ export async function Layout({ children }: { children: React.ReactNode }) {
     },
   })
   let notesArray = notes
-    ? (Object.values(notes) as Note[]).sort(
-        (a, b) => Number(a.id) - Number(b.id),
-      )
+    ? (Object.values(notes) as Note[]).sort((a, b) => Number(a.id) - Number(b.id))
     : []
 
   return (

diff --git a/app/note/[id]/loading.tsx b/app/note/[id]/loading.tsx
@@ -1,19 +1,12 @@
 export default function NoteSkeleton() {
   return (
-    <div
-      className="note skeleton-container"
-      role="progressbar"
-      aria-busy="true"
-    >
+    <div className="note skeleton-container" role="progressbar" aria-busy="true">
       <div className="note-header">
         <div
           className="note-title skeleton"
           style={{ height: '3rem', width: '65%', marginInline: '12px 1em' }}
         />
-        <div
-          className="skeleton skeleton--button"
-          style={{ width: '8em', height: '2.5em' }}
-        />
+        <div className="skeleton skeleton--button" style={{ width: '8em', height: '2.5em' }} />
       </div>
       <div className="note-preview">
         <div className="skeleton v-stack" style={{ height: '1.5em' }} />

diff --git a/app/note/edit/[id]/page.tsx b/app/note/edit/[id]/page.tsx
@@ -13,7 +13,7 @@ type Props = {
 }
 
 export default async function EditPage({ params }: Props) {
-  const user = getUserFromSession()
+  const user = await getUserFromSession()
 
   const note = await db.note.findUnique({
     where: {

diff --git a/app/note/edit/loading.tsx b/app/note/edit/loading.tsx
@@ -1,20 +1,13 @@
 export default function EditSkeleton() {
   return (
-    <div
-      className="note-editor skeleton-container"
-      role="progressbar"
-      aria-busy="true"
-    >
+    <div className="note-editor skeleton-container" role="progressbar" aria-busy="true">
       <div className="note-editor-form">
         <div className="skeleton v-stack" style={{ height: '3rem' }} />
         <div className="skeleton v-stack" style={{ height: '100%' }} />
       </div>
       <div className="note-editor-preview">
         <div className="note-editor-menu">
-          <div
-            className="skeleton skeleton--button"
-            style={{ width: '8em', height: '2.5em' }}
-          />
+          <div className="skeleton skeleton--button" style={{ width: '8em', height: '2.5em' }} />
           <div
             className="skeleton skeleton--button"
             style={{ width: '8em', height: '2.5em', marginInline: '12px 0' }}

diff --git a/app/note/edit/page.stories.tsx b/app/note/edit/page.stories.tsx
@@ -39,12 +39,8 @@ export const EditNewNote: Story = {}
 
 export const SaveNewNote: Story = {
   play: async ({ canvas, userEvent }) => {
-    const titleInput = await canvas.findByLabelText(
-      'Enter a title for your note',
-    )
-    const bodyInput = await canvas.findByLabelText(
-      'Enter the body for your note',
-    )
+    const titleInput = await canvas.findByLabelText('Enter a title for your note')
+    const bodyInput = await canvas.findByLabelText('Enter the body for your note')
     await userEvent.clear(titleInput)
     await userEvent.type(titleInput, 'New Note Title', {})
     await userEvent.type(bodyInput, 'New Note Body')

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,9 +1,7 @@
 export default async function Home() {
   return (
     <div className="note--empty-state">
-      <span className="note-text--empty-state">
-        Click a note on the left to view something!
-      </span>
+      <span className="note-text--empty-state">Click a note on the left to view something!</span>
     </div>
   )
 }
diff --git a/app/style.css b/app/style.css
@@ -106,13 +106,13 @@ select {
   --outline-box-shadow-contrast: 0 0 0 2px var(--navy-blue);
 
   /* Fonts */
-  --sans-serif: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    Ubuntu, Helvetica, sans-serif;
-  --monospace: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
-    monospace;
+  --sans-serif: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, Helvetica,
+    sans-serif;
+  --monospace: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
 }
 
-html, #storybook-root {
+html,
+#storybook-root {
   font-size: 100%;
   height: 100%;
 }
@@ -304,7 +304,9 @@ ul.notes-list {
 
 .sidebar {
   background: var(--white);
-  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1), 0px 2px 2px rgba(0, 0, 0, 0.1);
+  box-shadow:
+    0px 8px 24px rgba(0, 0, 0, 0.1),
+    0px 2px 2px rgba(0, 0, 0, 0.1);
   overflow-y: scroll;
   z-index: 1000;
   flex-shrink: 0;
@@ -521,7 +523,9 @@ ul.notes-list {
   visibility: hidden;
   opacity: 0;
   cursor: default;
-  transition: visibility 0s linear 20ms, opacity 300ms;
+  transition:
+    visibility 0s linear 20ms,
+    opacity 300ms;
   outline-style: none;
 }
 .sidebar-note-toggle-expand:focus {
@@ -532,15 +536,19 @@ ul.notes-list {
 .sidebar-note-toggle-expand:focus {
   visibility: visible;
   opacity: 1;
-  transition: visibility 0s linear 0s, opacity 300ms;
+  transition:
+    visibility 0s linear 0s,
+    opacity 300ms;
 }
 
 @media (hover: hover) {
   .sidebar-note-open:hover + .sidebar-note-toggle-expand,
   .sidebar-note-toggle-expand:hover {
     visibility: visible;
     opacity: 1;
-    transition: visibility 0s linear 0s, opacity 300ms;
+    transition:
+      visibility 0s linear 0s,
+      opacity 300ms;
   }
 }
 .sidebar-note-toggle-expand img {
@@ -585,7 +593,9 @@ ul.notes-list {
 }
 .note {
   background: var(--white);
-  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1), 0px 0px 2px rgba(0, 0, 0, 0.1);
+  box-shadow:
+    0px 4px 20px rgba(0, 0, 0, 0.1),
+    0px 0px 2px rgba(0, 0, 0, 0.1);
   border-radius: 8px;
   width: calc(100% - 32px);
   height: calc(100% - 32px);
@@ -635,7 +645,9 @@ ul.notes-list {
   display: flex;
   padding: 16px;
   background: var(--white);
-  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1), 0px 0px 2px rgba(0, 0, 0, 0.1);
+  box-shadow:
+    0px 4px 20px rgba(0, 0, 0, 0.1),
+    0px 0px 2px rgba(0, 0, 0, 0.1);
   border-radius: 8px;
   width: calc(100% - 32px);
   height: calc(100% - 32px);

diff --git a/components/auth-button.tsx b/components/auth-button.tsx
@@ -9,19 +9,18 @@ type Props = {
   noteId: number | null
 }
 
-export default function AuthButton({ children, noteId }: Props) {
-  const user = getUserFromSession()
+export default async function AuthButton({ children, noteId }: Props) {
+  const user = await getUserFromSession()
   const isDraft = noteId == null
 
   if (user) {
     return (
       // Use hard link
       <Link href={`/note/edit/${noteId || ''}`} className="link--unstyled">
         <button
-          className={[
-            'edit-button',
-            isDraft ? 'edit-button--solid' : 'edit-button--outline',
-          ].join(' ')}
+          className={['edit-button', isDraft ? 'edit-button--solid' : 'edit-button--outline'].join(
+            ' ',
+          )}
           role="menuitem"
         >
           {children}
@@ -41,10 +40,9 @@ export default function AuthButton({ children, noteId }: Props) {
   return (
     <form action={login}>
       <button
-        className={[
-          'edit-button',
-          isDraft ? 'edit-button--solid' : 'edit-button--outline',
-        ].join(' ')}
+        className={['edit-button', isDraft ? 'edit-button--solid' : 'edit-button--outline'].join(
+          ' ',
+        )}
         role="menuitem"
       >
         Login to Add

diff --git a/components/logout-button.tsx b/components/logout-button.tsx
@@ -1,13 +1,13 @@
 import { logout } from '#app/actions'
 import { getUserFromSession } from '#lib/session'
 
-export default function LogoutButton() {
-  const user = getUserFromSession()
+export default async function LogoutButton() {
+  const user = await getUserFromSession()
 
   return (
     user && (
       <form action={logout}>
-        <button className="logout-button" type="submit" aria-label='logout'>
+        <button className="logout-button" type="submit" aria-label="logout">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="24"

diff --git a/components/note-editor.stories.tsx b/components/note-editor.stories.tsx
@@ -1,21 +1,21 @@
 import { type Meta, type StoryObj } from '@storybook/react'
-import NoteEditor from "./note-editor";
+import NoteEditor from './note-editor'
 
 const meta = {
   component: NoteEditor,
   args: {
     initialTitle: 'This is a title',
     initialBody: 'This is a body',
     noteId: 1,
-  }
+  },
 } satisfies Meta<typeof NoteEditor>
 
-export default meta;
+export default meta
 
 type Story = StoryObj<typeof meta>
 export const Default: Story = {}
 export const Draft: Story = {
   args: {
     noteId: undefined,
-  }
-}
+  },
+}
diff --git a/components/note-editor.tsx b/components/note-editor.tsx
@@ -12,11 +12,7 @@ type Props = {
   initialBody: string
 }
 
-export default function NoteEditor({
-  noteId,
-  initialTitle,
-  initialBody,
-}: Props) {
+export default function NoteEditor({ noteId, initialTitle, initialBody }: Props) {
   const { pending } = useFormStatus()
   const [title, setTitle] = useState(initialTitle)
   const [body, setBody] = useState(initialBody)
@@ -39,11 +35,7 @@ export default function NoteEditor({
         <label className="offscreen" htmlFor="note-body-input">
           Enter the body for your note
         </label>
-        <textarea
-          value={body}
-          id="note-body-input"
-          onChange={(e) => setBody(e.target.value)}
-        />
+        <textarea value={body} id="note-body-input" onChange={(e) => setBody(e.target.value)} />
       </form>
       <div className="note-editor-preview">
         <form className="note-editor-menu" role="menubar">
@@ -54,13 +46,7 @@ export default function NoteEditor({
             formAction={() => saveNote(noteId, title, body)}
             role="menuitem"
           >
-            <Image
-              src="/checkmark.svg"
-              width={14}
-              height={10}
-              alt=""
-              role="presentation"
-            />
+            <Image src="/checkmark.svg" width={14} height={10} alt="" role="presentation" />
             Done
           </button>
           {!isDraft && (
@@ -70,13 +56,7 @@ export default function NoteEditor({
               formAction={() => deleteNote(noteId)}
               role="menuitem"
             >
-              <Image
-                src="/cross.svg"
-                width={10}
-                height={10}
-                alt=""
-                role="presentation"
-              />
+              <Image src="/cross.svg" width={10} height={10} alt="" role="presentation" />
               Delete
             </button>
           )}

diff --git a/components/note-list-skeleton.stories.tsx b/components/note-list-skeleton.stories.tsx
@@ -1,11 +1,11 @@
 import { type Meta, type StoryObj } from '@storybook/react'
-import NoteListSkeleton from "./note-list-skeleton";
+import NoteListSkeleton from './note-list-skeleton'
 
 const meta = {
   component: NoteListSkeleton,
 } satisfies Meta<typeof NoteListSkeleton>
 
-export default meta;
+export default meta
 
 type Story = StoryObj<typeof meta>
-export const Default: Story = {}
+export const Default: Story = {}
diff --git a/components/note-list-skeleton.tsx b/components/note-list-skeleton.tsx
@@ -3,22 +3,13 @@ export default function NoteListSkeleton() {
     <div>
       <ul className="notes-list skeleton-container">
         <li className="v-stack">
-          <div
-            className="sidebar-note-list-item skeleton"
-            style={{ height: '5em' }}
-          />
+          <div className="sidebar-note-list-item skeleton" style={{ height: '5em' }} />
         </li>
         <li className="v-stack">
-          <div
-            className="sidebar-note-list-item skeleton"
-            style={{ height: '5em' }}
-          />
+          <div className="sidebar-note-list-item skeleton" style={{ height: '5em' }} />
         </li>
         <li className="v-stack">
-          <div
-            className="sidebar-note-list-item skeleton"
-            style={{ height: '5em' }}
-          />
+          <div className="sidebar-note-list-item skeleton" style={{ height: '5em' }} />
         </li>
       </ul>
     </div>