Merge pull request #531 from NUTFes/fix/imaimai/del-modal

不使用モーダルの削除とactions追加

.github/workflows/auto-build.yml

@@ -0,0 +1,40 @@
+name: Build and Test
+
+on:
+  pull_request:
+    branches:
+      - main
+    paths:
+      - "view/next-project/**"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          # Make sure the actual branch is checked out when running on pull requests
+          ref: ${{ github.head_ref }}
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: npm
+          cache-dependency-path: view/next-project/package-lock.json
+      - name: npm install
+        working-directory: view/next-project
+        run: npm install
+      - name: Build
+        working-directory: view/next-project
+        run: npm run build
+      - name: Prettier
+        working-directory: view/next-project
+        run: npm run format
+      - name: Lint
+        working-directory: view/next-project
+        run: npm run lint:fix
+      - uses: stefanzweifel/[email protected]
+        with:
+          commit_message: formatted by workflow

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "eslint.workingDirectories": ["./view/next-project"],
+}

view/next-project/.eslintrc.json

@@ -14,7 +14,7 @@
       "jsx": true
     },
     "ecmaVersion": "latest",
-    "project": ["./view/next-project/tsconfig.json"],
+    "project": ["./tsconfig.json"],
     "sourceType": "module"
   },
   "settings": {
@@ -35,6 +35,6 @@
           "order": "asc"
         }
       }
-    ],
+    ]
   }
 }

view/next-project/src/components/auth/SignInView.tsx

@@ -3,14 +3,13 @@ import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useRecoilState } from 'recoil';
 
+import { PrimaryButton } from '../common';
 import { authAtom, userAtom } from '@/store/atoms';
 import { get_with_token } from '@api/api_methods';
 import { signIn } from '@api/signIn';
 import LoadingButton from '@components/common/LoadingButton';
 import { SignIn } from '@type/common';
 
-import { PrimaryButton } from '../common';
-
 export default function SignInView() {
   // ログイン中フラグ
   const [isSignInNow, setIsSignInNow] = useState<boolean>(false);

view/next-project/src/components/auth/SignUpView.tsx

@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useRecoilState } from 'recoil';
 
+import { PrimaryButton } from '../common';
 import { BUREAUS } from '@/constants/bureaus';
 import { authAtom, userAtom } from '@/store/atoms';
 import { get } from '@api/api_methods';
@@ -11,8 +12,6 @@ import { post } from '@api/user';
 import LoadingButton from '@components/common/LoadingButton';
 import { SignUp, User } from '@type/common';
 
