User bio (#1010)

* Created initial profileBio

* Started on bio editor

* made the frame for bio editor

* Create user_bio type and add api calls for user bio

* Create user_bio type and added it to user type. Added api calls for user bio. Created hooks.

* Refactor: Changed the gui in edit bio

* Refactor: Fixed User bio editor

* format

* Enable partial updates

* format

* finished

---------

Co-authored-by: Ester2109 <126612066+Ester2109@users.noreply.github.com>
Co-authored-by: Harry Linrui XU <xulr0820@hotmail.com>

package.json

@@ -12,6 +12,7 @@
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
+    "@hookform/resolvers": "^3.3.4",
     "@mui/icons-material": "^5.14.8",
     "@mui/lab": "^5.0.0-alpha.60",
     "@mui/material": "^5.14.9",
@@ -52,7 +53,7 @@
     "react-dropzone": "^14.2.1",
     "react-easy-crop": "^5.0.1",
     "react-helmet": "^6.1.0",
-    "react-hook-form": "^7.31.1",
+    "react-hook-form": "^7.51.2",
     "react-linkify": "^1.0.0-alpha",
     "react-markdown": "^8.0.0",
     "react-palette": "^1.0.2",
@@ -63,7 +64,8 @@
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
     "tss-react": "^4.9.0",
-    "universal-cookie": "^6.1.0"
+    "universal-cookie": "^6.1.0",
+    "zod": "^3.22.4"
   },
   "scripts": {
     "start": "vite --host",

src/api/api.tsx

@@ -59,6 +59,8 @@ import {
   StrikeList,
   Submission,
   User,
+  UserBio,
+  UserBioCreate,
   UserCreate,
   UserNotificationSetting,
   UserNotificationSettingChoice,
@@ -106,6 +108,7 @@ export const USERS_ENDPOINT = 'users';
 export const WARNINGS_ENDPOINT = 'warnings';
 export const PAYMENT_ENDPOINT = 'payments';
 export const EMOJI_ENDPOINT = 'emojis';
+export const BIO_ENDPOINT = 'user-bios/';
 
 export default {
   // Auth
@@ -385,4 +388,10 @@ export default {
 
   // File-upload
   uploadFile: (file: File | Blob) => IFetch<FileUploadResponse>({ method: 'POST', url: 'upload/', file }),
+
+  // User bio
+  createUserBio: (data: UserBioCreate) => IFetch<UserBio>({ method: 'POST', url: `${BIO_ENDPOINT}`, data }),
+  updateUserBio: (id: UserBio['id'], data: Partial<UserBio>) => IFetch<UserBio>({ method: 'PUT', url: `${BIO_ENDPOINT}${id}/`, data }),
+  deleteUserBio: (id: UserBio['id']) => IFetch<UserBio>({ method: 'DELETE', url: `${BIO_ENDPOINT}${id}/` }),
+  getUserBio: (id: UserBio['id'] | null) => IFetch<UserBio>({ method: 'GET', url: `${BIO_ENDPOINT}${id}/` }),
 };