From 1941192d2f55f7f5902174869c3777206698ba5f Mon Sep 17 00:00:00 2001
From: 2018007956 <bbmt1906@hanyang.ac.kr>
Date: Tue, 8 Oct 2024 14:34:23 +0900
Subject: [PATCH] feat: modify sub's description

#66
---
 client/src/components/Sidebar.tsx | 52 +++++++++++++++++++++++++++++--
 server/src/routes/subs.ts         | 18 +++++++++++
 2 files changed, 68 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx
index b7f66c8..ba92e61 100644
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { useAuthState } from '../context/auth'
 import { Sub } from '../types'
 import Link from 'next/link'
@@ -14,6 +14,8 @@ type Props = {
 const Sidebar = ({ sub }: Props) => {
     const { authenticated, user } = useAuthState();
     const router = useRouter();
+    const [isEditing, setIsEditing] = useState(false);
+    const [editedDescription, setEditedDescription] = useState(sub?.description);
 
     const deleteSub = async () => {
         if (confirm("Are you sure you want to delete this?")) {
@@ -27,11 +29,57 @@ const Sidebar = ({ sub }: Props) => {
         }
     };
 
+    const handleEdit = async () => {
+        try {
+            const { data } = await axios.put(`/subs/${sub.name}`, { 
+                description: editedDescription 
+            });
+            
+            mutate(`/subs/${sub.name}`, { ...sub, description: data.description }, false);
+            
+            setIsEditing(false);
+        } catch (error) {
+            console.log(error);
+        }
+    };
+
     return (
     <div className='sidebar hidden w-4/12 ml-3 md:block'>
             <div className='bg-gray-100 border rounded'>
                 <div className='p-3'>
-                    <p className='mb-1 text-base'>{sub?.description}</p>
+                    <div className='flex items-center mb-1'>
+                        {isEditing ? (
+                            <>
+                                <input
+                                    type="text"
+                                    value={editedDescription}
+                                    onChange={(e) => setEditedDescription(e.target.value)}
+                                    className="flex-grow p-1 text-base border rounded"
+                                />
+                                <button onClick={handleEdit} className="ml-2 text-green-500">
+                                    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                                        <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                                    </svg>
+                                </button>
+                                <button onClick={() => setIsEditing(false)} className="ml-2 text-red-500">
+                                    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                                        <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
+                                    </svg>
+                                </button>
+                            </>
+                        ) : (
+                            <>
+                                <p className='flex-grow text-base'>{sub?.description}</p>
+                                {user && user.username === sub.username && (
+                                    <button onClick={() => setIsEditing(true)} className="ml-2 text-gray-500">
+                                        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                                            <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
+                                        </svg>
+                                    </button>
+                                )}
+                            </>
+                        )}
+                    </div>
                     <div className='flex mb-3 text-sm font-medium'>
                         <div className='w-1/2'>
                             <p>100</p>
diff --git a/server/src/routes/subs.ts b/server/src/routes/subs.ts
index 63085b9..c36e0ab 100644
--- a/server/src/routes/subs.ts
+++ b/server/src/routes/subs.ts
@@ -147,6 +147,23 @@ const deleteSub = async (req: Request, res: Response) => {
     }
 };
 
+const updateSub = async (req: Request, res: Response) => {
+    const { description } = req.body;
+    const name = req.params.name;
+
+    try {
+        const sub = await Sub.findOneOrFail({ 
+            where: { name },
+        });
+        sub.description = description;
+        await sub.save();
+        return res.json(sub);
+    } catch (error) {
+        console.log(error);
+        return res.status(500).json({ error: "Something went wrong" });
+    }
+};
+
 const topSubs = async (_: Request, res: Response) => {
     try {
         const imageUrlExp = `COALESCE('${process.env.APP_URL}/images/' || s."imageUrn", 
@@ -251,6 +268,7 @@ const router = Router();
 router.get("/:name", userMiddleware, getSub);
 router.post("/", userMiddleware, authMiddleware, createSub);
 router.delete("/:name", userMiddleware, authMiddleware, deleteSub)
+router.put("/:name", userMiddleware, authMiddleware, updateSub)
 router.get("/sub/topSubs", topSubs);
 router.post("/:name/upload", userMiddleware, authMiddleware, ownSub, upload.single("file"), uploadSubImage);
 export default router;
\ No newline at end of file