-import { PrimaryButton } from '../common';
-
 export default function SignUpView() {
   const [, setAuth] = useRecoilState(authAtom);
   const [, setUser] = useRecoilState(userAtom);

view/next-project/src/components/budgets/DetailModal.tsx

@@ -42,27 +42,19 @@ const DetailModal: FC<ModalProps> = (props) => {
       <div className='my-10 flex flex-wrap justify-center gap-8'>
         <div className='flex gap-3'>
           <p className='text-black-600'>支出元</p>
-          <p className='border-b border-primary-1'>
-            {props.expenseView.expense.name}
-          </p>
+          <p className='border-b border-primary-1'>{props.expenseView.expense.name}</p>
         </div>
         <div className='flex gap-3'>
           <p className='text-black-600'>合計金額</p>
-          <p className='border-b border-primary-1'>
-            {props.expenseView.expense.totalPrice}
-          </p>
+          <p className='border-b border-primary-1'>{props.expenseView.expense.totalPrice}</p>
         </div>
         <div className='flex gap-3'>
           <p className='text-black-600'>割引合計</p>
-          <p className='border-b border-primary-1'>
-            {discountTotal}
-          </p>
+          <p className='border-b border-primary-1'>{discountTotal}</p>
         </div>
         <div className='flex gap-3'>
           <p className='text-black-600'>加算合計</p>
-          <p className='border-b border-primary-1'>
-            {additionTotal}
-          </p>
+          <p className='border-b border-primary-1'>{additionTotal}</p>
         </div>
       </div>
       <p className='my-5 mx-auto w-fit text-xl text-black-600'>購入物品</p>
@@ -81,32 +73,28 @@ const DetailModal: FC<ModalProps> = (props) => {
           </tr>
         </thead>
         <tbody className='border border-x-white-0 border-b-primary-1'>
-          {props.expenseView.purchaseDetails ? (props.expenseView.purchaseDetails.map((purchaseDetail) => (
-            purchaseDetail.purchaseItems.map((purchaseItem) => (
-              <tr>
-                <td className='py-3'>
-                  <div className='text-center text-sm text-black-600'>
-                    {purchaseItem.item}
-                  </div>
-                </td>
-                <td className='py-3'>
-                  <div className='text-center text-sm text-black-600'>
-                    {purchaseItem.quantity}
-                  </div>
-                </td>
-                <td className='py-3'>
-                  <div className='text-center text-sm text-black-600'>
-                    {purchaseItem.price}
-                  </div>
-                </td>
-              </tr>
-            ))
-          ))) : (
+          {props.expenseView.purchaseDetails ? (
+            props.expenseView.purchaseDetails.map((purchaseDetail) =>
+              purchaseDetail.purchaseItems.map((purchaseItem) => (
+                <tr key={purchaseItem.id}>
+                  <td className='py-3'>
+                    <div className='text-center text-sm text-black-600'>{purchaseItem.item}</div>
+                  </td>
+                  <td className='py-3'>
+                    <div className='text-center text-sm text-black-600'>
+                      {purchaseItem.quantity}
+                    </div>
+                  </td>
+                  <td className='py-3'>
+                    <div className='text-center text-sm text-black-600'>{purchaseItem.price}</div>
+                  </td>
+                </tr>
+              )),
+            )
+          ) : (
             <tr className='border border-x-white-0 border-b-primary-1 border-t-white-0'>
               <td className='py-3' colSpan={3}>
-                <div className='text-center text-sm text-black-600'>
-                  購入物品がありません
-                </div>
+                <div className='text-center text-sm text-black-600'>購入物品がありません</div>
               </td>
             </tr>
           )}

view/next-project/src/components/budgets/EditModal.tsx

@@ -19,8 +19,8 @@ import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react';
 import { RiCloseCircleLine } from 'react-icons/ri';
 
 import { SOURCES } from '@/constants/sources';
-import { put } from '@api/budget';
 import { get } from '@api/api_methods';
+import { put } from '@api/budget';
 import theme from '@assets/theme';
 import RegistButton from '@components/common/RegistButton';
 import { Budget, Source, Year } from '@type/common';

view/next-project/src/components/common/BureauLabel/BureauLabel.tsx

@@ -1,9 +1,8 @@
 import React, { useMemo } from 'react';
 
-import { BUREAUS_WITH_EN } from '@constants/bureaus';
-
-import { BureauLabelProps } from './BureauLabel.type';
 import Label from '../Label';
+import { BureauLabelProps } from './BureauLabel.type';
+import { BUREAUS_WITH_EN } from '@constants/bureaus';
 
 const BureauLabel: React.FC<BureauLabelProps> = (props) => {
   const { bureauName } = props;

view/next-project/src/components/common/Header/Header.tsx

@@ -4,13 +4,12 @@ import { AiOutlineMenu } from 'react-icons/ai';
 import { RiAccountCircleFill } from 'react-icons/ri';
 import { useRecoilState } from 'recoil';
 
+import { HeaderProps } from './Header.type';
 import { authAtom, userAtom } from '@/store/atoms';
 import { del } from '@api/signOut';
 import { ChakraUIDropdown } from '@components/common';
 import { User } from '@type/common';
 
-import { HeaderProps } from './Header.type';
-
 const Header = (props: HeaderProps) => {
   const { onSideNavOpen } = props;
   const [auth, setAuth] = useRecoilState(authAtom);

view/next-project/src/components/common/Label/Label.tsx

@@ -1,9 +1,8 @@
 import { Box, ChakraProvider } from '@chakra-ui/react';
 import React, { useMemo } from 'react';
 
-import theme from '@/assets/theme';
-
 import { LabelProps } from './Label.type';
+import theme from '@/assets/theme';
 
 const Label: React.FC<LabelProps> = (props) => {
   const {

view/next-project/src/components/common/OpenModalButton.tsx

@@ -2,9 +2,8 @@ import { ChakraProvider, Button } from '@chakra-ui/react';
 import * as React from 'react';
 import { useState } from 'react';
 
-import theme from '@assets/theme';
-
 import RegistModal from './RegistModal';
+import theme from '@assets/theme';
 
 interface Props {
   width?: string;

view/next-project/src/components/fund_information/AddModal.tsx

@@ -2,12 +2,11 @@ import { useRouter } from 'next/router';
 import React, { Dispatch, FC, SetStateAction, useEffect, useState } from 'react';
 import { useRecoilState } from 'recoil';
 
+import { Modal, CloseButton, Input, Select, PrimaryButton } from '../common';
 import { userAtom } from '@/store/atoms';
 import { post } from '@api/fundInformations';
 import { Department, FundInformation, Teacher, User } from '@type/common';
 
-import { Modal, CloseButton, Input, Select, PrimaryButton } from '../common';
-
 interface ModalProps {
   setShowModal: Dispatch<SetStateAction<boolean>>;
   teachers: Teacher[];

view/next-project/src/components/fund_information/EditModal.tsx

@@ -1,11 +1,10 @@
 import { useRouter } from 'next/router';
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 
+import { Modal, Input, Select, CloseButton, PrimaryButton } from '../common';
 import { put } from '@api/fundInformations';
 import { FundInformation, Teacher, User, Department } from '@type/common';
 
-import { Modal, Input, Select, CloseButton, PrimaryButton } from '../common';
-
 interface ModalProps {
   setShowModal: Dispatch<SetStateAction<boolean>>;
   teachers: Teacher[];

view/next-project/src/components/fund_information/OpenAddModalButton.tsx

@@ -1,10 +1,9 @@
 import React, { useState } from 'react';
 
+import OpenAddModal from './AddModal';
 import { AddButton } from '@components/common';
 import { Teacher, Department, User } from '@type/common';
 
-import OpenAddModal from './AddModal';
-
 interface Props {
   children?: React.ReactNode;
   teachers: Teacher[];

view/next-project/src/components/fund_information/OpenDeleteModalButton.tsx

@@ -1,8 +1,7 @@
 import React, { useState } from 'react';
 
-import { DeleteButton } from '@components/common';
-
 import DeleteModal from './DeleteModal';
+import { DeleteButton } from '@components/common';
 
 interface Props {
   children?: React.ReactNode;

view/next-project/src/components/fund_information/OpenEditModalButton.tsx

@@ -1,10 +1,9 @@
 import React, { useState } from 'react';
 
+import EditModal from './EditModal';
 import { EditButton } from '@components/common';
 import { Teacher, Department, User, FundInformation } from '@type/common';
 
-import EditModal from './EditModal';
-
 interface Props {
   teachers: Teacher[];
   departments: Department[];

view/next-project/src/components/layout/Layout/Layout.tsx

@@ -1,20 +1,17 @@
 import React, { ReactNode } from 'react';
 
+import s from './Layout.module.css';
 import SponsorActivitiesAddModal from '@/components/sponsoractivities/SponsorActivitiesAddModal';
 import SponsorAddModal from '@/components/sponsors/SponsorAddModal';
-import PurchaseItemNumModal from '@components/purchaseorders/PurchaseItemNumModal';
 import PurchaseReportAddModal from '@components/purchasereports/AddModal';
 import PurchaseOrderListModal from '@components/purchasereports/PurchaseOrderListModal';
 import PurchaseReportItemNumModal from '@components/purchasereports/PurchaseReportItemNumModal';
 import { useUI } from '@components/ui/context';
 
-import s from './Layout.module.css';
-
 const ModalView: React.FC<{ modalView: string }> = ({ modalView }) => {
   return (
     <>
       {modalView === 'SPONSOR_ADD_MODAL' && <SponsorAddModal />}
-      {modalView === 'PURCHASE_ITEM_NUM_MODAL' && <PurchaseItemNumModal />}
       {modalView === 'PURCHASE_REPORT_ADD_MODAL' && <PurchaseReportAddModal />}
       {modalView === 'PURCHASE_ORDER_LIST_MODAL' && <PurchaseOrderListModal />}
       {modalView === 'PURCHASE_REPORT_ITEM_NUM_MODAL' && <PurchaseReportItemNumModal />}

view/next-project/src/components/layout/MainLayout/MainLayout.tsx

@@ -3,13 +3,12 @@ import Head from 'next/head';
 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 'tailwindcss/tailwind.css';
 import { Header, SideNav } from '@components/common';
 
-import s from './MainLayout.module.css';
-
 interface LayoutProps {
   children?: React.ReactNode;
 }

view/next-project/src/components/purchaseorders/DeleteModal.tsx

@@ -1,9 +1,8 @@
 import { useRouter } from 'next/router';
 import React, { Dispatch, FC, SetStateAction } from 'react';
 
-import { del } from '@api/api_methods';
-
 import { CloseButton, Modal, OutlinePrimaryButton, PrimaryButton } from '../common';
+import { del } from '@api/api_methods';
 
 interface ModalProps {
   setShowModal: Dispatch<SetStateAction<boolean>>;