pressed some buttons

BrianP8701 · Sep 30, 2024 · ff4d0b1 · ff4d0b1
1 parent 2d15226
commit ff4d0b1
Show file tree

Hide file tree

Showing 137 changed files with 2,244 additions and 2,445 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,6 @@
+node_modules
+build
+dist
+res
+coverage
+generated
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,12 @@
+{
+  "printWidth": 120,
+  "proseWrap": "preserve",
+  "semi": false,
+  "singleQuote": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "arrowParens": "avoid",
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "jsxSingleQuote": true 
+}
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -1,12 +1,12 @@
-import { PropsWithChildren } from "react";
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import { ClerkProvider, ClerkLoaded } from '@clerk/clerk-react';
-import { TooltipProvider } from "@/components/ui/tooltip";
-import './App.css';
-import HomePage from './views/HomePage';
-import { ApolloClientProvider } from "./providers/ApolloClientProvider";
-import MainLayout from "@/components/layouts/MainLayout";
-import AuthWrapper from "./components/custom/AuthWrapper";
+import { PropsWithChildren } from 'react'
+import { BrowserRouter, Route, Routes } from 'react-router-dom'
+import { ClerkProvider, ClerkLoaded } from '@clerk/clerk-react'
+import { TooltipProvider } from '@/components/ui/tooltip'
+import './App.css'
+import HomePage from './views/HomePage'
+import { ApolloClientProvider } from './providers/ApolloClientProvider'
+import MainLayout from '@/components/layouts/MainLayout'
+import AuthWrapper from './components/custom/AuthWrapper'
 
 const App = () => {
   return (
@@ -37,8 +37,8 @@ const Providers = (props: PropsWithChildren<NonNullable<unknown>>) => {
           </TooltipProvider>
         </ApolloClientProvider>
       </ClerkLoaded>
-    </ClerkProvider >
+    </ClerkProvider>
   )
 }
 
-export default App;
+export default App
diff --git a/client/src/components/custom/AuthWrapper.tsx b/client/src/components/custom/AuthWrapper.tsx
@@ -1,12 +1,12 @@
-import { Outlet } from 'react-router-dom';
-import { RedirectToSignIn, SignedIn, SignedOut } from '@clerk/clerk-react';
-import { TooltipProvider } from "@radix-ui/react-tooltip";
+import { Outlet } from 'react-router-dom'
+import { RedirectToSignIn, SignedIn, SignedOut } from '@clerk/clerk-react'
+import { TooltipProvider } from '@radix-ui/react-tooltip'
 
 const AuthWrapper = () => {
   return (
     <>
-    <SignedIn>
-      <TooltipProvider>
+      <SignedIn>
+        <TooltipProvider>
           <Outlet />
         </TooltipProvider>
       </SignedIn>
@@ -17,4 +17,4 @@ const AuthWrapper = () => {
   )
 }
 
-export default AuthWrapper;
+export default AuthWrapper
diff --git a/client/src/components/custom/ButtonWithTooltipWhenDisabled.tsx b/client/src/components/custom/ButtonWithTooltipWhenDisabled.tsx
@@ -1,48 +1,48 @@
-import { Button, ButtonProps } from "@/components/ui/button";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { Button, ButtonProps } from '@/components/ui/button'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import { cn } from '@/utils/cn'
 
 interface ButtonWithTooltipWhenDisabledProps extends ButtonProps {
-  onClick: () => void;
-  tooltipText: string;
-  ariaLabel: string;
-  disabled: boolean;
+  onClick: () => void
+  tooltipText: string
+  ariaLabel: string
+  disabled: boolean
 }
 
-export default function ButtonWithTooltipWhenDisabled({ 
-  children, 
-  className, 
-  variant = "ghost", 
-  size = "icon", 
-  ariaLabel, 
-  onClick, 
-  tooltipText, 
-  disabled 
+export default function ButtonWithTooltipWhenDisabled({
+  children,
+  className,
+  variant = 'ghost',
+  size = 'icon',
+  ariaLabel,
+  onClick,
+  tooltipText,
+  disabled,
 }: ButtonWithTooltipWhenDisabledProps) {
-  const button = (
-    <Button
-      variant={variant}
-      size={size}
-      className={className}
-      aria-label={ariaLabel}
-      onClick={onClick}
-      disabled={disabled}
-    >
-      {children}
-    </Button>
-  );
-
-  if (!disabled) {
-    return button;
+  const handleClick = () => {
+    if (!disabled) {
+      onClick()
+    }
   }
 
   return (
     <Tooltip>
       <TooltipTrigger asChild>
-        {button}
+        <Button
+          variant={variant}
+          size={size}
+          className={cn(className, disabled && 'cursor-not-allowed')}
+          aria-label={ariaLabel}
+          onClick={handleClick}
+        >
+          {children}
+        </Button>
       </TooltipTrigger>
-      <TooltipContent side="right" sideOffset={5}>
-        {tooltipText}
-      </TooltipContent>
+      {disabled && (
+        <TooltipContent side='right' sideOffset={5}>
+          {tooltipText}
+        </TooltipContent>
+      )}
     </Tooltip>
-  );
+  )
 }
diff --git a/client/src/components/custom/CommandSection.tsx b/client/src/components/custom/CommandSection.tsx
@@ -1,11 +1,4 @@
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@/components/ui/command'
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
 import { cn } from '@/utils/cn'
 import { CheckIcon, Loader2Icon, PlusCircleIcon } from 'lucide-react'
 import * as React from 'react'
@@ -83,9 +76,7 @@ export function CommandSection({
                   >
                     <CheckIcon className={cn('h-4 w-4')} />
                   </div>
-                  {isCreateOption && (
-                    <PlusCircleIcon className='w-4 h-4 mr-2 text-muted-foreground' />
-                  )}
+                  {isCreateOption && <PlusCircleIcon className='w-4 h-4 mr-2 text-muted-foreground' />}
                   <span>{option.label}</span>
                 </CommandItem>
               )
@@ -95,4 +86,4 @@ export function CommandSection({
       </CommandList>
     </Command>
   )
-}
+}
diff --git a/client/src/components/custom/DialogPreview.tsx b/client/src/components/custom/DialogPreview.tsx
@@ -1,33 +1,28 @@
-import React, { ReactElement } from "react";
-import { Dialog, DialogTrigger, DialogContent } from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
-import { Expand } from "lucide-react";
+import React, { ReactElement } from 'react'
+import { Dialog, DialogTrigger, DialogContent } from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { Expand } from 'lucide-react'
 
 interface DialogPreviewProps {
-  previewComponent: ReactElement;
-  dialogContent: ReactElement;
-  dialogProps?: Record<string, unknown>;
+  previewComponent: ReactElement
+  dialogContent: ReactElement
+  dialogProps?: Record<string, unknown>
 }
 
 export default function DialogPreview({ previewComponent, dialogContent, dialogProps }: DialogPreviewProps) {
   return (
-    <div className="relative w-full h-full bg-neutral-800 rounded-xl">
-      <div className="w-full h-full">
-        {previewComponent}
-      </div>
+    <div className='relative w-full h-full bg-neutral-800 rounded-xl'>
+      <div className='w-full h-full'>{previewComponent}</div>
       <Dialog>
         <DialogTrigger asChild>
-          <Button
-            className="absolute top-2 right-2 px-1 py-2 z-30"
-            variant="ghost"
-          >
+          <Button className='absolute top-2 right-2 px-1 py-2 z-30' variant='ghost'>
             <Expand size={20} />
           </Button>
         </DialogTrigger>
-        <DialogContent className="w-[95vw] h-[95vh] max-w-[95vw] p-0 rounded-xl bg-neutral-800">
+        <DialogContent className='w-[95vw] h-[95vh] max-w-[95vw] p-0 rounded-xl bg-neutral-800'>
           {React.cloneElement(dialogContent, { ...dialogProps, isDialogMode: true })}
         </DialogContent>
       </Dialog>
     </div>
-  );
-}
+  )
+}
diff --git a/client/src/components/custom/QuestionDialog.tsx b/client/src/components/custom/QuestionDialog.tsx
@@ -1,19 +1,17 @@
-import { CircleHelp } from "lucide-react";
-import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import { CircleHelp } from 'lucide-react'
+import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'
 
 interface QuestionDialogProps {
-  dialogContent: React.ReactNode;
+  dialogContent: React.ReactNode
 }
 
 export default function QuestionDialog({ dialogContent }: QuestionDialogProps) {
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <CircleHelp className="cursor-pointer" size={20} />
+        <CircleHelp className='cursor-pointer' size={20} />
       </DialogTrigger>
-      <DialogContent>
-        {dialogContent}
-      </DialogContent>
+      <DialogContent>{dialogContent}</DialogContent>
     </Dialog>
-  );
-}
+  )
+}
diff --git a/client/src/components/custom/QuestionTooltip.tsx b/client/src/components/custom/QuestionTooltip.tsx
@@ -1,19 +1,19 @@
-import { CircleHelp } from "lucide-react";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { CircleHelp } from 'lucide-react'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 
 interface QuestionTooltipProps {
-  tooltipText: string;
+  tooltipText: string
 }
 
 export default function QuestionTooltip({ tooltipText }: QuestionTooltipProps) {
   return (
     <Tooltip>
       <TooltipTrigger asChild>
-        <CircleHelp className="cursor-pointer" size={20} />
+        <CircleHelp className='cursor-pointer' size={20} />
       </TooltipTrigger>
-      <TooltipContent side="right" sideOffset={5}>
+      <TooltipContent side='right' sideOffset={5}>
         {tooltipText}
       </TooltipContent>
     </Tooltip>
-  );
+  )
 }
