[FIX] Some react render issues

packages/react-app/src/Routes.tsx

@@ -6,10 +6,10 @@ import { ENUM_PAGES } from './constants';
 export default function Routes() {
   return (
     <Switch>
-      <Redirect exact from="/" to="/home" />
       <Redirect exact from={`/${ENUM_PAGES.List}`} to="/home" />
       <Route path="/home" component={QuestList} />
       <Route path={`/${ENUM_PAGES.Detail}`} component={QuestDetail} />
+      <Redirect to="/home" />
     </Switch>
   );
 }

packages/react-app/src/app.tsx

@@ -1,10 +1,8 @@
 /* eslint-disable no-underscore-dangle */
 import { Main } from '@1hive/1hive-ui';
-import { useEffect, useState } from 'react';
 import { hot } from 'react-hot-loader/root';
 import { HashRouter } from 'react-router-dom';
 import styled from 'styled-components';
-import MainView from './components/main-view';
 import ErrorBoundary from './components/utils/error-boundary';
 import { DEFAULT_THEME } from './constants';
 import { FilterContextProvider } from './contexts/filter.context';
@@ -15,10 +13,9 @@ import { WalletProvider } from './contexts/wallet.context';
 import Routes from './Routes';
 import background from './assets/background.svg';
 import backgroundMotif from './assets/background-motif.svg';
-import { customDarkTheme } from './styles/dark-theme';
-import { customLightTheme } from './styles/light-theme';
 import { isDarkTheme } from './utils/style.util';
 import { ModalContextProvider } from './contexts/modal-context';
+import { useThemeContext } from './contexts/theme.context';
 
 // #region StyledComponents
 
