[front] Add Update Room Page

Kogepan229 · Mar 2, 2024 · d7b510b · d7b510b
1 parent 25ec9dc
commit d7b510b
Show file tree

Hide file tree

Showing 9 changed files with 209 additions and 108 deletions.
diff --git a/next_app/src/app/admin/adminRoomPage.module.scss b/next_app/src/app/admin/adminRoomPage.module.scss
@@ -7,6 +7,10 @@
 
 .info_panel {
   padding: 16px;
+
+  &:hover {
+    background-color: $color-hover-gray;
+  }
 }
 
 .info_panel_name {

diff --git a/next_app/src/app/admin/create/createRoomPage.module.scss b/next_app/src/app/admin/create/createRoomPage.module.scss
diff --git a/next_app/src/app/admin/create/page.tsx b/next_app/src/app/admin/create/page.tsx
@@ -1,93 +1,7 @@
-'use client'
-import { useFormPartText } from 'components/form/FormPartText'
-import Header from 'features/header/Header'
-import css from './createRoomPage.module.scss'
-import { ContentsGridHeader } from 'components/ContentsGridHeader'
-import { useEffect, useState } from 'react'
-import axios from 'axios'
-import PopupWindowMessage from 'components/PopupWindowMessage'
-import { useRouter } from 'next/navigation'
-import SimpleButton from 'components/SimpleButton'
-import { useFormPartSelect } from 'components/form/FormPartSelect'
-
-const createOptions = (): { value: string; name: string }[] => {
-  return [
-    {
-      value: '',
-      name: 'Select Room Type',
-    },
-    {
-      value: 'video',
-      name: 'Video',
-    },
-    {
-      value: 'manga',
-      name: 'Manga',
-    },
-  ]
-}
+import { CreateRoomForm } from 'features/room_admin/components/CreateRoomForm'
 
 const Page = () => {
-  const router = useRouter()
-
-  const [FormPartId, id] = useFormPartText({ title: 'ID', name: 'id' })
-  const [FormPartName, name] = useFormPartText({ title: '名前', name: 'name' })
-  const [FormPartRoomType, roomType] = useFormPartSelect({ title: 'Room Type', name: 'type', options: createOptions() })
-  const [FormPartAccessKey, accessKey] = useFormPartText({ title: 'Access Key', name: 'access_key' })
-
-  const [isEnableSubmit, setIsEnableSubmit] = useState(false)
-  const [isShowCompletePopup, setIsShowCompletePopup] = useState(false)
-
-  useEffect(() => {
-    if (id && name && roomType && accessKey) {
-      setIsEnableSubmit(true)
-    } else {
-      setIsEnableSubmit(false)
-    }
-  }, [id, name, roomType, accessKey])
-
-  const handleSubmit = (e: any) => {
-    e.preventDefault()
-
-    const file = new FormData()
-    file.append('id', id)
-    file.append('name', name)
-    file.append('room_type', roomType)
-    file.append('key', accessKey)
-
-    axios
-      .post(process.env.NEXT_PUBLIC_BACKEND_URL + '/api/rooms', file, {
-        headers: { 'content-type': 'multipart/form-data' },
-      })
-      .then(res => {
-        setIsShowCompletePopup(true)
-      })
-      .catch(err => {
-        console.error(err)
-      })
-  }
-
-  return (
-    <>
-      <Header roomName="Admin" link="/admin/" />
-      <div className={css.form}>
-        <ContentsGridHeader title="新規ルーム作成" />
-        {FormPartId}
-        {FormPartName}
-        {FormPartRoomType}
-        {FormPartAccessKey}
-        <SimpleButton className={css.button_submit} onClick={handleSubmit} disabled={!isEnableSubmit}>
-          作成
-        </SimpleButton>
-      </div>
-      <PopupWindowMessage
-        isShow={isShowCompletePopup}
-        message={'作成しました'}
-        buttonText="戻る"
-        buttonCallback={() => router.push(`/admin`)}
-      />
-    </>
-  )
+  return <CreateRoomForm />
 }
 
 export default Page
diff --git a/next_app/src/app/admin/page.tsx b/next_app/src/app/admin/page.tsx
@@ -22,7 +22,7 @@ type RoomInfo = {
 const getRoomInfo = async (roomId: string): Promise<RoomInfo> => {
   const con = await getDBConnection()
   let [rows, _] = await con.query(
-    `SELECT name, description, room_type, access_key, (SELECT COUNT(*) from contents WHERE room_id=rooms.id) as content_num, (SELECT COUNT(*) from tags WHERE room_id=rooms.id) as tag_num FROM rooms WHERE id=?`,
+    `SELECT id, name, description, room_type, access_key, (SELECT COUNT(*) from contents WHERE room_id=rooms.id) as content_num, (SELECT COUNT(*) from tags WHERE room_id=rooms.id) as tag_num FROM rooms WHERE id=?`,
     [roomId]
   )
   con.end()
@@ -52,12 +52,16 @@ const RoomInfoPanel = async ({ roomId }: { roomId: string }) => {
     )
 
   return (
-    <div className={css.info_panel}>
-      <p className={css.info_panel_name}>{info.name}</p>
-      <p className={css.info_panel_desc}>{info.description}</p>
-      <p>Type: {info.type}</p>
-      <p>Access Key: {info.accessKey}</p>
-      {numbers}
+    <div>
+      <Link href={`/admin/update/${info.id}`}>
+        <div className={css.info_panel}>
+          <p className={css.info_panel_name}>{info.name}</p>
+          <p className={css.info_panel_desc}>{info.description}</p>
+          <p>Type: {info.type}</p>
+          <p>Access Key: {info.accessKey}</p>
+          {numbers}
+        </div>
+      </Link>
     </div>
   )
 }

diff --git a/next_app/src/app/admin/update/[room_id]/page.tsx b/next_app/src/app/admin/update/[room_id]/page.tsx
@@ -0,0 +1,10 @@
+import { UpdateRoomForm } from 'features/room_admin/components/UpdateRoomForm'
+import { getRoomData } from 'features/rooms/utils'
+
+const Page = async ({ params }: { params: { room_id: string } }) => {
+  const roomData = await getRoomData(params.room_id)
+
+  return <UpdateRoomForm roomData={roomData} />
+}
+
+export default Page
diff --git a/next_app/src/components/form/FormParts.module.scss b/next_app/src/components/form/FormParts.module.scss
@@ -1,5 +1,19 @@
 @import 'styles/variables';
 
+.form {
+  width: 100%;
+  max-width: 500px;
+  margin: auto;
+
+  margin-bottom: 50px;
+}
+
+.button_submit {
+  margin-top: 16px;
+  padding-left: 10px !important;
+  padding-right: 10px !important;
+}
+
 .item_header {
   margin-top: 15px;
   padding: 3px 0px;

diff --git a/next_app/src/features/room_admin/components/CreateRoomForm.tsx b/next_app/src/features/room_admin/components/CreateRoomForm.tsx
@@ -0,0 +1,79 @@
+'use client'
+import { useFormPartText } from 'components/form/FormPartText'
+import Header from 'features/header/Header'
+import css from 'components/form/FormParts.module.scss'
+import { ContentsGridHeader } from 'components/ContentsGridHeader'
+import { useEffect, useState } from 'react'
+import axios from 'axios'
+import PopupWindowMessage from 'components/PopupWindowMessage'
+import { useRouter } from 'next/navigation'
+import SimpleButton from 'components/SimpleButton'
+import { useFormPartSelect } from 'components/form/FormPartSelect'
+import { createOptions } from 'features/room_admin/utils'
+import { useFormPartTextArea } from 'components/form/FormPartTextArea'
+
+export const CreateRoomForm = () => {
+  const router = useRouter()
+
+  const [FormPartId, id] = useFormPartText({ title: 'ID', name: 'id' })
+  const [FormPartName, name] = useFormPartText({ title: '名前', name: 'name' })
+  const [FormPartDescription, description] = useFormPartTextArea({ title: '概要', name: 'description' })
+  const [FormPartRoomType, roomType] = useFormPartSelect({ title: 'Room Type', name: 'type', options: createOptions() })
+  const [FormPartAccessKey, accessKey] = useFormPartText({ title: 'Access Key', name: 'access_key' })
+
+  const [isEnableSubmit, setIsEnableSubmit] = useState(false)
+  const [isShowCompletePopup, setIsShowCompletePopup] = useState(false)
+
+  useEffect(() => {
+    if (id && name && roomType && accessKey) {
+      setIsEnableSubmit(true)
+    } else {
+      setIsEnableSubmit(false)
+    }
+  }, [id, name, roomType, accessKey])
+
+  const handleSubmit = (e: any) => {
+    e.preventDefault()
+
+    const file = new FormData()
+    file.append('id', id)
+    file.append('name', name)
+    file.append('description', description)
+    file.append('room_type', roomType)
+    file.append('key', accessKey)
+
+    axios
+      .post(process.env.NEXT_PUBLIC_BACKEND_URL + '/api/rooms', file, {
+        headers: { 'content-type': 'multipart/form-data' },
+      })
+      .then(res => {
+        setIsShowCompletePopup(true)
+      })
+      .catch(err => {
+        console.error(err)
+      })
+  }
+
+  return (
+    <>
+      <Header roomName="Admin" link="/admin/" />
+      <div className={css.form}>
+        <ContentsGridHeader title="新規ルーム作成" />
+        {FormPartId}
+        {FormPartName}
+        {FormPartDescription}
+        {FormPartRoomType}
+        {FormPartAccessKey}
+        <SimpleButton className={css.button_submit} onClick={handleSubmit} disabled={!isEnableSubmit}>
+          作成
+        </SimpleButton>
+      </div>
+      <PopupWindowMessage
+        isShow={isShowCompletePopup}
+        message={'作成しました'}
+        buttonText="戻る"
+        buttonCallback={() => router.push(`/admin`)}
+      />
+    </>
+  )
+}
diff --git a/next_app/src/features/room_admin/components/UpdateRoomForm.tsx b/next_app/src/features/room_admin/components/UpdateRoomForm.tsx
@@ -0,0 +1,73 @@
+'use client'
+import { useFormPartText } from 'components/form/FormPartText'
+import Header from 'features/header/Header'
+import css from 'components/form/FormParts.module.scss'
+import { ContentsGridHeader } from 'components/ContentsGridHeader'
+import { useEffect, useState } from 'react'
+import axios from 'axios'
+import PopupWindowMessage from 'components/PopupWindowMessage'
+import { useRouter } from 'next/navigation'
+import SimpleButton from 'components/SimpleButton'
+import { RoomData } from 'features/rooms/types'
+import { useFormPartTextArea } from 'components/form/FormPartTextArea'
+
+export const UpdateRoomForm = ({ roomData }: { roomData: RoomData }) => {
+  const router = useRouter()
+
+  const [FormPartName, name] = useFormPartText({ title: '名前', name: 'name', initial: roomData.name })
+  const [FormPartDescription, description] = useFormPartTextArea({ title: '概要', name: 'description', initial: roomData.description })
+  const [FormPartAccessKey, accessKey] = useFormPartText({ title: 'Access Key', name: 'access_key', initial: roomData.accessKey })
+
+  const [isEnableSubmit, setIsEnableSubmit] = useState(false)
+  const [isShowCompletePopup, setIsShowCompletePopup] = useState(false)
+
+  useEffect(() => {
+    if (name && accessKey) {
+      setIsEnableSubmit(true)
+    } else {
+      setIsEnableSubmit(false)
+    }
+  }, [name, accessKey])
+
+  const handleSubmit = (e: any) => {
+    e.preventDefault()
+
+    const file = new FormData()
+    file.append('id', roomData.id)
+    file.append('name', name)
+    file.append('description', description)
+    file.append('key', accessKey)
+
+    axios
+      .put(process.env.NEXT_PUBLIC_BACKEND_URL + '/api/rooms', file, {
+        headers: { 'content-type': 'multipart/form-data' },
+      })
+      .then(res => {
+        setIsShowCompletePopup(true)
+      })
+      .catch(err => {
+        console.error(err)
+      })
+  }
+
+  return (
+    <>
+      <Header roomName="Admin" link="/admin/" />
+      <div className={css.form}>
+        <ContentsGridHeader title="ルーム情報更新" />
+        {FormPartName}
+        {FormPartDescription}
+        {FormPartAccessKey}
+        <SimpleButton className={css.button_submit} onClick={handleSubmit} disabled={!isEnableSubmit}>
+          更新
+        </SimpleButton>
+      </div>
+      <PopupWindowMessage
+        isShow={isShowCompletePopup}
+        message={'更新しました'}
+        buttonText="戻る"
+        buttonCallback={() => router.push(`/admin`)}
+      />
+    </>
+  )
+}
diff --git a/next_app/src/features/room_admin/utils.ts b/next_app/src/features/room_admin/utils.ts
@@ -0,0 +1,16 @@
+export const createOptions = (): { value: string; name: string }[] => {
+  return [
+    {
+      value: '',
+      name: 'Select Room Type',
+    },
+    {
+      value: 'video',
+      name: 'Video',
+    },
+    {
+      value: 'manga',
+      name: 'Manga',
+    },
+  ]
+}