Merge pull request #1 from ChampionBuffalo1/redesign

Redesign the entire UI

.eslintrc.yml

@@ -1,19 +1,21 @@
 root: true
 parser: '@typescript-eslint/parser'
+# Ignore shadcn files
+ignorePatterns: ['**/ui/*.ts', '**/ui/*.tsx']
 extends:
   - prettier
   - eslint:recommended
   - plugin:react/recommended
   - plugin:react/jsx-runtime
   - plugin:unicorn/recommended
-  - plugin:security/recommended
   - plugin:react-hooks/recommended
   - plugin:@typescript-eslint/recommended
   - plugin:@typescript-eslint/eslint-recommended
 settings:
   react:
     version: 18.x
 rules:
+  react/prop-types: off
   unicorn/filename-case: off
   unicorn/prevent-abbreviations: off
   # no-restricted-imports: off

.gitignore

@@ -1,3 +1,4 @@
+.env
 # lock (Only using yarn.json)
 package-lock.json
 pnpm-lock.yaml

package.json

@@ -1,35 +1,43 @@
 {
   "name": "onechat",
   "private": true,
-  "version": "0.0.1",
+  "version": "1.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "lint": "eslint src/**/*.{js,jsx,ts,tsx}",
     "preview": "vite preview",
-    "build": "tsc && vite build",
-    "prebuild": "npm run lint",
+    "build": "vite build",
     "prettier": "prettier --write \"src/**/*.{js,jsx,ts,tsx,html,json,yml}\""
   },
   "dependencies": {
     "@hookform/resolvers": "^3.3.4",
+    "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-context-menu": "^2.1.5",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-scroll-area": "^1.0.5",
+    "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-toast": "^1.1.5",
+    "@radix-ui/react-tooltip": "^1.0.7",
     "@reduxjs/toolkit": "^2.1.0",
     "@tanstack/react-query": "^5.20.1",
     "axios": "^1.6.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "dayjs": "^1.11.10",
+    "debounce": "^2.0.0",
     "react": "^18.2.0",
-    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
     "react-helmet-async": "^2.0.4",
     "react-hook-form": "^7.50.1",
     "react-redux": "^9.1.0",
     "react-router-dom": "^6.22.0",
-    "react-toastify": "^10.0.4",
     "tailwind-merge": "^2.2.1",
     "zod": "^3.22.4"
   },
@@ -49,11 +57,11 @@
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-security": "^2.1.0",
     "eslint-plugin-unicorn": "^51.0.1",
     "lucide-react": "^0.323.0",
     "postcss": "^8.4.35",
     "prettier": "^3.2.5",
+    "rollup-plugin-visualizer": "^5.12.0",
     "tailwindcss": "^3.4.1",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.3.3",

src/components/AuthForm.tsx

@@ -1,14 +1,18 @@
 import { z } from 'zod';
-import { toast } from 'react-toastify';
+import { Input } from './ui/input';
+import { Button } from './ui/button';
+import { ApiError } from '@/typings';
 import type { AxiosError } from 'axios';
+import { ToastAction } from './ui/toast';
+import { useToast } from './ui/use-toast';
 import { useForm } from 'react-hook-form';
 import { axiosInstance } from '../lib/api';
 import { useCallback, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useMutation } from '@tanstack/react-query';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { AuthenticationProps } from '../pages/Authentication';
-import { Input, Button, Form, FormItem, FormLabel, FormField, FormControl, FormMessage } from '@/components/ui';
+import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from './ui/form';
 
 const formSchema = z.object({
   username: z
@@ -21,6 +25,7 @@ const formSchema = z.object({
 });
 
 export default function AuthorizationForm({ type }: AuthenticationProps) {
+  const { toast } = useToast();
   const [credError, setCredError] = useState<string>('');
   const form = useForm<formSchema>({
     resolver: zodResolver(formSchema),
@@ -43,21 +48,33 @@ export default function AuthorizationForm({ type }: AuthenticationProps) {
       );
       return data;
     },
-    onSuccess: (data: Omit<ApiResponse, 'errors'>) => {
+    onSuccess: (data: ApiResponse) => {
       localStorage.setItem('token', data.content.meta.access_token);
       localStorage.setItem('user', JSON.stringify(data.content.data));
       navigate('/home');
     },
-    onError: (error: AxiosError<Omit<ApiResponse, 'content'>>) => {
+    onError: (error: AxiosError<ApiError<'username' | 'password'>>, { username, password }) => {
       if (error.message === 'Network Error') {
-        toast.error('Network Error!');
+        toast({
+          variant: 'destructive',
+          title: 'Uh oh! Something went wrong.',
+          description: 'There was a problem with your request.',
+          action: (
+            <ToastAction
+              altText="Try again"
+              onClick={() => mutation.mutateAsync({ username, password })}
+              className="rounded-lg hover:bg-red-400 border border-gray-200 p-2"
+            >
+              Try again
+            </ToastAction>
+          )
+        });
         return;
       }
       if (!error.response) return;
       const isRootError = error.response.data.errors.find(err => !err.param);
       if (isRootError) {
-        // TODO: Figure out why the message still contains quotes
-        setCredError(isRootError.message.replaceAll("'", ''));
+        setCredError(isRootError.message);
         return;
       }
       for (const err of error.response.data.errors) {
@@ -118,6 +135,9 @@ export default function AuthorizationForm({ type }: AuthenticationProps) {
                   placeholder="Password"
                   disabled={mutation.isPending}
                   className="bg-zinc-700 border-gray-600 focus:border-blue-700"
+                  onChangeCapture={() => {
+                    if (credError) setCredError('');
+                  }}
                   {...field}
                 />
               </FormControl>
@@ -142,7 +162,6 @@ export default function AuthorizationForm({ type }: AuthenticationProps) {
 }
 
 type formSchema = z.infer<typeof formSchema>;
-// the errors and content fields are mutually exclusive
 type ApiResponse = {
   content: {
     data: {
@@ -155,9 +174,4 @@ type ApiResponse = {
       access_token: string;
     };
   };
-  errors: {
-    param: 'username' | 'password';
-    code: string;
-    message: string;
-  }[];
 };