@@ -40,19 +37,7 @@ const AppStyled = styled.div`
 // #endregion
 
 function App() {
-  const [currentTheme, setCurrentTheme] = useState<any>(undefined);
-
-  useEffect(() => {
-    let themeName = localStorage.getItem('forcetheme');
-    if (!themeName) themeName = DEFAULT_THEME;
-    setCurrentTheme(themeName === 'dark' ? customDarkTheme : customLightTheme);
-  }, []);
-
-  const toggleTheme = () => {
-    const newTheme = currentTheme._appearance === 'dark' ? customLightTheme : customDarkTheme;
-    setCurrentTheme(newTheme);
-    localStorage.setItem('theme', newTheme._appearance);
-  };
+  const { currentTheme } = useThemeContext();
 
   return (
     <AppStyled theme={currentTheme}>
@@ -70,9 +55,7 @@ function App() {
                   >
                     <HashRouter>
                       <ErrorBoundary>
-                        <MainView toggleTheme={toggleTheme}>
-                          <Routes />
-                        </MainView>
+                        <Routes />
                       </ErrorBoundary>
                     </HashRouter>
                   </Main>

packages/react-app/src/components/dashboard.tsx

@@ -41,7 +41,15 @@ export default function Dashboard() {
   const theme = useTheme();
   const [dashboardModel, setDashboardModel] = useState<DashboardModel>();
   useEffect(() => {
-    getDashboardInfo().then(setDashboardModel);
+    let isSubscribed = true;
+    getDashboardInfo().then((innerDashboardModel) => {
+      if (isSubscribed) {
+        setDashboardModel(innerDashboardModel);
+      }
+    });
+    return () => {
+      isSubscribed = false;
+    };
   }, []);
 
   return (

packages/react-app/src/components/main-view.tsx

@@ -8,6 +8,7 @@ import { ENUM_PAGES } from 'src/constants';
 import { usePageContext } from 'src/contexts/page.context';
 import Piggy from 'src/assets/piggy';
 import { GUpx } from 'src/utils/style.util';
+import Skeleton from 'react-loading-skeleton';
 import Header from './header';
 import Footer from './footer';
 import { Filter } from './filter';
@@ -113,8 +114,8 @@ function MainView({ children, toggleTheme }: Props) {
             {page === ENUM_PAGES.List && sticky && <Filter compact />}
           </Header>
         </HeaderWrapperStyled>
-
-        {page === ENUM_PAGES.List ? (
+        {page === undefined && <Skeleton /> /* TODO Put some spinner here}  */}
+        {page === ENUM_PAGES.List && (
           <ContentWrapperStyled>
             <LineStyled>
               <Dashboard />
@@ -125,9 +126,8 @@ function MainView({ children, toggleTheme }: Props) {
             </FilterWrapperStyled>
             {children}
           </ContentWrapperStyled>
-        ) : (
-          children
         )}
+        {page === ENUM_PAGES.Detail && children}
         <Footer />
       </ScrollViewStyled>
       {scrollTopState > 0 && <BackToTop />}

packages/react-app/src/components/modals/challenge-modal.tsx

@@ -296,6 +296,7 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop
       }
       buttons={[
         <WalletBallance
+          key="WalletBallance-1"
           askedTokenAmount={
             isFeeDepositSameToken && challengeFee
               ? {
@@ -307,7 +308,11 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop
           setIsEnoughBalance={setIsEnoughBalance}
         />,
         challengeFee && !isFeeDepositSameToken && (
-          <WalletBallance askedTokenAmount={challengeFee} setIsEnoughBalance={setIsEnoughBalance} />
+          <WalletBallance
+            key="WalletBallance-2"
+            askedTokenAmount={challengeFee}
+            setIsEnoughBalance={setIsEnoughBalance}
+          />
         ),
         <AmountFieldInput
           key="challengeDeposit"

packages/react-app/src/components/modals/fund-modal.tsx

@@ -139,11 +139,13 @@ export default function FundModal({ quest, onClose = noop }: Props) {
           buttons={[
             quest.rewardToken && (
               <WalletBallance
+                key="fundAmount"
                 askedTokenAmount={values.fundAmount}
                 setIsEnoughBalance={setIsEnoughBalance}
               />
             ),
             <Button
+              key="buttonFund"
               icon={<GiTwoCoins />}
               type="submit"
               form="form-fund"

packages/react-app/src/components/modals/schedule-claim-modal.tsx

@@ -203,7 +203,11 @@ export default function ScheduleClaimModal({
         />
       }
       buttons={[
-        <WalletBallance askedTokenAmount={claimDeposit} setIsEnoughBalance={setIsEnoughBalance} />,
+        <WalletBallance
+          key="WalletBallance-claimDeposit"
+          askedTokenAmount={claimDeposit}
+          setIsEnoughBalance={setIsEnoughBalance}
+        />,
         <AmountFieldInputFormik
           key="claimDeposit"
           id="claimDeposit"

packages/react-app/src/components/quest.tsx

@@ -150,6 +150,8 @@ export default function Quest({
   const [challengeDeposit, setChallengeDeposit] = useState<TokenAmountModel | null>();
   const [twoCol, setTwoCol] = useState(true);
 
+  let isSubscribed = true;
+
   useEffect(() => {
     setTwoCol(vw >= BREAKPOINTS.large);
   }, [vw]);
@@ -181,12 +183,20 @@ export default function Quest({
       }
     };
 
-    if (!questData.rewardToken) setBounty(null);
-    else if (questData.address) fetchBalanceOfQuest(questData.address, questData.rewardToken);
+    if (!questData.rewardToken) {
+      setBounty(null);
+    } else if (questData.address) {
+      fetchBalanceOfQuest(questData.address, questData.rewardToken);
+    }
 
     if (questMode === ENUM_QUEST_VIEW_MODE.ReadDetail) {
       getClaimDeposit();
     }
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      isSubscribed = false;
+    };
   }, [questMode, questData, walletAddress]);
 
   const onQuestSubmit = async (values: QuestModel, setSubmitting: Function) => {
@@ -266,9 +276,11 @@ export default function Quest({
                     : ENUM_TRANSACTION_STATUS.Failed,
                 },
             );
-            if (!txReceiptFundQuest?.status || !createdQuestAddress)
+            if (!txReceiptFundQuest?.status || !createdQuestAddress) {
               throw new Error('Failed to create quest');
-            else onSave(createdQuestAddress);
+            } else {
+              onSave(createdQuestAddress);
+            }
             fetchBalanceOfQuest(createdQuestAddress, values.bounty.token);
           }
         }
@@ -291,9 +303,11 @@ export default function Quest({
     if (!questData) return;
     QuestService.getBalanceOf(token, address)
       .then((result) => {
-        questData.bounty = result ?? undefined;
-        processQuestState(questData);
-        setBounty(result);
+        if (isSubscribed) {
+          questData.bounty = result ?? undefined;
+          processQuestState(questData);
+          setBounty(result);
+        }
       })
       .catch((err) => {
         Logger.exception(err);
@@ -316,6 +330,7 @@ export default function Quest({
       }
     }, 500);
   };
+
   const refresh = (data?: QuestModel) => {
     if (data) {
       setQuestData?.(data);

packages/react-app/src/components/views/quest-detail.tsx

@@ -7,7 +7,10 @@ import { fetchQuest } from 'src/services/quest.service';
 import { useToast } from '@1hive/1hive-ui';
 import styled from 'styled-components';
 import { GUpx } from 'src/utils/style.util';
+import { Logger } from 'src/utils/logger';
+import { useToggleTheme } from 'src/hooks/use-toggle-theme';
 import Quest from '../quest';
+import MainView from '../main-view';
 
 const QuestDetailWrapperStyled = styled.div`
   padding: ${GUpx(6)};
