feat: fix load more for topics table

stakwork · Dec 14, 2023 · 3278f7f · 3278f7f
1 parent ce44d21
commit 3278f7f
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 45 deletions.
diff --git a/src/components/App/Helper/index.tsx b/src/components/App/Helper/index.tsx
@@ -1,6 +1,4 @@
 import { useMemo, useState } from 'react'
-import { HelperContent } from './HelperContent'
-import { OpenHelperBtn } from './OpenHelperBtn'
 import { HelperContext } from './context'
 
 export const Helper = () => {
@@ -10,8 +8,8 @@ export const Helper = () => {
 
   return (
     <HelperContext.Provider value={contextValue}>
-      <OpenHelperBtn />
-      <HelperContent />
+      {/* <OpenHelperBtn /> */}
+      {/* <HelperContent /> */}
     </HelperContext.Provider>
   )
 }
diff --git a/src/components/App/SideBar/index.tsx b/src/components/App/SideBar/index.tsx
@@ -14,7 +14,6 @@ import { FetchLoaderText } from '~/components/common/Loader'
 import { useAppStore } from '~/stores/useAppStore'
 import { useDataStore, useFilteredNodes, useSelectedNode } from '~/stores/useDataStore'
 import { colors } from '~/utils/colors'
-import { TeachMe } from '../Helper/TeachMe'
 import { LatestView } from './Latest'
 import { EpisodeSkeleton } from './Relevance/EpisodeSkeleton'
 import { SideBarSubView } from './SidebarSubView'
@@ -104,7 +103,7 @@ const Content = forwardRef<HTMLDivElement, ContentProp>(({ onSubmit, subViewOpen
                   <span className="label"> results</span>
                 </div>
                 <div className="right" style={{ alignItems: 'center' }}>
-                  <TeachMe />
+                  {/* <TeachMe /> */}
                   <SelectWithPopover />
                 </div>
               </>

diff --git a/src/components/SourcesTableModal/SourcesView/Topics/Table/index.tsx b/src/components/SourcesTableModal/SourcesView/Topics/Table/index.tsx
@@ -42,42 +42,51 @@ export const Table: React.FC<TopicTableProps> = ({ showMuted, onTopicEdit }) =>
     </Flex>
   ) : (
     <>
-      <MaterialTable component="table">
-        <StyledTableHead>
-          <TableRow component="tr">
-            <StyledTableCell className="empty" />
-            <StyledTableCell>Type</StyledTableCell>
-            <StyledTableCell>Edge Count</StyledTableCell>
-            <StyledTableCell>Edge list</StyledTableCell>
-            <StyledTableCell>Date</StyledTableCell>
-            <StyledTableCell>{showMuted ? 'Unmute' : 'Mute'}</StyledTableCell>
-            <StyledTableCell />
-          </TableRow>
-        </StyledTableHead>
-        {data && (
-          <tbody>
-            {ids?.map((i: string) => (
-              <TopicRow key={i} onClick={handleClick} topic={data[i]} />
-            ))}
-          </tbody>
-        )}
-      </MaterialTable>
-      {selectedRefId ? (
-        <PopoverWrapper
-          anchorEl={anchorEl}
-          anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-          id={id}
-          onClose={handleClose}
-          open={open}
-          transformOrigin={{ vertical: 'top', horizontal: 'right' }}
-        >
-          <PopoverOption onClick={() => handlePopoverAction('editTopic')}>Rename</PopoverOption>
-          {!data[selectedRefId].edgeList.includes(IS_ALIAS) ? (
-            <PopoverOption onClick={() => handlePopoverAction('mergeTopic')}>Merge</PopoverOption>
+      {!Object.keys(data).length ? (
+        <Flex>
+          <Text>There is not any results for selected filters</Text>
+          <FilterOffIcon />
+        </Flex>
+      ) : (
+        <>
+          <MaterialTable component="table">
+            <StyledTableHead>
+              <TableRow component="tr">
+                <StyledTableCell className="empty" />
+                <StyledTableCell>Type</StyledTableCell>
+                <StyledTableCell>Edge Count</StyledTableCell>
+                <StyledTableCell>Edge list</StyledTableCell>
+                <StyledTableCell>Date</StyledTableCell>
+                <StyledTableCell>{showMuted ? 'Unmute' : 'Mute'}</StyledTableCell>
+                <StyledTableCell />
+              </TableRow>
+            </StyledTableHead>
+            {data && (
+              <tbody>
+                {ids?.map((i: string) => (
+                  <TopicRow key={i} onClick={handleClick} topic={data[i]} />
+                ))}
+              </tbody>
+            )}
+          </MaterialTable>
+          {selectedRefId ? (
+            <PopoverWrapper
+              anchorEl={anchorEl}
+              anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+              id={id}
+              onClose={handleClose}
+              open={open}
+              transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+            >
+              <PopoverOption onClick={() => handlePopoverAction('editTopic')}>Rename</PopoverOption>
+              {!data[selectedRefId].edgeList.includes(IS_ALIAS) ? (
+                <PopoverOption onClick={() => handlePopoverAction('mergeTopic')}>Merge</PopoverOption>
+              ) : null}
+              <PopoverOption onClick={() => handlePopoverAction('addEdge')}>Add edge</PopoverOption>
+            </PopoverWrapper>
           ) : null}
-          <PopoverOption onClick={() => handlePopoverAction('addEdge')}>Add edge</PopoverOption>
-        </PopoverWrapper>
-      ) : null}
+        </>
+      )}
     </>
   )
 }

diff --git a/src/components/SourcesTableModal/SourcesView/Topics/index.tsx b/src/components/SourcesTableModal/SourcesView/Topics/index.tsx
@@ -118,7 +118,7 @@ export const TopicSources = () => {
           <Filter currentFilter={filters.sortBy} onChangeFilter={handleFilterChange} />
         </ActionsWrapper>
 
-        <TableWrapper align="center" justify={loading ? 'center' : 'flex-start'}>
+        <TableWrapper align="center" justify={loading && !data ? 'center' : 'flex-start'}>
           {loading && !data ? (
             <ClipLoader color={colors.white} />
           ) : (

diff --git a/src/stores/useTopicsStore/index.ts b/src/stores/useTopicsStore/index.ts
@@ -32,15 +32,15 @@ export const useTopicsStore = create<TopicsStore>((set, get) => ({
 
     const payload = prepareTopicFilters(filters)
 
-    if (filters.page < 1) {
+    if (filters.page === 0) {
       set({ data: null, ids: [], total: 0 })
     }
 
     const responseData: FetchTopicResponse = await getTopicsData(payload)
 
     // Instead of replacing the data, append new data to existing data
-    const newData: Record<string, Topic> = { ...(data || {}) }
-    const newIds: string[] = [...ids]
+    const newData: Record<string, Topic> = filters.page === 0 ? {} : { ...(data || {}) }
+    const newIds: string[] = filters.page === 0 ? [] : [...ids]
 
     responseData.data.forEach((topic) => {
       newData[topic.ref_id] = topic