diff --git a/client/src/components/custom/SelectOrCreate.tsx b/client/src/components/custom/SelectOrCreate.tsx
@@ -1,53 +1,55 @@
-import React, { useState } from 'react';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Input } from "@/components/ui/input";
+import React, { useState } from 'react'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Input } from '@/components/ui/input'
 
 interface SelectOrCreateProps {
-  placeholder: string;
-  newOptionPlaceholder: string;
-  options: string[];
-  setSelectedOption: React.Dispatch<React.SetStateAction<string>>;
-  setOptions: React.Dispatch<React.SetStateAction<string[]>>;
+  placeholder: string
+  newOptionPlaceholder: string
+  options: string[]
+  setSelectedOption: React.Dispatch<React.SetStateAction<string>>
+  setOptions: React.Dispatch<React.SetStateAction<string[]>>
 }
 
-const SelectOrCreate: React.FC<SelectOrCreateProps> = ({ placeholder, newOptionPlaceholder, options, setSelectedOption, setOptions }) => {
-  const [newOption, setNewOption] = useState('');
+const SelectOrCreate: React.FC<SelectOrCreateProps> = ({
+  placeholder,
+  newOptionPlaceholder,
+  options,
+  setSelectedOption,
+  setOptions,
+}) => {
+  const [newOption, setNewOption] = useState('')
 
   const handleCreateOption = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter' && newOption.trim()) {
-      const updatedOptions = [newOption, ...options];
-      setOptions(updatedOptions);
-      setSelectedOption(newOption);
-      setNewOption('');
+      const updatedOptions = [newOption, ...options]
+      setOptions(updatedOptions)
+      setSelectedOption(newOption)
+      setNewOption('')
     }
-  };
+  }
 
   return (
     <Select onValueChange={setSelectedOption}>
       <SelectTrigger>
         <SelectValue placeholder={placeholder} />
       </SelectTrigger>
       <SelectContent>
-        <div className="p-2">
+        <div className='p-2'>
           <Input
             value={newOption}
-            onChange={(e) => setNewOption(e.target.value)}
+            onChange={e => setNewOption(e.target.value)}
             onKeyDown={handleCreateOption}
             placeholder={newOptionPlaceholder}
           />
         </div>
-        {options.map((option) => (
-          <SelectItem key={option} value={option}>{option}</SelectItem>
+        {options.map(option => (
+          <SelectItem key={option} value={option}>
+            {option}
+          </SelectItem>
         ))}
       </SelectContent>
     </Select>
-  );
-};
+  )
+}
 
-export default SelectOrCreate;
+export default SelectOrCreate