@@ -21,27 +24,37 @@ export default function QuestDetail() {
   const toast = useToast();
   const [quest, setQuest] = useState<QuestModel | undefined>(undefined);
   const [a, setA] = useState<boolean>();
+  const { toggleTheme } = useToggleTheme();
 
   useEffect(() => {
+    let isSubscribed = true;
+    Logger.debug('quest detail');
     setPage(ENUM_PAGES.Detail);
     const fetchQuestAsync = async (questAddress: string) => {
       const questResult = await fetchQuest(questAddress);
-      if (!questResult) toast('Failed to get quest, verify address');
-      else setQuest(questResult);
-      setA(true);
+      if (isSubscribed) {
+        if (!questResult) toast('Failed to get quest, verify address');
+        else setQuest(questResult);
+        setA(true);
+      }
     };
     if (id) fetchQuestAsync(id);
+    return () => {
+      isSubscribed = false;
+    };
   }, [id]);
 
   return (
-    <QuestDetailWrapperStyled>
-      {a && (
-        <Quest
-          dataState={{ questData: quest }}
-          questMode={ENUM_QUEST_VIEW_MODE.ReadDetail}
-          isLoading={!quest}
-        />
-      )}
-    </QuestDetailWrapperStyled>
+    <MainView toggleTheme={toggleTheme}>
+      <QuestDetailWrapperStyled>
+        {a && (
+          <Quest
+            dataState={{ questData: quest }}
+            questMode={ENUM_QUEST_VIEW_MODE.ReadDetail}
+            isLoading={!quest}
+          />
+        )}
+      </QuestDetailWrapperStyled>
+    </MainView>
   );
 }

packages/react-app/src/components/views/quest-list.tsx

@@ -17,8 +17,10 @@ import { usePageContext } from 'src/contexts/page.context';
 import * as QuestService from 'src/services/quest.service';
 import { useQuestsContext } from 'src/contexts/quests.context';
 import styled from 'styled-components';
+import { useToggleTheme } from 'src/hooks/use-toggle-theme';
 import { useFilterContext } from '../../contexts/filter.context';
 import { Outset } from '../utils/spacer-util';
+import MainView from '../main-view';
 
 const EmptyStateCardStyled = styled(EmptyStateCard)`
   width: 100%;
@@ -47,8 +49,10 @@ export default function QuestList() {
   const [hasMore, setHasMore] = useState(true);
   const { filter, refreshed, setFilter } = useFilterContext();
   const { newQuest } = useQuestsContext();
+  const { toggleTheme } = useToggleTheme();
 
   const { setPage } = usePageContext();
+
   useEffect(() => setPage(ENUM_PAGES.List), [setPage]);
 
   useEffect(() => {
@@ -96,43 +100,45 @@ export default function QuestList() {
   );
 
   return (
-    <Outset gu64 horizontal>
-      <InfiniteScroll
-        loader={<></>}
-        dataLength={quests.length}
-        next={loadMore}
-        hasMore={hasMore}
-        endMessage={
-          quests.length ? (
-            <Outset gu16 className="center">
-              <b>No more quests found</b>
-            </Outset>
-          ) : (
-            <Outset gu64 className="flex-center wide">
-              <EmptyStateCardStyled
-                text="No quests found"
-                action={<Button onClick={() => setFilter(DEFAULT_FILTER)} label="Reset filter" />}
-              />
-            </Outset>
-          )
-        }
-        refreshFunction={refresh}
-        pullDownToRefresh={isMobile}
-        pullDownToRefreshThreshold={50}
-        pullDownToRefreshContent={<h3 className="center">&#8595; Pull down to refresh</h3>}
-        releaseToRefreshContent={<h3 className="center">&#8593; Release to refresh</h3>}
-        scrollableTarget="scroll-view"
-        scrollThreshold="120px"
-      >
-        <div>
-          {quests.map((x: QuestModel) => (
-            <Outset gu16 key={x.address}>
-              <Quest questMode={ENUM_QUEST_VIEW_MODE.ReadSummary} dataState={{ questData: x }} />
-            </Outset>
-          ))}
-          {isLoading && skeletonQuests}
-        </div>
-      </InfiniteScroll>
-    </Outset>
+    <MainView toggleTheme={toggleTheme}>
+      <Outset gu64 horizontal>
+        <InfiniteScroll
+          loader={<></>}
+          dataLength={quests.length}
+          next={loadMore}
+          hasMore={hasMore}
+          endMessage={
+            quests.length ? (
+              <Outset gu16 className="center">
+                <b>No more quests found</b>
+              </Outset>
+            ) : (
+              <Outset gu64 className="flex-center wide">
+                <EmptyStateCardStyled
+                  text="No quests found"
+                  action={<Button onClick={() => setFilter(DEFAULT_FILTER)} label="Reset filter" />}
+                />
+              </Outset>
+            )
+          }
+          refreshFunction={refresh}
+          pullDownToRefresh={isMobile}
+          pullDownToRefreshThreshold={50}
+          pullDownToRefreshContent={<h3 className="center">&#8595; Pull down to refresh</h3>}
+          releaseToRefreshContent={<h3 className="center">&#8593; Release to refresh</h3>}
+          scrollableTarget="scroll-view"
+          scrollThreshold="120px"
+        >
+          <div>
+            {quests.map((x: QuestModel) => (
+              <Outset gu16 key={x.address}>
+                <Quest questMode={ENUM_QUEST_VIEW_MODE.ReadSummary} dataState={{ questData: x }} />
+              </Outset>
+            ))}
+            {isLoading && skeletonQuests}
+          </div>
+        </InfiniteScroll>
+      </Outset>
+    </MainView>
   );
 }