Dogfooding Fixes: Microcredit

src/api/user.ts

@@ -116,20 +116,6 @@ export const userApi = emptySplitApi.injectEndpoints({
                 url: 'users'
             })
         }),
-        // Get notifications
-        getNotifications: builder.mutation<
-            Notification[],
-            { limit: number; offset: number }
-        >({
-            query: ({ limit, offset }) => ({
-                method: 'GET',
-                url: `users/notifications?${
-                    !!offset ? `&offset=${offset}` : ''
-                }${!!limit ? `&limit=${limit}` : ''}`
-            }),
-            transformResponse: (response: { data: Notification[] }) =>
-                response.data
-        }),
         // Get preSigned URL for image upload
         getPreSigned: builder.mutation<PreSigned, void>({
             query: (type) => ({
@@ -190,7 +176,6 @@ export const {
     useAnonymousReportMutation,
     useCreateUserMutation,
     useDeleteUserMutation,
-    useGetNotificationsMutation,
     useGetUserMutation,
     useGetUserByIdMutation,
     useRecoverAccountMutation,

src/components/FlexibleTab.tsx

@@ -9,11 +9,12 @@ export type TabItem = {
 
 type FlexibleTabProps = {
     tabs: TabItem[];
+    index?: number;
 };
 
-const FlexibleTab: React.FC<FlexibleTabProps> = ({ tabs }) => {
+const FlexibleTab: React.FC<FlexibleTabProps> = ({ tabs, index }) => {
     return (
-        <Tabs>
+        <Tabs defaultIndex={index}>
             <TabList>
                 {tabs.map((tab, index) => (
                     <Tab

src/components/Sidebar.tsx

@@ -14,11 +14,11 @@ import {
 import { formatAddress } from '../utils/formatAddress';
 import { getCookie, hasCookie, setCookie } from 'cookies-next';
 import { getImage } from '../utils/images';
-import { getNotifications } from '../state/slices/notifications';
 import { getUserMenu } from './UserMenu';
 import { getUserName } from '../utils/users';
 import { languagesOptions } from 'src/utils/languages';
 import { selectCurrentUser } from '../state/slices/auth';
+import { useNotifications } from 'src/hooks/useNotifications';
 import { usePrismicData } from '../libs/Prismic/components/PrismicDataProvider';
 import { useRouter } from 'next/router';
 import { useSelector } from 'react-redux';
@@ -246,9 +246,13 @@ const SidebarMobileActions = (props: { user?: User }) => {
 const Sidebar = () => {
     const { asPath, locale, push, replace } = useRouter();
     const { user } = useSelector(selectCurrentUser);
-    const { notifications } = useSelector(getNotifications);
     const { address } = useWallet();
 
+    const { notifications, mutate } = useNotifications([
+        `unreadOnly=true`,
+        `isWebApp=true`
+    ]);
+
     const [data, setData] = useState<MenusState | undefined>();
 
     const { userConfig, extractFromConfig } = usePrismicData();
@@ -296,13 +300,21 @@ const Sidebar = () => {
 
         const footerMenu = [...footerCommonMenu, ...footerUserMenu];
 
+        // Mutate Notifications
+        mutate();
+
         setData({
             commonMenu,
-            flags: notifications,
+            flags: [
+                {
+                    key: 'notifications',
+                    value: notifications?.count
+                }
+            ],
             footerMenu,
             menus
         });
-    }, [asPath, user, notifications, locale, address]);
+    }, [asPath, user, notifications, locale, address, mutate]);
 
     const footerMenu = () => {
         const userBeneficiary = user?.roles?.includes('beneficiary');

src/hooks/useNotifications.ts

@@ -20,7 +20,7 @@ export function useNotifications(filters?: any[]) {
         }).then((res) => res.json());
 
     const { data, mutate, error } = useSWR(
-        `/users/notifications/${
+        `/users/notifications?${
             !!filters?.length
                 ? filters?.map((filter: any) => filter).join('&')
                 : ''

src/modals/Signature.tsx

@@ -11,7 +11,7 @@ import { handleSignature } from 'src/helpers/handleSignature';
 import { useRouter } from 'next/router';
 import { useSignatures } from '@impact-market/utils/useSignatures';
 import Message from 'src/libs/Prismic/components/Message';
-import React from 'react';
+import React, { useState } from 'react';
 import String from '../libs/Prismic/components/String';
 import processTransactionError from 'src/utils/processTransactionError';
 import useWallet from 'src/hooks/useWallet';
@@ -21,17 +21,23 @@ const Signature = () => {
     const { disconnect } = useWallet();
     const { handleClose } = useModal();
     const router = useRouter();
+    const [isLoading, setIsLoading] = useState(false);
 
     const handleSignMessage = async () => {
         try {
+            setIsLoading(true);
+
             await handleSignature(signMessage, signTypedData);
+
+            setIsLoading(false);
             toast.success('Logged in successfully.');
             handleClose();
         } catch (error) {
             console.log(error);
             processTransactionError(error, 'global_signature');
             toast.error(<Message id="errorOccurred" />);
         }
+        setIsLoading(false);
     };
 
     const handleDisconnectClick = async () => {
@@ -51,7 +57,7 @@ const Signature = () => {
                 <Message g500 small id="validateSignature" />
                 <Box mt={1.25} flex style={{ gap: '1rem' }}>
                     <Button
-                        isLoading={false}
+                        isLoading={isLoading}
                         onClick={() => {
                             handleSignMessage();
                         }}

src/pages/_app.tsx

@@ -9,7 +9,6 @@ import {
 } from '@impact-market/ui';
 import { PrismicDataProvider } from '../libs/Prismic/components/PrismicDataProvider';
 import { Provider, useSelector } from 'react-redux';
-import { addNotification } from '../state/slices/notifications';
 import { getCookie, hasCookie } from 'cookies-next';
 import {
     selectCurrentUser,
@@ -20,7 +19,6 @@ import { setRates } from '../state/slices/rates';
 import { store } from '../state/store';
 import { useAccount } from 'wagmi';
 import { useGetExchangeRatesMutation } from '../api/generic';
-import { useNotifications } from 'src/hooks/useNotifications';
 import ErrorPage from 'next/error';
 import GoogleAnalytics from '../components/GoogleAnalytics';
 import React, { useEffect } from 'react';
@@ -71,26 +69,6 @@ const InnerApp = (props: AppProps) => {
         init();
     }, []);
 
-    const { notifications } = useNotifications([
-        `unreadOnly=true`,
-        `isWebApp=true`
-    ]);
-
-    useEffect(() => {
-        try {
-            store.dispatch(
-                addNotification({
-                    notification: {
-                        key: 'notifications',
-                        value: notifications?.rows || 0
-                    }
-                })
-            );
-        } catch (error) {
-            console.log(error);
-        }
-    }, [notifications]);
-
     const Content = Component as any;
 
     return (

src/state/store.ts

@@ -1,7 +1,6 @@
 import { emptySplitApi as api } from '../api';
 import { configureStore } from '@reduxjs/toolkit';
 import authReducer from './slices/auth';
-import notificationsReducer from './slices/notifications';
 import ratesReducer from './slices/rates';
 
 import learnAndEarnReduce from './slices/learnAndEarn';
@@ -14,7 +13,6 @@ export const store = configureStore({
     reducer: {
         auth: authReducer,
         learnAndEarn: learnAndEarnReduce,
-        notifications: notificationsReducer,
         rates: ratesReducer,
         [api.reducerPath]: api.reducer
     }

src/views/MicrocreditManager/ApproveRejectTab/BorrowersList.tsx

@@ -413,6 +413,14 @@ const getColumns = (props: any) => {
                             rejectLoan(auth, data?.application?.id, mutate),
                         title: rejectLoanText
                     },
+                    // {
+                    //     icon: 'bookOpen',
+                    //     onClick: () =>
+                    //         router.push(
+                    //             `/microcredit/form/${data?.application?.id}`
+                    //         ),
+                    //     title: 'Loan Application'
+                    // },
                     {
                         icon: 'user',
                         onClick: () => router.push(`/user/${data.address}`),

src/views/MicrocreditManager/ApproveRejectTab/index.tsx

@@ -204,9 +204,24 @@ const ApproveRejectTab: React.FC<{}> = () => {
         }
     ];
 
+    const tabsIndex = (() => {
+        switch (getByKey('status')) {
+            case '1':
+                return 1;
+            case '4':
+                return 2;
+            case '5':
+                return 3;
+            case '3':
+                return 4;
+            default:
+                return 0;
+        }
+    })();
+
     return (
         <Box>
-            <FlexibleTab tabs={tabs} />
+            <FlexibleTab tabs={tabs} index={tabsIndex} />
             {/* <Input
 
                 icon="search"

src/views/MicrocreditManager/RepaymentsTab/BorrowersList.tsx

@@ -210,15 +210,15 @@ const getColumns = () => {
                             fLayout="center start"
                             style={{ gap: '0.2rem' }}
                         >
-                            <ProgressBar progress={progress} w="100%" />
+                            <ProgressBar progress={progress || 0} w="100%" />
                             <Text
                                 g700
                                 style={{
                                     fontSize: '0.75rem',
                                     lineHeight: 'inherit'
                                 }}
                             >
-                                {parseInt(progress.toString(), 10)}%
+                                {parseInt(progress.toString(), 10) || 0}%
                             </Text>
                         </Box>
                     </>

src/views/MicrocreditManager/RepaymentsTab/index.tsx

@@ -31,6 +31,10 @@ const RepaymentsTab: React.FC = () => {
     ]);
     const { count: countOntrack } = useMicrocreditBorrowers(['filter=ontrack']);
 
+    const { count: countNotClaimed } = useMicrocreditBorrowers([
+        'filter=not-claimed'
+    ]);
+
     const tabs = [
         {
             number: countAll || 0,
@@ -53,12 +57,32 @@ const RepaymentsTab: React.FC = () => {
             number: countFullyRepaid || 0,
             onClick: () => update({ filter: 'repaid', page: 1 }),
             title: t('fullyRepaid')
+        },
+        {
+            number: countNotClaimed || 0,
+            onClick: () => update({ filter: 'not-claimed', page: 1 }),
+            title: 'Unclaimed'
         }
     ];
 
+    const tabsIndex = (() => {
+        switch (getByKey('filter')) {
+            case 'ontrack':
+                return 1;
+            case 'need-help':
+                return 2;
+            case 'repaid':
+                return 3;
+            case 'not-claimed':
+                return 4;
+            default:
+                return 0;
+        }
+    })();
+
     return (
         <Box>
-            <FlexibleTab tabs={tabs} />
+            <FlexibleTab tabs={tabs} index={tabsIndex} />
             {/* <Input
 
                 icon="search"

src/views/Notifications.tsx

@@ -11,8 +11,6 @@ import {
     ViewContainer
 } from '@impact-market/ui';
 import { dateHelpers } from '../helpers/dateHelpers';
-import { markAsRead } from '../state/slices/notifications';
-import { store } from '../state/store';
 import { useNotifications } from 'src/hooks/useNotifications';
 import { usePrismicData } from '../libs/Prismic/components/PrismicDataProvider';
 import { useRouter } from 'next/router';
@@ -32,7 +30,7 @@ const Notifications: React.FC<{ isLoading?: boolean }> = (props) => {
     const limit = 7;
     const [offset, setItemOffset] = useState(0);
 
-    const { notifications, loadingNotifications } = useNotifications([
+    const { notifications, loadingNotifications, mutate } = useNotifications([
         `limit=${limit}`,
         `offset=${offset}`,
         `isWebApp=true`
@@ -69,18 +67,13 @@ const Notifications: React.FC<{ isLoading?: boolean }> = (props) => {
                         body: { notifications: notificationsRead }
                     });
 
-                    store.dispatch(
-                        markAsRead({
-                            key: 'notifications',
-                            reduce: notificationsRead.length
-                        })
-                    );
+                    mutate();
                 }
             }
         };
 
         markedAsRead();
-    }, [offset, ready, changed, notifications]);
+    }, [offset, ready, changed, notifications, mutate]);
 
     // Pagination
     const handlePageClick = (event: any, direction?: number) => {