Merge pull request #836 from NUTFes/fix-rendaring

協賛活動フィルターに関するバグ修正
NUTFes · Jul 8, 2024 · bcd0ff9 · bcd0ff9
2 parents f14314b + 3b82e25
commit bcd0ff9
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 6 deletions.
diff --git a/view/next-project/src/components/sponsoractivities/FilterModal.tsx b/view/next-project/src/components/sponsoractivities/FilterModal.tsx
@@ -126,7 +126,7 @@ const FilterModal: FC<ModalProps> = (props) => {
                 </div>
               </div>
             </div>
-            <p className='col-span-2 text-black-600'>回収有無</p>
+            <p className='col-span-2 text-black-600'>協賛金回収状況</p>
             <div className='col-span-2 w-full'>
               <Select
                 defaultValue={draftFilterData.isDone}

diff --git a/view/next-project/src/pages/sponsoractivities/index.tsx b/view/next-project/src/pages/sponsoractivities/index.tsx
@@ -4,6 +4,7 @@ import { useState, useEffect, useMemo } from 'react';
 
 import { MdFilterList, MdCircle } from 'react-icons/md';
 import { RiExternalLinkLine } from 'react-icons/ri';
+import { Loading } from '@/components/common';
 import PrimaryButton from '@/components/common/OutlinePrimaryButton/OutlinePrimaryButton';
 import {
   OpenAddModalButton,
@@ -83,6 +84,7 @@ export default function SponsorActivities(props: Props) {
   const [sponsorActivitiesItem, setSponsorActivitiesViewItem] = useState<SponsorActivityView>();
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [isFilerOpen, setIsFilerOpen] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
   const [filterData, setFilterData] = useState<SponsorFilterType>({
     styleIds: sponsorStyles.map((style) => style?.id || 0),
     isDone: 'all',
@@ -103,6 +105,27 @@ export default function SponsorActivities(props: Props) {
   };
 
   const getSponsorActivities = async () => {
+    setIsLoading(true);
+    if (isFiltered) {
+      const getSponsorActivitiesViewUrlByYear =
+        process.env.CSR_API_URI + '/activities/filtered_details/' + selectedYear;
+      const getFilterSponsorActivitiesByYears = await getByFiler(
+        getSponsorActivitiesViewUrlByYear,
+        filterData.isDone,
+        filterData.styleIds,
+        filterData.keyword,
+        sponsorStyles.length,
+      );
+      setSponsorActivities(getFilterSponsorActivitiesByYears);
+      setIsLoading(false);
+    } else {
+      const getSponsorActivitiesViewUrlByYear =
+        process.env.CSR_API_URI + '/activities/details/' + selectedYear;
+      const getSponsorActivitiesByYears = await get(getSponsorActivitiesViewUrlByYear);
+      setSponsorActivities(getSponsorActivitiesByYears);
+      setIsLoading(false);
+    }
+
     const getSponsorActivitiesViewUrlByYear =
       process.env.CSR_API_URI + '/activities/filtered_details/' + selectedYear;
     const getFilterSponsorActivitiesByYears = await getByFiler(
@@ -207,10 +230,6 @@ export default function SponsorActivities(props: Props) {
     return totalFee;
   }, [sortedSponsorActivitiesViews]);
 
-  useEffect(() => {
-    getSponsorActivities();
-  }, [filterData, selectedYear]);
-
   const isFiltered = useMemo(() => {
     const isStyleFilter = sponsorStyles.length !== filterData.styleIds.length;
     const isDonefilter = filterData.isDone !== 'all';
@@ -219,12 +238,17 @@ export default function SponsorActivities(props: Props) {
     return isStyleFilter || isDonefilter || isKeywordFilter || isSorted;
   }, [filterData]);
 
+  useEffect(() => {
+    getSponsorActivities();
+  }, [filterData, selectedYear]);
+
   return (
     <MainLayout>
       <Head>
         <title>協賛活動一覧</title>
         <meta name='viewpoinst' content='initial-scale=1.0, width=device-width' />
       </Head>
+      {isLoading && <Loading />}
       <Card w='w-full'>
         <div className='mx-6 mt-10 md:mx-5'>
           <div className='gap-4 md:flex'>
@@ -256,7 +280,7 @@ export default function SponsorActivities(props: Props) {
                   <MdFilterList size='22' color='#666666' />
                 </button>
                 {isFiltered && (
-                  <div className='fixed -mt-5 ml-6'>
+                  <div className='absolute -mt-5 ml-6'>
                     <MdCircle color='rgb(4 102 140)' size={6} />
                   </div>
                 )}