Feature/20230602 julian

src/components/date_picker/date_picker.tsx

@@ -78,19 +78,27 @@ const DatePicker = ({date, minDate, maxDate, setDate}: IDatePickerProps) => {
     let dates: Dates[] = [];
     for (let i = 0; i < dateLength; i++) {
       const dateTime = new Date(`${year}/${month + 1}/${i + 1}`).getTime();
+
+      const maxTime = maxDate
+        ? new Date(maxDate.getFullYear(), maxDate.getMonth() + 1, maxDate.getDate()).getTime()
+        : null;
+      const minTime = minDate
+        ? new Date(minDate.getFullYear(), minDate.getMonth() + 1, minDate.getDate()).getTime()
+        : null;
+
       const date = {
         date: i + 1,
         time: dateTime,
-        disable: minDate
-          ? dateTime < minDate.getTime()
+        disable: minTime
+          ? dateTime < minTime
             ? true
-            : maxDate
-            ? dateTime > maxDate.getTime()
+            : maxTime
+            ? dateTime > maxTime
               ? true
               : false
             : false
-          : maxDate
-          ? dateTime > maxDate.getTime()
+          : maxTime
+          ? dateTime > maxTime
             ? true
             : false
           : false,
@@ -128,7 +136,7 @@ const DatePicker = ({date, minDate, maxDate, setDate}: IDatePickerProps) => {
   const selectDate = useCallback(
     (el: Dates) => {
       let newDate = new Date(el.time);
-      newDate = new Date(`${newDate.getFullYear()}/${newDate.getMonth() + 1}/${newDate.getDate()}`);
+      newDate = new Date(`${newDate.getFullYear()}/${newDate.getMonth()}/${newDate.getDate()}`);
       setDate(newDate);
       setOpenDates(false);
     },
@@ -141,7 +149,7 @@ const DatePicker = ({date, minDate, maxDate, setDate}: IDatePickerProps) => {
 
   const formatDate = (obj: Date) => {
     const day = obj.getDate();
-    const month = obj.getMonth();
+    const month = obj.getMonth() + 1;
     const formatDay = day < 10 ? '0' + day : `${day}`;
     const formatMonth = month < 10 ? '0' + month : `${month}`;
     const year = obj.getFullYear();
@@ -182,7 +190,6 @@ const DatePicker = ({date, minDate, maxDate, setDate}: IDatePickerProps) => {
             ></div>
           </div>
         </div>
-
         <div className={`my-4 ${formatGridStyle} text-center text-xxs text-lightGray`}>
           {displayWeek}
         </div>

src/components/i18n/i18n.tsx

@@ -1,29 +1,22 @@
-import {Dispatch, SetStateAction, useState} from 'react';
 import {useRouter} from 'next/router';
 import Link from 'next/link';
 import useOuterClick from '../../lib/hooks/use_outer_click';
 import {useTranslation} from 'next-i18next';
 
 type TranslateFunction = (s: string) => string;
-interface II18nParams {
-  langIsOpen?: boolean;
-  setLangIsOpen?: Dispatch<SetStateAction<boolean>>;
-}
 
-const I18n = ({langIsOpen, setLangIsOpen}: II18nParams) => {
+const I18n = () => {
   const {t}: {t: TranslateFunction} = useTranslation('common');
-  const [openMenu, setOpenMenu] =
-    typeof setLangIsOpen !== 'function' ? useState(false) : [langIsOpen, setLangIsOpen];
 
-  const {locale, locales, defaultLocale, asPath} = useRouter();
+  const {asPath} = useRouter();
   const {
     targetRef: globalRef,
-    componentVisible,
-    setComponentVisible,
+    componentVisible: globalVisible,
+    setComponentVisible: setGlobalVisible,
   } = useOuterClick<HTMLDivElement>(false);
 
   const clickHandler = () => {
-    setOpenMenu(!openMenu);
+    setGlobalVisible(!globalVisible);
   };
 
   const internationalizationList = [
@@ -32,11 +25,13 @@ const I18n = ({langIsOpen, setLangIsOpen}: II18nParams) => {
     {label: '简体中文', value: 'cn'},
   ];
 
-  const displayedDesktopMenu = openMenu ? (
+  const displayedDesktopMenu = (
     <div className="hidden lg:flex">
       <div
         id="i18nDropdown"
-        className="absolute top-16 right-40 z-10 w-150px divide-y divide-lightGray rounded-none bg-darkGray shadow"
+        className={`absolute right-32 top-16 z-10 w-150px ${
+          globalVisible ? 'visible opacity-100' : 'invisible opacity-0'
+        } divide-y divide-lightGray rounded-none bg-darkGray shadow transition-all duration-300`}
       >
         <ul className="mx-3 py-1 pb-3 text-base text-gray-200" aria-labelledby="i18nButton">
           {internationalizationList.map((item, index) => (
@@ -53,13 +48,17 @@ const I18n = ({langIsOpen, setLangIsOpen}: II18nParams) => {
         </ul>
       </div>
     </div>
-  ) : null;
+  );
 
-  const displayedMobileMenu = openMenu ? (
-    <div className="opacity-100 transition-opacity lg:hidden">
+  const displayedMobileMenu = (
+    <div
+      className={`transition-all duration-300 ${
+        globalVisible ? 'opacity-100' : 'opacity-0'
+      } lg:hidden`}
+    >
       <div
         id="i18nDropdown"
-        className="absolute top-28 left-0 z-10 h-full w-screen bg-darkGray shadow"
+        className="absolute left-0 top-28 z-10 h-full w-screen bg-darkGray shadow"
       >
         <ul className="text-center text-base dark:text-gray-200" aria-labelledby="i18nButton">
           {internationalizationList.map((item, index) => (
@@ -76,8 +75,6 @@ const I18n = ({langIsOpen, setLangIsOpen}: II18nParams) => {
         </ul>
       </div>
     </div>
-  ) : (
-    <div className="invisible opacity-0 transition-opacity"></div>
   );
 
   const displayedI18n = (

src/components/leaderboard_tab/leaderboard_tab.tsx

@@ -4,7 +4,6 @@ import useWindowSize from '../../lib/hooks/use_window_size';
 import UserPersonalRanking from '../user_personal_ranking/user_personal_ranking';
 import Skeleton from 'react-loading-skeleton';
 import {GlobalContext} from '../../contexts/global_context';
-import {UserContext} from '../../contexts/user_context';
 import {TypeOfPnLColor, DEFAULT_USER_AVATAR, SKELETON_DISPLAY_TIME} from '../../constants/display';
 import {unitAsset} from '../../constants/config';
 import {IPnL} from '../../interfaces/tidebit_defi_background/pnl';
@@ -43,7 +42,6 @@ const LeaderboardTab = ({timeSpan, setTimeSpan, rankings}: LeaderboardTabProps)
   const [isLoading, setIsLoading] = useState(true);
   const windowSize = useWindowSize();
   const globalCtx = useContext(GlobalContext);
-  const userCtx = useContext(UserContext);
 
   const podiumWidth =
     windowSize.width > DEFAULT_PODIUM_WIDTH ? windowSize.width : DEFAULT_PODIUM_WIDTH;

src/components/nav_bar_mobile/nav_bar_mobile.tsx

@@ -173,7 +173,7 @@ const NavBarMobile = () => {
               </div>
               <div className="flex items-center justify-start px-3">
                 <div className="px-3 py-5">
-                  <I18n langIsOpen={langIsOpen} setLangIsOpen={setLangIsOpen} />
+                  <I18n /* langIsOpen={langIsOpen} setLangIsOpen={setLangIsOpen} */ />
                 </div>
               </div>
               <span className={`${dividerInsideMobileNavBar}`}></span>