diff --git a/src/api/apiUtils.ts b/src/api/apiUtils.ts index 661873e..c463a17 100644 --- a/src/api/apiUtils.ts +++ b/src/api/apiUtils.ts @@ -40,6 +40,7 @@ api.interceptors.response.use( } } catch (error) { console.error('トークンの有効期限が切れました。'); + window.location.href = '/intro'; } } return Promise.reject(error); diff --git a/src/api/classUser/getClassInfo.ts b/src/api/classUser/getClassInfo.ts new file mode 100644 index 0000000..e9248bd --- /dev/null +++ b/src/api/classUser/getClassInfo.ts @@ -0,0 +1,10 @@ +import req from '../apiUtils'; + +const getClassInfo = async (uId: number, cId: number) => { + const response = await req(`/cu/${uId}/${cId}/info`, 'get', 'gin'); + console.log(response); + + return response.data; +}; + +export default getClassInfo; diff --git a/src/api/prompts/postPrompt.ts b/src/api/prompts/postPrompt.ts index 305af6b..c4cf3e3 100644 --- a/src/api/prompts/postPrompt.ts +++ b/src/api/prompts/postPrompt.ts @@ -4,18 +4,19 @@ const postPrompt = async ( message: string, chat: (reader: ReadableStreamDefaultReader) => void ) => { + const token = localStorage.getItem('access_token'); + console.log('token:', token); const body = { message: message, }; + console.log('body:', body); try { const response = await fetch( `http://3.38.86.236:3000/api/nest/class/${cId}/prompts/${id}`, { method: 'POST', headers: { - Authorization: - 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJpZCI6MiwiZXhwIjoxOTY5OTAxMDIyfQ.U0k1q2oTrp3JwsIpem16o2W77tpVGiwylwc5cTFaZgU', - 'Content-Type': 'application/json', + Authorization: `Bearer ${token}`, }, body: JSON.stringify(body), } diff --git a/src/app/[className]/[materialName]/components/subComponents/PromptChat.tsx b/src/app/[className]/[materialName]/components/subComponents/PromptChat.tsx index 5c5d9b4..7308032 100644 --- a/src/app/[className]/[materialName]/components/subComponents/PromptChat.tsx +++ b/src/app/[className]/[materialName]/components/subComponents/PromptChat.tsx @@ -16,14 +16,14 @@ const PromptChat = () => { const [reload, setReload] = useState(false); useEffect(() => { - getPrompt(1, 1, 1, 6).then(res => { + getPrompt(4, 126, 1, 6).then(res => { res.messages.reverse(); setMsg(res.messages); }); }, [reload]); const handleClickIcon = (mId: number) => { - patchMessage(1, 1, mId, true).then(res => { + patchMessage(4, 126, mId, true).then(res => { console.log(res); }); }; @@ -56,8 +56,7 @@ const PromptChat = () => { useEffect(() => { if (inputMsg === '') return; - postPrompt(1, 1, inputMsg, chat).then(res => { - console.log(res); + postPrompt(4, 126, inputMsg, chat).then(() => { setInputMsg(''); }); }, [inputMsg]); diff --git a/src/app/[className]/[materialName]/components/subComponents/Storage.tsx b/src/app/[className]/[materialName]/components/subComponents/Storage.tsx index cec3ae7..c2c97b5 100644 --- a/src/app/[className]/[materialName]/components/subComponents/Storage.tsx +++ b/src/app/[className]/[materialName]/components/subComponents/Storage.tsx @@ -14,7 +14,7 @@ const Storage = () => { useEffect(() => { // コメントを取得する処理 - getMessage(1, 1, 1, 5).then(res => { + getMessage(4, 126, 1, 5).then(res => { console.log(res); setMsg(res); setIsOpen(new Array(res.length).fill(false)); // コメントの開閉状態を初期化 diff --git a/src/app/intro/googleLogin/page.tsx b/src/app/intro/googleLogin/page.tsx index c88bdf3..ab1761a 100644 --- a/src/app/intro/googleLogin/page.tsx +++ b/src/app/intro/googleLogin/page.tsx @@ -17,7 +17,6 @@ const Page = () => { const setRefreshToken = useSetRecoilState(refreshTokenState); const router = useRouter(); useEffect(() => { - console.log(code); if (code) { postGoogleLogin(code).then(res => { if (res.user) { diff --git a/src/app/layout.tsx b/src/app/layout.tsx index ebff2b8..5e5b4d7 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -2,7 +2,6 @@ import type {Metadata} from 'next'; import {Inter} from 'next/font/google'; import {Navbar} from '../components/navbar'; import {Footer} from '../components/footer'; -import Protect from '../components/protect'; import RecoilRootContainer from '../components/RecoilRootContainer'; import './globals.css'; import '@/src/styles/variable.css'; @@ -19,15 +18,13 @@ const RootLayout = ({children}: {children: React.ReactNode}) => { - -
- -
-
{children}
-
-
+
+ +
+
{children}
+
- +
diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx index 9805cf0..a3b4e6f 100644 --- a/src/components/navbar/Navbar.tsx +++ b/src/components/navbar/Navbar.tsx @@ -2,17 +2,13 @@ import {useState} from 'react'; import Image from 'next/image'; import Link from 'next/link'; -import {useParams, usePathname} from 'next/navigation'; -import {useRecoilValue} from 'recoil'; -import userState from '@/src/recoil/atoms/userState'; +import {useParams, usePathname, useSearchParams} from 'next/navigation'; import {MaterialContainer, MaterialForm} from './material'; import Profile from './profile'; -import {User} from '@/src/interfaces/user'; import icons from '@/public/svgs/navbar'; import '@/src/styles/variable.css'; const Navbar = () => { - const user = useRecoilValue(userState) as User; const [isOpen, setIsOpen] = useState(false); const pages = [ @@ -24,6 +20,8 @@ const Navbar = () => { const router = usePathname(); const params = useParams<{className: string; materialName: string}>(); + const searchParams = useSearchParams(); + const search = searchParams.get('id'); if (router === '/intro' || router === '/intro/googleLogin') { return null; @@ -33,7 +31,7 @@ const Navbar = () => {
{/* Profile */} - +
@@ -82,7 +80,7 @@ const Navbar = () => {
{isOpen ? : null}
- +
diff --git a/src/components/navbar/material/MaterialContainer.tsx b/src/components/navbar/material/MaterialContainer.tsx index e73467a..f7dce35 100644 --- a/src/components/navbar/material/MaterialContainer.tsx +++ b/src/components/navbar/material/MaterialContainer.tsx @@ -7,7 +7,13 @@ import searchMaterial from '@/src/api/material/searchMaterial'; import {Material, ParamsProps} from '@/src/interfaces/navbar'; import icons from '@/public/svgs/navbar'; -const MaterialContainer = ({params}: {params: ParamsProps}) => { +const MaterialContainer = ({ + params, + cId, +}: { + params: ParamsProps; + cId: string | null; +}) => { const [materials, setMaterials] = useState([]); const [searchMaterials, setSearchMaterials] = useState([]); const [keyWord, setKeyWord] = useState(''); @@ -16,7 +22,7 @@ const MaterialContainer = ({params}: {params: ParamsProps}) => { const onLoadMore = () => { setHasMore(false); - getMaterial(1, boardPage, 8).then(res => { + getMaterial(4, boardPage, 8).then(res => { if (res.length === 0) { setHasMore(false); } else { @@ -85,9 +91,13 @@ const MaterialContainer = ({params}: {params: ParamsProps}) => { > {materials ? ( keyWord ? ( - + ) : ( - + ) ) : null} diff --git a/src/components/navbar/material/MaterialForm.tsx b/src/components/navbar/material/MaterialForm.tsx index ebb9ffa..499cbd5 100644 --- a/src/components/navbar/material/MaterialForm.tsx +++ b/src/components/navbar/material/MaterialForm.tsx @@ -1,14 +1,20 @@ -import {ChangeEvent, useRef, useState} from 'react'; +import {ChangeEvent, useEffect, useRef, useState} from 'react'; import Image from 'next/image'; import postMaterial from '@/src/api/material/postMaterial'; import {FormProps} from '@/src/interfaces/navbar'; import icons from '@/public/svgs/navbar/prompt'; -const MaterialForm = ({setIsOpen}: FormProps) => { +const MaterialForm = ({setIsOpen, editData}: FormProps) => { const inputRef = useRef(null); const [materialName, setMaterialName] = useState(''); const [material, setMaterial] = useState(); + useEffect(() => { + if (editData) { + console.log(editData); + } + }, []); + const handleEnterName = (e: ChangeEvent) => { setMaterialName(e.target.value); }; @@ -28,7 +34,7 @@ const MaterialForm = ({setIsOpen}: FormProps) => { const handleClickButton = () => { console.log(material, materialName); if (material && materialName) { - postMaterial(1, materialName, material); + postMaterial(4, materialName, material); } }; diff --git a/src/components/navbar/material/MaterialList.tsx b/src/components/navbar/material/MaterialList.tsx index c8fc3cb..4922cc7 100644 --- a/src/components/navbar/material/MaterialList.tsx +++ b/src/components/navbar/material/MaterialList.tsx @@ -10,16 +10,19 @@ import icons from '@/public/svgs/navbar'; const MaterialList = ({ materials, params, + cId, }: { materials: Material[]; params: ParamsProps; + cId: string | null; }) => { const [isToggleOpen, setIsToggleOpen] = useState([]); const [isOpen, setIsOpen] = useState(false); + const [editData, setEditData] = useState(); const handleClickSubject = (mId: number) => { - if (materials[mId] && materials[mId].prompts.length === 0) { - postPromptAccess(1, mId); + if (materials[mId] && materials[mId].prompts.length === 0 && cId) { + postPromptAccess(parseInt(cId), mId); } }; @@ -70,6 +73,7 @@ const MaterialList = ({
{ + setEditData(material); setIsOpen(true); setIsToggleOpen(prev => prev.map(() => false)); }} @@ -89,7 +93,9 @@ const MaterialList = ({ ); })} - {isOpen ? : null} + {isOpen ? ( + + ) : null}
); diff --git a/src/components/navbar/profile/Profile.tsx b/src/components/navbar/profile/Profile.tsx index 0e4f341..cf370a0 100644 --- a/src/components/navbar/profile/Profile.tsx +++ b/src/components/navbar/profile/Profile.tsx @@ -1,20 +1,37 @@ -import {useState} from 'react'; +import {useEffect, useState} from 'react'; import Image from 'next/image'; import {useRouter} from 'next/navigation'; +import {useRecoilState, useRecoilValue} from 'recoil'; import EditName from './EditName'; import Warning from '../../warning/Warning'; +import getClassInfo from '@/src/api/classUser/getClassInfo'; import putUserName from '@/src/api/classUser/putUserName'; +import classUserState from '@/src/recoil/atoms/classUserState'; +import userState from '@/src/recoil/atoms/userState'; import {ParamsProps} from '@/src/interfaces/navbar'; -import {User} from '@/src/interfaces/user'; -import ClassUser from '@/src/model/User'; import icons from '@/public/svgs/navbar'; +import ROLES from '@/src/constants/roles'; -const Profile = ({user, params}: {user: User; params: ParamsProps}) => { +const Profile = ({cId, params}: {cId: string | null; params: ParamsProps}) => { const router = useRouter(); + const user = useRecoilValue(userState); + const [classUser, setClassUser] = useRecoilState(classUserState); const [dropdownOpen, setDropdownOpen] = useState(false); const [isEditOpen, setIsEditOpen] = useState(false); const [isOpen, setIsOpen] = useState(false); + useEffect(() => { + if (cId && !classUser) { + getClassInfo(user.id, parseInt(cId)).then(res => { + console.log(res); + setClassUser(res); + }); + } + if (!params.className) { + setClassUser(null); + } + }, [cId, classUser, params]); + const toggleDropdown = () => { setDropdownOpen(!dropdownOpen); console.log(params); @@ -22,7 +39,7 @@ const Profile = ({user, params}: {user: User; params: ParamsProps}) => { const handleEditName = (name: string) => { setDropdownOpen(false); - putUserName(user.id, 4, name); + if (classUser) putUserName(classUser.uid, 4, name); }; const handleClickDelete = () => { @@ -38,14 +55,16 @@ const Profile = ({user, params}: {user: User; params: ParamsProps}) => {
userImage -
{user.name}
+
+ {classUser ? classUser.nickname : user ? user.name : ''} +
{dropdownOpen && (
    -
  • { - setIsEditOpen(true); - setDropdownOpen(false); - }} - > - Edit Name -
    • - {ClassUser.managerRoll === 'manager' ? ( -
  • { - setIsOpen(true); - setDropdownOpen(false); - }} - > - Edit group -
    • + {classUser ? ( + <> +
  • { + setIsEditOpen(true); + setDropdownOpen(false); + }} + > + Edit Name +
    • + {ROLES[classUser.role_id] === 'ADMIN' ? ( +
  • { + setIsOpen(true); + setDropdownOpen(false); + }} + > + Edit group +
    • + ) : null} +
  • { + setIsOpen(true); + setDropdownOpen(false); + }} + > + {ROLES[classUser.role_id] === 'ADMIN' + ? 'Delete group' + : 'Leave group'} +
    • + ) : null} -
  • { - setIsOpen(true); - setDropdownOpen(false); - }} - > - {ClassUser.managerRoll === 'manager' - ? 'Delete group' - : 'Leave group'} -
  • Logout
    • diff --git a/src/components/protect/Protect.tsx b/src/components/protect/Protect.tsx deleted file mode 100644 index a7a7516..0000000 --- a/src/components/protect/Protect.tsx +++ /dev/null @@ -1,20 +0,0 @@ -'use client'; -import {ReactNode, useEffect} from 'react'; -import {useRouter} from 'next/navigation'; -import {useRecoilValue} from 'recoil'; -import userState from '@/src/recoil/atoms/userState'; - -const Protect = ({children}: {children: ReactNode}) => { - const user = useRecoilValue(userState); - const router = useRouter(); - - useEffect(() => { - if (!user) { - router.push('/intro'); - } - }, [user, router]); - - return children; -}; - -export default Protect; diff --git a/src/components/protect/index.ts b/src/components/protect/index.ts deleted file mode 100644 index 601a5c7..0000000 --- a/src/components/protect/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import Protect from './Protect'; - -export default Protect; diff --git a/src/constants/roles.ts b/src/constants/roles.ts new file mode 100644 index 0000000..55e4b06 --- /dev/null +++ b/src/constants/roles.ts @@ -0,0 +1,10 @@ +const ROLES: {[key: number]: string} = { + 1: 'USER', + 2: 'ADMIN', + 3: 'ASSISTANT', + 4: 'APPLICANT', + 5: 'BLACKLIST', + 6: 'INVITE', +}; + +export default ROLES; diff --git a/src/interfaces/user/ClassUser.ts b/src/interfaces/user/ClassUser.ts new file mode 100644 index 0000000..12fa115 --- /dev/null +++ b/src/interfaces/user/ClassUser.ts @@ -0,0 +1,8 @@ +interface ClassUser { + uid: number; + nickname: string; + role_id: number; + image: string; +} + +export default ClassUser; diff --git a/src/interfaces/user/index.ts b/src/interfaces/user/index.ts index 0b514a2..ad8a1c6 100644 --- a/src/interfaces/user/index.ts +++ b/src/interfaces/user/index.ts @@ -2,5 +2,6 @@ import User from './User'; import LoginData from './LoginData'; import AccessToken from './AccessToken'; import RefreshToken from './RefreshToken'; +import ClassUser from './ClassUser'; -export type {User, LoginData, AccessToken, RefreshToken}; +export type {User, LoginData, AccessToken, RefreshToken, ClassUser}; diff --git a/src/recoil/atoms/classUserState.ts b/src/recoil/atoms/classUserState.ts new file mode 100644 index 0000000..fc7c928 --- /dev/null +++ b/src/recoil/atoms/classUserState.ts @@ -0,0 +1,13 @@ +import {atom} from 'recoil'; +import {ClassUser} from '@/src/interfaces/user'; +import {recoilPersist} from 'recoil-persist'; + +const {persistAtom} = recoilPersist(); + +const classUserState = atom({ + key: 'classUserState', + default: null, + effects_UNSTABLE: [persistAtom], +}); + +export default classUserState; diff --git a/src/recoil/atoms/userState.ts b/src/recoil/atoms/userState.ts index 77ccac8..a71d3be 100644 --- a/src/recoil/atoms/userState.ts +++ b/src/recoil/atoms/userState.ts @@ -4,9 +4,13 @@ import {recoilPersist} from 'recoil-persist'; const {persistAtom} = recoilPersist(); -const userState = atom({ +const userState = atom({ key: 'userState', - default: null, + default: { + id: 0, + name: '', + image: '', + }, effects_UNSTABLE: [persistAtom], });