Feat✨: Added Load More button functionality to assigned bounties (#1119)

* Added Load More button functionality to user tickets Signed-off-by: Vividh Pandey <vividh.pandey.13@gmail.com> * Prettier fix Signed-off-by: Vividh Pandey <vividh.pandey.13@gmail.com> --------- Signed-off-by: Vividh Pandey <vividh.pandey.13@gmail.com>
stakwork · Dec 18, 2023 · 68a7029 · 68a7029
1 parent d276535
commit 68a7029
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 3 deletions.
diff --git a/frontend/app/src/people/widgetViews/UserTicketsView.tsx b/frontend/app/src/people/widgetViews/UserTicketsView.tsx
@@ -12,6 +12,7 @@ import history from '../../config/history';
 import { colors } from '../../config/colors';
 import WantedView from './WantedView';
 import DeleteTicketModal from './DeleteModal';
+import { LoadMoreContainer } from './WidgetSwitchViewer';
 
 const Container = styled.div`
   display: flex;
@@ -49,7 +50,13 @@ const UserTickets = () => {
   const { path, url } = useRouteMatch();
 
   const [userTickets, setUserTickets] = useState<any>([]);
-  const [currentItems] = useState<number>(10);
+  const [currentItems] = useState<number>(20);
+  const [visibleItems, setVisibleItems] = useState<number>(currentItems);
+
+  const loadMore = () => {
+    setVisibleItems((prevVisibleItems: number) => prevVisibleItems + currentItems);
+  };
+
   const [deletePayload, setDeletePayload] = useState<object>({});
   const [showDeleteModal, setShowDeleteModal] = useState<boolean>(false);
   const closeModal = () => setShowDeleteModal(false);
@@ -105,7 +112,7 @@ const UserTickets = () => {
 
   const listItems =
     userTickets && userTickets.length ? (
-      userTickets.slice(0, currentItems).map((item: any, i: number) => {
+      userTickets.slice(0, visibleItems).map((item: any, i: number) => {
         const person = main.people.find((p: any) => p.owner_pubkey === item.body.owner_id);
         const body = { ...item.body };
         // if this person has entries for this widget
@@ -144,6 +151,22 @@ const UserTickets = () => {
         </Switch>
       </Router>
       {listItems}
+      {userTickets.length > visibleItems && (
+        <LoadMoreContainer
+          color={color}
+          style={{
+            width: '100%',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            margin: '20px 0'
+          }}
+        >
+          <div className="LoadMoreButton" onClick={loadMore}>
+            Load More
+          </div>
+        </LoadMoreContainer>
+      )}
       <Spacer key={'spacer2'} />
       {showDeleteModal && (
         <DeleteTicketModal closeModal={closeModal} confirmDelete={confirmDelete} />

diff --git a/frontend/app/src/people/widgetViews/WidgetSwitchViewer.tsx b/frontend/app/src/people/widgetViews/WidgetSwitchViewer.tsx
@@ -37,7 +37,7 @@ const Panel = styled.a<PanelProps>`
   }
 `;
 
-const LoadMoreContainer = styled.div<PanelProps>`
+export const LoadMoreContainer = styled.div<PanelProps>`
   width: 100%;
   display: flex;
   justify-content: center;