fix: style and optimistic ui

aseerkt · Feb 28, 2024 · 49546b1 · 49546b1
1 parent 592b32e
commit 49546b1
Show file tree

Hide file tree

Showing 12 changed files with 172 additions and 137 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -80,3 +80,11 @@
 .w-md-editor-text {
   font-family: var(--font-inter) !important;
 }
+
+.wmde-markdown ul {
+  list-style: disc;
+}
+
+.wmde-markdown ol {
+  list-style: decimal;
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -5,20 +5,22 @@ import Link from 'next/link';
 
 export default function Home() {
   return (
-    <div
-      className='min-h-screen flex flex-col bg-opacity-0'
-      style={{
-        backgroundImage: 'url("/finlabs-home.jpg")',
-      }}
-    >
-      <Navbar title='Finlabs' />
+    <div className='relative min-h-screen flex flex-col bg-opacity-0 bg-blue-950'>
+      <Image
+        src='/finlabs-home.jpg'
+        alt='homepage'
+        width={1200}
+        height={900}
+        className='w-full h-full absolute inset-0 -z-10'
+      />
+      <Navbar title={<span className='text-blue-800'>finlabs</span>} />
       <div className='grow flex items-center justify-center'>
         <div className='h-full bg-gray-800 bg-opacity-30 shadow-md rounded-2xl  grid grid-cols-2 space-x-10 p-20 items-center max-w-screen-lg mx-auto'>
           <div className='text-balance'>
-            <h1 className='text-pink-400 font-extrabold mb-4 text-5xl'>
-              Finlabs
+            <h1 className='text-blue-400 font-extrabold mb-4 text-5xl'>
+              finlabs
             </h1>{' '}
-            <p className='text-3xl text-gray-300 font-semibold mb-5'>
+            <p className='text-2xl text-gray-300 font-semibold mb-5'>
               Streamline your projects with Finlabs - the flexible project
               management tool for modern teams
             </p>

diff --git a/src/app/users/[username]/UserBio.tsx b/src/app/users/[username]/UserBio.tsx
@@ -1,11 +1,11 @@
 'use client';
 
+import { Markdown } from '@/components/Markdown';
 import { MdEditorField } from '@/components/form';
 import { Button } from '@/components/ui/button';
 import { Form } from '@/components/ui/form';
 import { toastUnknownError } from '@/components/ui/use-toast';
 import { useIsMounted } from '@/lib/hooks';
-import Editor from '@uiw/react-md-editor';
 import { useSession } from 'next-auth/react';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
@@ -34,10 +34,7 @@ export default function UserBio({ userId, bio }: UserBioProps) {
               Edit bio
             </Button>
           </header>
-          <Editor.Markdown
-            wrapperElement={{ 'data-color-mode': 'light' }}
-            source={bio}
-          />
+          <Markdown source={bio} />
         </div>
       ) : (
         <div>

diff --git a/src/app/users/[username]/projects/[projectName]/(task)/AssigneeAutocomplete.tsx b/src/app/users/[username]/projects/[projectName]/(task)/AssigneeAutocomplete.tsx
@@ -1,6 +1,5 @@
 import { AsyncAutocomplete } from '@/components/form';
 import { useSession } from 'next-auth/react';
-import Link from 'next/link';
 import { useEffect, useState } from 'react';
 import { Control } from 'react-hook-form';
 
@@ -43,9 +42,7 @@ export function AssigneeAutocomplete({
     )
       .then((res) => res.json())
       .then((result) =>
-        setAssigneeOptions(
-          assignees.concat(...(Array.isArray(result) ? result : []))
-        )
+        setAssigneeOptions(assignees.concat(result?.users ? result.users : []))
       );
   };
 
@@ -71,9 +68,7 @@ export function AssigneeAutocomplete({
           <span className='text-gray-500'>{option.name}</span>
         </div>
       )}
-      renderValue={(value) => (
-        <Link href={`/users/${value.username}`}>{value.username}</Link>
-      )}
+      renderValue={(value) => value.username}
       optionKey='username'
       valueKey='username'
       label={label}

diff --git a/src/app/users/[username]/projects/[projectName]/(task)/TaskDisplay.tsx b/src/app/users/[username]/projects/[projectName]/(task)/TaskDisplay.tsx
@@ -1,3 +1,4 @@
+import { Markdown } from '@/components/Markdown';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { DialogDescription, DialogHeader } from '@/components/ui/dialog';
@@ -19,7 +20,6 @@ import { toast } from '@/components/ui/use-toast';
 import { cn, fetcher } from '@/lib/utils';
 import { Prisma, TaskPriority } from '@prisma/client';
 import { DialogTitle } from '@radix-ui/react-dialog';
-import MDEditor from '@uiw/react-md-editor';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { capitalize } from 'lodash';
@@ -83,11 +83,20 @@ export default function TaskDisplay({ projectId, taskId }: TaskDisplayProps) {
     }
 
     try {
-      const result = await editTask(task.id, payload);
-      if (result) {
-        mutate((data) => ({ ...data!, ...result }));
-        handleCancelEdit();
-      }
+      await mutate(
+        async (current) => {
+          const result = await editTask(task.id, payload);
+          handleCancelEdit();
+          return { ...current!, ...result };
+        },
+        {
+          optimisticData: (current) => ({ ...current!, ...payload }),
+          rollbackOnError: true,
+          populateCache: true,
+          revalidate: false,
+          throwOnError: true,
+        }
+      );
     } catch (error) {
       toast({
         title: 'Something went wrong',
@@ -155,10 +164,7 @@ export default function TaskDisplay({ projectId, taskId }: TaskDisplayProps) {
                 <div className=' flex flex-col justify-start grow'>
                   <div className='grow'>
                     {task.description ? (
-                      <MDEditor.Markdown
-                        source={task.description}
-                        wrapperElement={{ 'data-color-mode': 'light' }}
-                      />
+                      <Markdown source={task.description} />
                     ) : (
                       <span className='text-gray-500'>
                         No description provided

diff --git a/src/components/Markdown/Markdown.tsx b/src/components/Markdown/Markdown.tsx
@@ -0,0 +1,19 @@
+import Editor from '@uiw/react-md-editor';
+
+interface MarkdownProps extends React.ComponentProps<typeof Editor.Markdown> {}
+
+export default function Markdown({ source, ...rest }: MarkdownProps) {
+  return (
+    <Editor.Markdown
+      {...rest}
+      wrapperElement={{
+        'data-color-mode': 'light',
+        ...rest.wrapperElement,
+        style: {
+          listStyle: 'disc',
+        },
+      }}
+      source={source}
+    />
+  );
+}
diff --git a/src/components/Markdown/index.ts b/src/components/Markdown/index.ts
@@ -0,0 +1 @@
+export { default as Markdown } from './Markdown';
diff --git a/src/components/form/AsyncAutocomplete.tsx b/src/components/form/AsyncAutocomplete.tsx
@@ -24,6 +24,7 @@ import { cn } from '@/lib/utils';
 import { CommandItem } from 'cmdk';
 import { isEmpty } from 'lodash';
 import { ChevronsUpDown, XCircleIcon } from 'lucide-react';
+import { useState } from 'react';
 import { Control, useFieldArray } from 'react-hook-form';
 
 interface ComboBoxFieldProps<Option, Value> {
@@ -66,6 +67,8 @@ export default function AsyncAutocomplete<Option, Value>({
   disabled = false,
 }: ComboBoxFieldProps<Option, Value>) {
   const { append, remove } = useFieldArray({ name, control });
+  const [open, setOpen] = useState(false);
+  const handleOpenChange = (open: boolean) => setOpen(open);
   return (
     <FormField
       control={control}
@@ -93,7 +96,7 @@ export default function AsyncAutocomplete<Option, Value>({
         return (
           <FormItem className='grow'>
             {label && <FormLabel>{label}</FormLabel>}
-            <Popover>
+            <Popover open={open} onOpenChange={handleOpenChange}>
               <PopoverTrigger disabled={disabled} asChild>
                 <FormControl>
                   <Button
@@ -126,9 +129,13 @@ export default function AsyncAutocomplete<Option, Value>({
                         value={getSearchValue(option)}
                         key={option[optionKey] as string}
                         onSelect={() => {
-                          multiple
-                            ? append(getOptionValue(option))
-                            : field.onChange(getOptionValue(option));
+                          const value = getOptionValue(option);
+                          if (multiple) {
+                            append(value);
+                          } else {
+                            field.onChange(value);
+                            handleOpenChange(false);
+                          }
                         }}
                       >
                         {renderOption(option, index)}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as Markdown } from './Markdown';