diff --git a/view/next-project/src/components/layout/MainLayout/MainLayout.tsx b/view/next-project/src/components/layout/MainLayout/MainLayout.tsx index 97582195d..4a611f462 100644 --- a/view/next-project/src/components/layout/MainLayout/MainLayout.tsx +++ b/view/next-project/src/components/layout/MainLayout/MainLayout.tsx @@ -4,10 +4,11 @@ import { useRouter } from 'next/router'; import React, { useEffect, useState } from 'react'; import { useRecoilState } from 'recoil'; import s from './MainLayout.module.css'; - -import { authAtom } from '@/store/atoms'; +import { authAtom, userAtom } from '@/store/atoms'; import 'tailwindcss/tailwind.css'; import { Header, SideNav } from '@components/common'; +import { User } from '@type/common'; +import { get_with_token_valid } from '@utils/api/api_methods'; interface LayoutProps { children?: React.ReactNode; @@ -15,19 +16,34 @@ interface LayoutProps { export default function MainLayout(props: LayoutProps) { const router = useRouter(); - const [auth] = useRecoilState(authAtom); + const [auth, setAuth] = useRecoilState(authAtom); + const [_, setUser] = useRecoilState(userAtom); const [isSideNavOpen, setIsSideNavOpen] = useState(true); useEffect(() => { - if (router.isReady) { - if (!auth.isSignIn) { - router.push('/'); + const getCurrentUserUrl = process.env.CSR_API_URI + '/current_user'; + get_with_token_valid(getCurrentUserUrl, auth.accessToken).then((result) => { + if (!result) { localStorage.clear(); - } else if (auth.isSignIn === true && router.pathname == '/') { - router.push('/purchaseorders'); + const authData = { + isSignIn: false, + accessToken: '', + }; + setAuth(authData); + setUser({} as User); + router.push('/'); + } else { + if (router.isReady) { + if (!auth.isSignIn) { + router.push('/'); + localStorage.clear(); + } else if (auth.isSignIn === true && router.pathname == '/') { + router.push('/purchaseorders'); + } + } } - } - }, [router, auth]); + }); + }, [router]); return ( <> diff --git a/view/next-project/src/pages/budgets/index.tsx b/view/next-project/src/pages/budgets/index.tsx index f27bc195c..7fe08150e 100644 --- a/view/next-project/src/pages/budgets/index.tsx +++ b/view/next-project/src/pages/budgets/index.tsx @@ -1,7 +1,7 @@ import { Tabs, TabList, TabPanels, Tab, TabPanel } from '@chakra-ui/react'; import clsx from 'clsx'; import Head from 'next/head'; -import { useState, useEffect, useMemo } from 'react'; +import { useState, useEffect } from 'react'; import { RiAddCircleLine } from 'react-icons/ri'; import { useRecoilValue } from 'recoil'; @@ -9,8 +9,7 @@ import OpenExpenditureAddModalButton from '@/components/budgets/OpenExpenditureA import OpenExpenseAddModalButton from '@/components/budgets/OpenExpenseAddModalButton'; import OpenExpenseDeleteModalButton from '@/components/budgets/OpenExpenseDeleteModalButton'; import OpenExpenseEditModalButton from '@/components/budgets/OpenExpenseEditModalButton'; -import { authAtom } from '@/store/atoms'; -import { getCurrentUser } from '@/utils/api/currentUser'; +import { userAtom } from '@/store/atoms'; import { get } from '@api/api_methods'; import DetailModal from '@components/budgets/DetailModal'; import OpenAddModalButton from '@components/budgets/OpenAddModalButton'; @@ -58,25 +57,16 @@ export async function getServerSideProps() { export default function BudgetList(props: Props) { const { budgets, sources, years, expenses } = props; - const auth = useRecoilValue(authAtom); + const user = useRecoilValue(userAtom); const [currentUser, setCurrentUser] = useState(); const [budgetViews, setBudgetViews] = useState(props.budgets); const [expenseViews, setExpenseViews] = useState(props.expenses); useEffect(() => { - const getUser = async () => { - const res = await getCurrentUser(auth); - setCurrentUser(res); - }; - getUser(); - }, [auth]); + setCurrentUser(user); + }, []); - const isDisabled = useMemo(() => { - if (currentUser) { - return !(currentUser.roleID === 2 || currentUser.roleID === 3); - } - return true; - }, [currentUser]); + const isDisabled = !(currentUser?.roleID === 2 || currentUser?.roleID === 3); const [forcusExpense, setForcusExpense] = useState(null); const [isOpen, setIsOpen] = useState(false); diff --git a/view/next-project/src/pages/fund_informations/index.tsx b/view/next-project/src/pages/fund_informations/index.tsx index 475520cfa..9f82d5f0b 100644 --- a/view/next-project/src/pages/fund_informations/index.tsx +++ b/view/next-project/src/pages/fund_informations/index.tsx @@ -1,11 +1,9 @@ import clsx from 'clsx'; import Head from 'next/head'; -import { useEffect, useCallback, useState, useMemo } from 'react'; +import { useEffect, useState, useMemo } from 'react'; import { useRecoilValue } from 'recoil'; - -import { authAtom } from '@/store/atoms'; +import { userAtom } from '@/store/atoms'; import { get } from '@api/api_methods'; -import { getCurrentUser } from '@api/currentUser'; import { put } from '@api/fundInformations'; import { Title, Card } from '@components/common'; import { Checkbox } from '@components/common'; @@ -67,9 +65,13 @@ export default function FundInformations(props: Props) { const teachers: Teacher[] = props.teachers; const users: User[] = props.users; const departments: Department[] = props.departments; - const auth = useRecoilValue(authAtom); + const user = useRecoilValue(userAtom); const [currentUser, setCurrentUser] = useState(); + useEffect(() => { + setCurrentUser(user); + }, []); + // 募金一覧 const [fundInformationViews, setFundInformationViews] = useState( props.fundInformationView, @@ -97,53 +99,18 @@ export default function FundInformations(props: Props) { const [isFirstChecks, setIsFirstChecks] = useState([]); const [isLastChecks, setIsLastChecks] = useState([]); - const isDeveloper = useMemo(() => { - if (currentUser?.roleID == 2) { - return true; - } else { - return false; - } - }, [currentUser?.roleID]); - - const isFinanceDirector = useMemo(() => { - if (currentUser?.roleID == 3) { - return true; - } else { - return false; - } - }, [currentUser?.roleID]); - - const isFinanceStaff = useMemo(() => { - if (currentUser?.bureauID == 3 || currentUser?.bureauID == 4) { - return true; - } else { - return false; - } - }, [currentUser?.bureauID]); - - const isDisabled = useCallback( - (fundViewItem: FundInformationView) => { - if ( - fundViewItem.fundInformation.userID == currentUser?.id || - isDeveloper || - isFinanceStaff || - isFinanceDirector - ) { - return false; - } else { - return true; - } - }, - [currentUser?.id, isDeveloper, isFinanceStaff, isFinanceDirector], - ); + const isDeveloper = currentUser?.roleID == 2; + const isFinanceDirector = currentUser?.roleID == 3; + const isFinanceStaff = currentUser?.bureauID == 3 || currentUser?.bureauID == 4; - useEffect(() => { - const getUser = async () => { - const res = await getCurrentUser(auth); - setCurrentUser(res); - }; - getUser(); - }, []); + const isDisabled = (fundViewItem: FundInformationView) => { + return !( + fundViewItem.fundInformation.userID == currentUser?.id || + isDeveloper || + isFinanceStaff || + isFinanceDirector + ); + }; useEffect(() => { if (fundInformationViews) { diff --git a/view/next-project/src/pages/purchaseorders/index.tsx b/view/next-project/src/pages/purchaseorders/index.tsx index 3030cf2d0..f6e0909d0 100644 --- a/view/next-project/src/pages/purchaseorders/index.tsx +++ b/view/next-project/src/pages/purchaseorders/index.tsx @@ -2,12 +2,11 @@ import Head from 'next/head'; import { useCallback, useEffect, useState, useMemo } from 'react'; import { useRecoilValue } from 'recoil'; import PrimaryButton from '@/components/common/OutlinePrimaryButton/OutlinePrimaryButton'; -import { authAtom } from '@/store/atoms'; +import { userAtom } from '@/store/atoms'; import { put } from '@/utils/api/purchaseOrder'; import { createPurchaseOrdersCsv } from '@/utils/createPurchaseOrdersCsv'; import { downloadFile } from '@/utils/downloadFile'; import { get } from '@api/api_methods'; -import { getCurrentUser } from '@api/currentUser'; import { Card, Checkbox, Title, BureauLabel } from '@components/common'; import MainLayout from '@components/layout/MainLayout'; import DetailModal from '@components/purchaseorders/DetailModal'; @@ -67,7 +66,7 @@ const formatYYYYMMDD = (date: Date) => { }; export default function PurchaseOrders(props: Props) { - const auth = useRecoilValue(authAtom); + const user = useRecoilValue(userAtom); const [currentUser, setCurrentUser] = useState(); const [purchaseOrderChecks, setPurchaseOrderChecks] = useState([]); const [purchaseOrderID, setPurchaseOrderID] = useState(1); @@ -82,6 +81,10 @@ export default function PurchaseOrders(props: Props) { setIsOpen(true); }; + useEffect(() => { + setCurrentUser(user); + }, []); + const formatDate = (date: string) => { const datetime = date.replace('T', ' '); const datetime2 = datetime.substring(5, datetime.length - 10).replace('-', '/'); @@ -96,7 +99,6 @@ export default function PurchaseOrders(props: Props) { const getPurchaseOrders = async () => { const getPurchaseOrderViewUrlByYear = process.env.CSR_API_URI + '/purchaseorders/details/' + selectedYear; - console.log(getPurchaseOrderViewUrlByYear); const getPurchaseOrderByYears = await get(getPurchaseOrderViewUrlByYear); setPurchaseOrderViews(getPurchaseOrderByYears); }; @@ -148,40 +150,19 @@ export default function PurchaseOrders(props: Props) { setPurchaseOrderViews(newPurchaseOrderViews); }; - const isFinanceDirector = useMemo(() => { - if (currentUser?.roleID === 3) { - return true; - } else { - return false; - } - }, [currentUser?.roleID]); - - const isDisabled = useCallback( - (purchaseOrderViewItem: PurchaseOrderView) => { - if ( - !purchaseOrderViewItem.purchaseOrder.financeCheck && - (currentUser?.roleID === 2 || - currentUser?.roleID === 3 || - currentUser?.id === purchaseOrderViewItem.purchaseOrder.userID) - ) { - return false; - } else { - return true; - } - }, - [currentUser?.id, currentUser?.roleID, purchaseOrderViews], - ); + const isFinanceDirector = currentUser?.roleID === 3; - useEffect(() => { - const getUser = async () => { - const res = await getCurrentUser(auth); - setCurrentUser(res); - }; - getUser(); + const isDisabled = useCallback((purchaseOrderViewItem: PurchaseOrderView) => { + return ( + purchaseOrderViewItem.purchaseOrder.financeCheck && + !( + currentUser?.roleID === 2 || + currentUser?.roleID === 3 || + currentUser?.id === purchaseOrderViewItem.purchaseOrder.userID + ) + ); }, []); - console.log(props.expenseByPeriods); - return ( @@ -320,17 +301,17 @@ export default function PurchaseOrders(props: Props) { onOpen(purchaseOrderViewItem.purchaseOrder.id || 0, purchaseOrderViewItem); }} > -
+
{purchaseOrderViewItem.purchaseItem && purchaseOrderViewItem.purchaseItem.map( (purchaseItem: PurchaseItem, index: number) => ( - <> +

{purchaseOrderViewItem.purchaseItem.length - 1 === index ? ( <>{purchaseItem.item} ) : ( <>{purchaseItem.item}, )} - +

), )}
diff --git a/view/next-project/src/pages/purchasereports/index.tsx b/view/next-project/src/pages/purchasereports/index.tsx index b6dd01dda..33452df12 100644 --- a/view/next-project/src/pages/purchasereports/index.tsx +++ b/view/next-project/src/pages/purchasereports/index.tsx @@ -2,12 +2,11 @@ import Head from 'next/head'; import { useCallback, useEffect, useState, useMemo } from 'react'; import { useRecoilValue } from 'recoil'; import PrimaryButton from '@/components/common/OutlinePrimaryButton/OutlinePrimaryButton'; -import { authAtom } from '@/store/atoms'; +import { userAtom } from '@/store/atoms'; import { put } from '@/utils/api/api_methods'; import { createPurchaseReportCsv } from '@/utils/createPurchaseReportCsv'; import { downloadFile } from '@/utils/downloadFile'; import { get } from '@api/api_methods'; -import { getCurrentUser } from '@api/currentUser'; import { Card, Checkbox, Title, BureauLabel } from '@components/common'; import MainLayout from '@components/layout/MainLayout'; import DetailModal from '@components/purchasereports/DetailModal'; @@ -71,7 +70,7 @@ const formatYYYYMMDD = (date: Date) => { }; export default function PurchaseReports(props: Props) { - const auth = useRecoilValue(authAtom); + const user = useRecoilValue(userAtom); const [currentUser, setCurrentUser] = useState(); const [purchaseReportID, setPurchaseReportID] = useState(1); const [purchaseReportViewItem, setPurchaseReportViewItem] = useState(); @@ -138,21 +137,20 @@ export default function PurchaseReports(props: Props) { // eslint-disable-next-line react-hooks/exhaustive-deps }, [selectedYear]); - const isDisabled = useCallback( - (purchaseReportView: PurchaseReportView) => { - if ( - !purchaseReportView.purchaseReport.financeCheck && - (currentUser?.roleID === 2 || - currentUser?.roleID === 3 || - currentUser?.id === purchaseReportView.purchaseReport.userID) - ) { - return false; - } else { - return true; - } - }, - [currentUser?.roleID, currentUser?.id], - ); + useEffect(() => { + setCurrentUser(user); + }, []); + + const isDisabled = useCallback((purchaseReportView: PurchaseReportView) => { + return ( + purchaseReportView.purchaseReport.financeCheck && + !( + currentUser?.roleID === 2 || + currentUser?.roleID === 3 || + currentUser?.id === purchaseReportView.purchaseReport.userID + ) + ); + }, []); const updatePurchaseReport = async (purchaseReportID: number, purchaseReport: PurchaseReport) => { const url = process.env.CSR_API_URI + '/purchasereports/' + purchaseReportID; @@ -175,21 +173,7 @@ export default function PurchaseReports(props: Props) { } }, [purchaseReportViews]); - const isFinanceDirector = useMemo(() => { - if (currentUser?.roleID === 3) { - return true; - } else { - return false; - } - }, [currentUser?.roleID]); - - useEffect(() => { - const getUser = async () => { - const res = await getCurrentUser(auth); - setCurrentUser(res); - }; - getUser(); - }, []); + const isFinanceDirector = currentUser?.roleID === 3; return ( diff --git a/view/next-project/src/pages/teachers/index.tsx b/view/next-project/src/pages/teachers/index.tsx index 858c3a9ff..695eebd82 100644 --- a/view/next-project/src/pages/teachers/index.tsx +++ b/view/next-project/src/pages/teachers/index.tsx @@ -1,9 +1,8 @@ import clsx from 'clsx'; import Head from 'next/head'; -import { useMemo, useState, useEffect } from 'react'; +import { useState, useEffect } from 'react'; import { useRecoilValue } from 'recoil'; -import { authAtom } from '@/store/atoms'; -import { getCurrentUser } from '@/utils/api/currentUser'; +import { userAtom } from '@/store/atoms'; import { get } from '@api/api_methods'; import { Card, Title } from '@components/common'; import MainLayout from '@components/layout/MainLayout'; @@ -42,18 +41,19 @@ export default function TeachersList(props: Props) { departments[0], ); - const auth = useRecoilValue(authAtom); - const [currentUser, setCurrentUser] = useState(null); - const isDisabled = useMemo(() => { - if (currentUser?.roleID === 2 || currentUser?.roleID === 3 || currentUser?.id === 4) { - return false; - } else { - return true; - } - }, [currentUser?.roleID, currentUser?.id, currentUser]); - + const user = useRecoilValue(userAtom); + const [currentUser, setCurrentUser] = useState(); + const isDisabled = !( + currentUser?.roleID === 2 || + currentUser?.roleID === 3 || + currentUser?.id === 4 + ); const [filterTeachers, setFilterTeachers] = useState(teachers); + useEffect(() => { + setCurrentUser(user); + }, []); + useEffect(() => { const newFilterTeachers = selectedDepartment?.id === 0 @@ -64,14 +64,6 @@ export default function TeachersList(props: Props) { setFilterTeachers(newFilterTeachers); }, [selectedDepartment]); - useEffect(() => { - const getUser = async () => { - const res = await getCurrentUser(auth); - setCurrentUser(res); - }; - getUser(); - }, []); - return ( diff --git a/view/next-project/src/pages/users/index.tsx b/view/next-project/src/pages/users/index.tsx index 43d855cf3..eccff3c2a 100644 --- a/view/next-project/src/pages/users/index.tsx +++ b/view/next-project/src/pages/users/index.tsx @@ -4,8 +4,7 @@ import { useRouter } from 'next/router'; import { useEffect, useState, useMemo } from 'react'; import { useRecoilValue } from 'recoil'; import OpenDeleteModalButton from '@/components/users/OpenDeleteModalButton'; -import { authAtom } from '@/store/atoms'; -import { getCurrentUser } from '@/utils/api/currentUser'; +import { userAtom } from '@/store/atoms'; import { get } from '@api/api_methods'; import { Card, Title } from '@components/common'; import MainLayout from '@components/layout/MainLayout/MainLayout'; @@ -33,14 +32,11 @@ export default function Users(props: Props) { const { users } = props; const router = useRouter(); - const auth = useRecoilValue(authAtom); + const user = useRecoilValue(userAtom); const [currentUser, setCurrentUser] = useState(); + useEffect(() => { - const getUser = async () => { - const res = await getCurrentUser(auth); - setCurrentUser(res); - }; - getUser(); + setCurrentUser(user); }, []); const [deleteUsers, setDeleteUsers] = useState<{ users: User[]; ids: number[] }>({ diff --git a/view/next-project/src/pages/yearperiods/index.tsx b/view/next-project/src/pages/yearperiods/index.tsx index fa21915dd..f676fc47f 100644 --- a/view/next-project/src/pages/yearperiods/index.tsx +++ b/view/next-project/src/pages/yearperiods/index.tsx @@ -7,8 +7,7 @@ import { useRecoilValue } from 'recoil'; import OpenAddModalButton from '@/components/yearperiods/OpenAddModalButton'; import OpenDeleteModalButton from '@/components/yearperiods/OpenDeleteModalButton'; import OpenEditModalButton from '@/components/yearperiods/OpenEditModalButton'; -import { authAtom } from '@/store/atoms'; -import { getCurrentUser } from '@/utils/api/currentUser'; +import { userAtom } from '@/store/atoms'; import { get } from '@api/api_methods'; import { Card, Title } from '@components/common'; import MainLayout from '@components/layout/MainLayout/MainLayout'; @@ -33,7 +32,7 @@ export default function Periods(props: Props) { const { yearPeriods } = props; const router = useRouter(); - const auth = useRecoilValue(authAtom); + const user = useRecoilValue(userAtom); const [currentUser, setCurrentUser] = useState(); const formatYearPeriods = @@ -47,11 +46,7 @@ export default function Periods(props: Props) { }); useEffect(() => { - const getUser = async () => { - const res = await getCurrentUser(auth); - setCurrentUser(res); - }; - getUser(); + setCurrentUser(user); }, []); // ログイン中のユーザの権限 diff --git a/view/next-project/src/utils/api/api_methods.ts b/view/next-project/src/utils/api/api_methods.ts index 1b17a8e13..fa02273f9 100644 --- a/view/next-project/src/utils/api/api_methods.ts +++ b/view/next-project/src/utils/api/api_methods.ts @@ -49,3 +49,16 @@ export const put = async (url: string, data: unknown) => { }).then((response) => response.json()); return res; }; + +export const get_with_token_valid = async (url: string, accessToken?: string) => { + const res = await fetch(url, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + 'access-token': accessToken ? accessToken : localStorage.getItem('access-token') || 'none', + client: localStorage.getItem('client') || 'none', + uid: localStorage.getItem('uid') || 'none', + }, + }).then((response) => response); + return res.status === 200; +};