Merge pull request #766 from NUTFes/fix/hikahana/754-sponsor-activity…

…-modal-button-disabled

画像登録時にloadingを出現させた

view/next-project/src/components/common/index.ts

@@ -26,3 +26,6 @@ export { default as Header } from './Header';
 export { default as SideNav } from './SideNav';
 export { default as MultiSelect } from './MultiSelect/MultiSelect';
 export { default as SearchSelect } from './SearchSelect';
+export { default as Loading } from './Loading';
+export { default as Link } from './Link';
+export { default as PrimaryLink } from './PrimaryLink';

view/next-project/src/components/sponsoractivities/DetailPage2.tsx

@@ -12,6 +12,7 @@ import {
   OutlinePrimaryButton,
   PrimaryButton,
   Select,
+  Loading,
 } from '../common';
 import UplaodFileModal from './UploadFileModal';
 import { post, del, put } from '@/utils/api/api_methods';
@@ -34,6 +35,7 @@ const DetailPage2: FC<ModalProps> = (props) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [editActivityInformationId, setEditActivityInformationId] = useState<number>(0);
   const [activityInformationData, setActivityInformationData] = useState<string>('');
+  const [isLoading, setIsLoading] = useState<boolean>(false);
 
   const [sponsorActivityInformations, setSponsorActivityInformations] = useState<
     SponsorActivityInformation[]
@@ -70,9 +72,11 @@ const DetailPage2: FC<ModalProps> = (props) => {
     });
 
   const download = async (url: string, fileName: string) => {
+    setIsLoading(true);
     const response = await fetch(url);
     const blob = await response.blob();
     saveAs(blob, fileName);
+    setIsLoading(false);
   };
 
   const handleDelete = async (id: number, activityInformation: SponsorActivityInformation) => {
@@ -331,6 +335,7 @@ const DetailPage2: FC<ModalProps> = (props) => {
                       onClick={() =>
                         fileURLs && download(fileURLs[index], activityInformation.fileName || '')
                       }
+                      disabled={isLoading}
                     >
                       ダウンロード
                     </PrimaryButton>
@@ -350,6 +355,7 @@ const DetailPage2: FC<ModalProps> = (props) => {
                   </div>
                 )}
               </div>
+              {isLoading && <Loading />}
             </>
           ))}
         <div className='my-1 flex flex-wrap justify-center gap-7 border-t border-primary-1 p-2'>

view/next-project/src/components/sponsoractivities/UploadFileModal.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useRef, useState } from 'react';
 import { RiCloseCircleLine } from 'react-icons/ri';
 
-import { PrimaryButton } from '../common';
+import { PrimaryButton, Loading } from '../common';
 import { put } from '@/utils/api/api_methods';
 import { Modal } from '@components/common';
 import { SponsorActivityInformation } from '@type/common';
@@ -35,6 +35,8 @@ const UplaodFileModal: FC<ModalProps> = (props) => {
   );
 
   const sponsorActivityInformations = props.sponsorActivityInformations || [];
+  // loadingの呼び出し
+  const [isLoading, setIsLoading] = useState<boolean>(false);
 
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const targetFile = e.target.files![0]!;
@@ -67,6 +69,7 @@ const UplaodFileModal: FC<ModalProps> = (props) => {
     if (!imageFile) {
       return;
     }
+    setIsLoading(true);
     const formData = new FormData();
     formData.append('file', imageFile);
     const fileName = imageFile?.name || '';
@@ -87,6 +90,7 @@ const UplaodFileModal: FC<ModalProps> = (props) => {
       .catch((error) => {
         console.error('Error:', error);
       });
+    setIsLoading(false);
 
     if (!response) {
       onClose();
@@ -112,8 +116,6 @@ const UplaodFileModal: FC<ModalProps> = (props) => {
     onClose();
   };
 
-  console.log(process.env.NEXT_PUBLIC_BUCKET_NAME);
-
   const onClose = () => {
     handleFileDelete();
     props.setIsOpen(false);
@@ -148,10 +150,11 @@ const UplaodFileModal: FC<ModalProps> = (props) => {
         )}
       </div>
       <div className='my-2 flex w-full flex-wrap justify-center'>
-        <PrimaryButton type='button' onClick={() => submit()} disabled={!imageFile}>
+        <PrimaryButton type='button' onClick={() => submit()} disabled={isLoading && !imageFile}>
           登録
         </PrimaryButton>
       </div>
+      {isLoading && <Loading />}
     </Modal>
   );
 };

view/next-project/src/pages/reset_password/[id]/index.tsx

@@ -4,13 +4,10 @@ import Router from 'next/router';
 import React, { useState } from 'react';
 import { useForm } from 'react-hook-form';
 
-import Link from '@/components/common/Link';
-import Loading from '@/components/common/Loading';
-import PrimaryLink from '@/components/common/PrimaryLink';
 import LoginLayout from '@/components/layout/LoginLayout';
 import { PasswordResetData } from '@/type/common';
 import { resetPassword, resetPasswordTokenValid } from '@/utils/api/resetPassword';
-import { PrimaryButton } from '@components/common';
+import { PrimaryButton, Link, Loading, PrimaryLink } from '@components/common';
 
 interface Props {
   isTokenValid: boolean;

view/next-project/src/pages/reset_password/request/index.tsx

@@ -1,12 +1,9 @@
 import Image from 'next/image';
 import { FormEvent, useState } from 'react';
 
-import Link from '@/components/common/Link';
-import Loading from '@/components/common/Loading';
-import PrimaryLink from '@/components/common/PrimaryLink';
 import LoginLayout from '@/components/layout/LoginLayout';
 import { reserPasswordRequest } from '@/utils/api/resetPassword';
-import { PrimaryButton } from '@components/common';
+import { PrimaryButton, Link, Loading, PrimaryLink } from '@components/common';
 
 export default function Periods() {
   const [email, setEmail] = useState<string>('');