moonshotcommons · qige12138 · Mar 21, 2024 · Mar 20, 2024 · Mar 21, 2024 · Mar 21, 2024
diff --git a/app/[lang]/(web)/(learn page)/ugc/[courseId]/creation/components/UgcCreateProvider/index.tsx b/app/[lang]/(web)/(learn page)/ugc/[courseId]/creation/components/UgcCreateProvider/index.tsx
@@ -7,6 +7,8 @@ import {
   UgcCreateContext,
   defaultCourseInformation
 } from '../../constant/type';
+import { useUgcCreationStore } from '@/store/zustand/ugcCreationStore';
+import { useShallow } from 'zustand/react/shallow';
 interface UgcCreateProviderProps {
   children: ReactNode;
   courseId: string;
@@ -24,6 +26,17 @@ const UgcCreateProvider: FC<UgcCreateProviderProps> = ({
   const [selectLessonId, setSelectLessonId] = useState('');
   const [courseId, setCourseId] = useState('');
   const [selectUnitMenuId, setSelectUnitMenuId] = useState('');
+
+  const { loading, setHandle, handle } = useUgcCreationStore(
+    useShallow((state) => ({
+      loading: state.loading,
+      setHandle: state.setHandle,
+      handle: state.handle
+    }))
+  );
+
+  const handleBack = () => {};
+  const handleNext = () => {};
   useEffect(() => {
     setLearnPageTitle(LearnPageType.UGC_CREATION);
     return () => {

diff --git a/app/[lang]/(web)/(learn page)/ugc/[courseId]/creation/components/UgcSidebar/index.tsx b/app/[lang]/(web)/(learn page)/ugc/[courseId]/creation/components/UgcSidebar/index.tsx
@@ -11,6 +11,8 @@ import {
 } from '../../constant/type';
 import { labelMaps } from './constant';
 import useUgcCreationDataHandle from '@/hooks/useUgcCreationDataHandle';
+import { useUgcCreationStore } from '@/store/zustand/ugcCreationStore';
+import { useShallow } from 'zustand/react/shallow';
 
 interface UgcSidebarProps {}
 
@@ -40,6 +42,14 @@ const UgcSidebar: FC<UgcSidebarProps> = () => {
     }
   };
 
+  const { loading, setHandle, handle } = useUgcCreationStore(
+    useShallow((state) => ({
+      loading: state.loading,
+      setHandle: state.setHandle,
+      handle: state.handle
+    }))
+  );
+
   const items: SidebarItemType[] = useMemo(() => {
     const informationChildren: SidebarItemType[] = Object.keys(
       courseInformation
@@ -139,6 +149,16 @@ const UgcSidebar: FC<UgcSidebarProps> = () => {
     return CONTENT_KEY;
   }, [selectLessonId]);
 
+  const isCanBack = useMemo(() => {
+    return selectLessonId !== CreationPageKey.Introduction;
+  }, [selectLessonId]);
+
+  const hanldeBack = () => {
+    if (!isCanBack) return;
+  };
+
+  const handleNext = () => {};
+
   return (
     <Sidebar
       title={'未命名课程'}
@@ -153,12 +173,15 @@ const UgcSidebar: FC<UgcSidebarProps> = () => {
         <div className="flex flex-shrink-0 flex-col items-center gap-[10px] p-[40px]">
           <Button
             ghost
+            onClick={hanldeBack}
             className={`button-text-m h-[48px] w-full border-neutral-black uppercase text-neutral-black ${true ? '' : 'cursor-not-allowed opacity-50'}`}
           >
             back
           </Button>
           <Button
             type="primary"
+            loading={loading}
+            onClick={handleNext}
             className={`button-text-m h-[48px] w-full uppercase text-neutral-black ${true ? '' : 'cursor-not-allowed opacity-50'}`}
           >
             next

diff --git a/app/[lang]/(web)/(learn page)/ugc/[courseId]/creation/components/UgcUnit/index.tsx b/app/[lang]/(web)/(learn page)/ugc/[courseId]/creation/components/UgcUnit/index.tsx
@@ -132,7 +132,7 @@ const UgcUnit: React.FC<UgcUnitProp> = () => {
     setLoading(true);
     if (type === 'unit') {
       webApi.ugcCreateApi
-        .delelteUnit(courseId, id)
+        .deleteUnit(courseId, id)
         .then(() => {
           message.success('success');
           refreshUnit();
@@ -164,7 +164,7 @@ const UgcUnit: React.FC<UgcUnitProp> = () => {
         });
     } else {
       webApi.ugcCreateApi
-        .delelteLesson(id)
+        .deleteLesson(id)
         .then(() => {
           message.success('success');
           refreshUnit();

diff --git a/app/[lang]/(web)/(learn page)/ugc/[courseId]/creation/constant/data.tsx b/app/[lang]/(web)/(learn page)/ugc/[courseId]/creation/constant/data.tsx
@@ -1,5 +1,5 @@
 import { LessonType } from '../components/UgcSidebar/constant';
-import { LessonTypeDataType } from './type';
+import { CreationPageKey, LessonTypeDataType } from './type';
 
 export const defaultFormLi = {
   value: '',
@@ -83,3 +83,11 @@ export const lessonTypeData: LessonTypeDataType[] = [
       'You assess student understanding by creating questions and answers, adding an interactive element to reinforce key concepts.'
   }
 ];
+
+export const lessonIdKeys = [
+  CreationPageKey.Introduction,
+  CreationPageKey.IntendedLearners,
+  CreationPageKey.KnowledgeGain,
+  CreationPageKey.GetYourReady,
+  CreationPageKey.Curriculum
+];
diff --git a/app/[lang]/(web)/(learn page)/ugc/[courseId]/creation/constant/type.ts b/app/[lang]/(web)/(learn page)/ugc/[courseId]/creation/constant/type.ts
@@ -50,6 +50,8 @@ export enum CreationPageKey {
   Introduction = 'introduction',
   IntendedLearners = 'intendedLearners',
   KnowledgeGain = 'knowledgeGain',
+  GetYourReady = 'getYourReady',
+  Curriculum = 'curriculum',
   ChooseLesson = 'chooseLesson'
 }
 

diff --git a/app/[lang]/(web)/(subsite)/launch-pool/[id]/components/Content/OverView.tsx b/app/[lang]/(web)/(subsite)/launch-pool/[id]/components/Content/OverView.tsx
@@ -9,12 +9,132 @@ import { IoIosArrowForward } from 'react-icons/io';
 import { TransNs } from '@/i18n/config';
 import { useTranslation } from '@/i18n/client';
 import { LangContext } from '@/components/Provider/Lang';
+import { LaunchDetailContext, LaunchStatus } from '../../constants/type';
 
 interface OverViewProp {}
 
 const OverView: React.FC<OverViewProp> = () => {
+  const { launchInfo } = useContext(LaunchDetailContext);
   const { lang } = useContext(LangContext);
   const { t } = useTranslation(lang, TransNs.LAUNCH_POOL);
+
+  const statusRender = () => {
+    switch (launchInfo.status) {
+      case LaunchStatus.UN_FUELING:
+        return {
+          topTag: (
+            <div className="body-m-bold flex h-[34px] items-center rounded-[8px] border-2 border-neutral-medium-gray px-[12px] uppercase text-neutral-medium-gray">
+              {t('upComing')}
+            </div>
+          ),
+          time: (
+            <div className="flex [&>div]:flex-1">
+              <div className=""> {t('fuelingStartsIn')}</div>
+              <div className="text-neutral-black">5D 4H 48M 21MM</div>
+            </div>
+          ),
+          button: (
+            <Button
+              type="primary"
+              className="button-text-l h-[60px] w-full uppercase"
+            >
+              {t('joinWaitlist')}
+            </Button>
+          )
+        };
+      case LaunchStatus.FUELING:
+        return {
+          topTag: (
+            <div className="body-m-bold flex h-[34px] items-center rounded-[8px] border-2 border-status-success-dark px-[12px] uppercase text-status-success-dark">
+              {t('liveNow')}
+            </div>
+          ),
+          time: (
+            <div className="flex [&>div]:flex-1">
+              <div className=""> {t('fuelingClosesIn')}</div>
+              <div className="text-neutral-black">5D 4H 48M 21MM</div>
+            </div>
+          ),
+          button: !launchInfo.participate ? (
+            <Button
+              type="primary"
+              className="button-text-l h-[60px] w-full uppercase"
+            >
+              {t('participateNow')}
+            </Button>
+          ) : null
+        };
+      case LaunchStatus.ALLOCATIONING:
+        return {
+          topTag: (
+            <div className="body-m-bold flex h-[34px] items-center rounded-[8px] border-2 border-status-success-dark px-[12px] uppercase text-status-success-dark">
+              {t('allocating')}
+            </div>
+          ),
+          time: launchInfo.participate ? (
+            <div className="flex [&>div]:flex-1">
+              <div className=""> {t('allocationEndsin')}</div>
+              <div className="text-neutral-black">5D 4H 48M 21MM</div>
+            </div>
+          ) : (
+            <div className="flex [&>div]:flex-1">
+              <div className=""> {t('airdropClosesin')}</div>
+              <div className="text-neutral-black">5D 4H 48M 21MM</div>
+            </div>
+          ),
+          button: !launchInfo.participate ? (
+            <Button className="button-text-l h-[60px] w-full cursor-not-allowed bg-neutral-light-gray uppercase text-neutral-medium-gray">
+              {t('fuelingEnded')}
+            </Button>
+          ) : null
+        };
+      case LaunchStatus.AIRDROPING:
+        return {
+          topTag: (
+            <div className="body-m-bold flex h-[34px] items-center rounded-[8px] border-2 border-status-success-dark px-[12px] uppercase text-status-success-dark">
+              {t('airdrop')}
+            </div>
+          ),
+          time: (
+            <div className="flex [&>div]:flex-1">
+              <div className=""> {t('airdropClosesin')}</div>
+              <div className="text-neutral-black">5D 4H 48M 21MM</div>
+            </div>
+          ),
+          button: !launchInfo.participate ? (
+            <Button className="button-text-l h-[60px] w-full cursor-not-allowed bg-neutral-light-gray uppercase text-neutral-medium-gray">
+              {t('fuelingEnded')}
+            </Button>
+          ) : (
+            <Button
+              type="primary"
+              className="button-text-l h-[60px] w-full  uppercase "
+            >
+              {t('claimToken')}
+            </Button>
+          )
+        };
+      default:
+        return {
+          topTag: (
+            <div className="body-m-bold flex h-[34px] items-center rounded-[8px] border-2 border-neutral-rich-gray px-[12px] uppercase text-neutral-rich-gray">
+              {t('ended')}
+            </div>
+          ),
+          time: (
+            <div className="flex [&>div]:flex-1">
+              <div className=""> {t('airdropClosesin')}</div>
+              <div className="text-neutral-black">5D 4H 48M 21MM</div>
+            </div>
+          ),
+          button: (
+            <Button className="button-text-l h-[60px] w-full cursor-not-allowed bg-neutral-light-gray uppercase text-neutral-medium-gray">
+              {t('ended')}
+            </Button>
+          )
+        };
+    }
+  };
   return (
     <div className="flex gap-[40px]">
       <div className="flex-center w-[498px] rounded-[16px] border border-neutral-light-gray bg-neutral-white">
@@ -24,9 +144,7 @@ const OverView: React.FC<OverViewProp> = () => {
         <div className="">
           <div className="item-center flex justify-between">
             <Image src={HackLogo} alt="hack-logo" width={280}></Image>
-            <div className="body-m-bold flex h-[34px] items-center rounded-[8px] border-2 border-status-success-dark px-[12px] uppercase text-status-success-dark">
-              {t('liveNow')}
-            </div>
+            {statusRender().topTag}
           </div>
           <h1 className="body-l mt-[4px] text-neutral-off-black">
             {t('overviewDescription')}
@@ -37,13 +155,17 @@ const OverView: React.FC<OverViewProp> = () => {
           <div className="flex-1 ">
             <p> {t('totalParticipatedUsers')}</p>
             <p className="body-xl-bold mt-[4px] text-neutral-black">
-              {separationNumber(35120)}
+              {launchInfo.status === LaunchStatus.UN_FUELING
+                ? '??'
+                : separationNumber(35120)}
             </p>
           </div>
           <div className="flex-1 ">
             <p> {t('totalFuel')}</p>
             <p className="body-xl-bold mt-[4px] text-neutral-black">
-              {separationNumber(588496)}
+              {launchInfo.status === LaunchStatus.UN_FUELING
+                ? '??'
+                : separationNumber(35120)}
             </p>
           </div>
         </div>
@@ -53,10 +175,7 @@ const OverView: React.FC<OverViewProp> = () => {
             <div className=""> {t('projectToken')}</div>
             <div className="text-neutral-black">$HQT</div>
           </div>
-          <div className="flex [&>div]:flex-1">
-            <div className=""> {t('fuelingClosesIn')}</div>
-            <div className="text-neutral-black">5D 4H 48M 21MM</div>
-          </div>
+          {statusRender()?.time}
           <div className="flex [&>div]:flex-1">
             <div className=""> {t('totalAirdropAmount')}</div>
             <div className="text-neutral-black">{`${2}% / ${separationNumber(2000000)} $HQT`}</div>
@@ -69,23 +188,21 @@ const OverView: React.FC<OverViewProp> = () => {
             <div className=""> {t('blockchainNetwork')}</div>
             <div className="text-neutral-black">Manta Network</div>
           </div>
-          <div className="flex [&>div]:flex-1">
-            <div className=""> {t('yourFuel')}</div>
-            <div className="flex cursor-pointer items-center gap-[8px] text-neutral-off-black">
-              <div className="relative">
-                {t('checkYourFuelingBoard')}
-                <div className="absolute bottom-0 left-0 h-[2px] w-full bg-yellow-primary"></div>
+          {launchInfo.participate &&
+            launchInfo.status !== LaunchStatus.ENDED && (
+              <div className="flex [&>div]:flex-1">
+                <div className=""> {t('yourFuel')}</div>
+                <div className="flex cursor-pointer items-center gap-[8px] text-neutral-off-black">
+                  <div className="relative">
+                    {t('checkYourFuelingBoard')}
+                    <div className="absolute bottom-0 left-0 h-[2px] w-full bg-yellow-primary"></div>
+                  </div>
+                  <IoIosArrowForward size={18} />
+                </div>
               </div>
-              <IoIosArrowForward size={18} />
-            </div>
-          </div>
+            )}
         </div>
-        <Button
-          type="primary"
-          className="button-text-l h-[60px] w-full uppercase"
-        >
-          claim token
-        </Button>
+        {statusRender().button}
         <div className="my-[10px] h-[1px] w-full bg-neutral-light-gray"></div>
         <div className="body-m flex items-center text-neutral-medium-gray">
           <span className="flex-1 ">{t('links')}</span>