Feature created my campaigns tab (#1067)

* Saving files * Added MyCampaigns Tab feature * Fixed the whitespace and the translations * Fixed dublicate endpoints with different names * improved wording * hide my campaigns table if not in role Co-authored-by: quantum-grit <[email protected]>
podkrepi-bg · Oct 24, 2022 · 9146893 · 9146893
1 parent e2cd02d
commit 9146893
Show file tree

Hide file tree

Showing 13 changed files with 655 additions and 7 deletions.
diff --git a/public/locales/bg/profile.json b/public/locales/bg/profile.json
@@ -50,6 +50,12 @@
     "index": "История на сертификати",
     "title": "Онлайн дарения"
   },
+  "myCampaigns": {
+    "index": "Моите кампании",
+    "history": "Управление на моите кампании",
+    "noCampaigns": "Вие не сте в роля организатор, координатор или бенефицент към нито една кампания",
+    "donatedTo": "Кампании, в които съм дарил"
+  },
   "donationsContract": "Договор дарение",
   "certificates": "Сертификати",
   "birthdateModal": {

diff --git a/public/locales/en/profile.json b/public/locales/en/profile.json
@@ -43,6 +43,12 @@
     "index": "Certificate history",
     "title": "Online donations"
   },
+  "myCampaigns": {
+    "index": "My campaigns",
+    "history": "Manage my campaigns",
+    "noCampaigns": "You are not in organizer, coordinator or beneficiery role in any campaign",
+    "donatedTo": "Campaigns I donated to"
+  },
   "donationsContract": "Donation contract",
   "certificates": "Certificates",
   "birthdateModal": {

diff --git a/src/common/hooks/campaigns.ts b/src/common/hooks/campaigns.ts
@@ -24,6 +24,21 @@ export function useCampaignAdminList() {
   )
 }
 
+export const useGetUserCampaigns = () => {
+  const { data: session } = useSession()
+  return useQuery<AdminCampaignResponse[]>(
+    endpoints.campaign.getUserCamapaigns.url,
+    authQueryFnFactory<AdminCampaignResponse[]>(session?.accessToken),
+  )
+}
+
+export function useUserDonationsCampaigns() {
+  const { data: session } = useSession()
+  return useQuery<AdminCampaignResponse[]>(endpoints.campaign.getUserDonatedToCampaigns.url, {
+    queryFn: authQueryFnFactory(session?.accessToken),
+  })
+}
+
 export function useCampaignTypesList() {
   return useQuery<CampaignType[]>(endpoints.campaignTypes.listCampaignTypes.url)
 }

diff --git a/src/common/routes.ts b/src/common/routes.ts
@@ -57,6 +57,7 @@ export const routes = {
     personalInformation: '/profile/personal-information',
     certificates: '/profile/certificates',
     contractDonation: '/profile/contract-donation',
+    myCampaigns: '/profile/my-campaigns',
   },
   register: '/register',
   aboutProject: '/about-project',

diff --git a/src/components/auth/profile/MyCampaignsTab.tsx b/src/components/auth/profile/MyCampaignsTab.tsx
@@ -0,0 +1,67 @@
+import { styled } from '@mui/material/styles'
+import { Box, Typography } from '@mui/material'
+import React from 'react'
+import { useTranslation } from 'next-i18next'
+
+import ProfileTab from './ProfileTab'
+import { ProfileTabs } from './tabs'
+import MyCampaingsTable from './MyCampaignsTable'
+import MyDonatedToCampaignTable from './MyDonatedToCampaignsTable'
+
+const PREFIX = 'MyCampaignsTab'
+
+const classes = {
+  h3: `${PREFIX}-h3`,
+  thinFont: `${PREFIX}-thinFont`,
+  smallText: `${PREFIX}-smallText`,
+  boxTitle: `${PREFIX}-boxTitle`,
+}
+
+const Root = styled('div')(({ theme }) => ({
+  [`& .${classes.h3}`]: {
+    fontStyle: 'normal',
+    fontWeight: '500',
+    fontSize: '25px',
+    lineHeight: '116.7%',
+    margin: '0',
+  },
+  [`& .${classes.thinFont}`]: {
+    fontStyle: 'normal',
+    fontWeight: 400,
+    fontSize: '24px',
+    lineHeight: '123.5%',
+    letterSpacing: '0.25px',
+    color: '#000000',
+    margin: 0,
+  },
+  [`& .${classes.smallText}`]: {
+    fontFamily: 'Lato, sans-serif',
+    fontStyle: 'normal',
+    fontWeight: '500',
+    fontSize: '15px',
+    lineHeight: '160%',
+    letterSpacing: '0.15px',
+  },
+  [`& .${classes.boxTitle}`]: {
+    backgroundColor: 'white',
+    padding: theme.spacing(3, 7),
+    paddingBottom: theme.spacing(3),
+    marginTop: theme.spacing(3),
+    boxShadow: theme.shadows[3],
+  },
+}))
+
+export default function MyCampaignsTab() {
+  const { t } = useTranslation()
+  return (
+    <Root>
+      <MyCampaingsTable />
+      <Box className={classes.boxTitle}>
+        <Typography className={classes.h3}>{t('profile:myCampaigns.donatedTo')}</Typography>
+      </Box>
+      <ProfileTab name={ProfileTabs.myCampaigns}>
+        <MyDonatedToCampaignTable />
+      </ProfileTab>
+    </Root>
+  )
+}