Skip to content

Commit

Permalink
Merge pull request #201 from chain4travel/fix-back-button-partners
Browse files Browse the repository at this point in the history 
Fix back button partners
  • Loading branch information
@aeddaqqa
aeddaqqa authored Apr 8, 2024
2 parents 179c997 + 80f82fd commit bd4225b
Show file tree
Hide file tree
Showing 7 changed files with 82 additions and 70 deletions.
15 changes: 12 additions & 3 deletions src/layout/PartnersLayout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { Box, Toolbar } from '@mui/material'

import Links from '../views/settings/Links'
import { Outlet } from 'react-router'
import React from 'react'
import { Outlet } from 'react-router'
import Links from '../views/settings/Links'

const PartnersLayout = () => {
return (
Expand Down Expand Up @@ -34,7 +34,16 @@ const PartnersLayout = () => {
>
<Links />
</Toolbar>
<Outlet />
<Box
sx={{
mt: '5rem',
height: '100%',
width: '100%',
maxWidth: theme => theme.customWidth.layoutMaxWitdh,
}}
>
<Outlet />
</Box>
</Box>
)
}
Expand Down
2 changes: 2 additions & 0 deletions src/layout/RoutesSuite.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import LoginPage from '../views/login/LoginPage'
import Partners from '../views/partners'
import CreatedOffers from '../views/partners/CreatedOffers'
import Foundation from '../views/partners/Foundation'
import Partner from '../views/partners/Partner'
import MultisigWallet from '../views/settings/MultisigWallet'
import Settings from '../views/settings/index'
import Wallet from '../views/wallet/WalletApp'
Expand Down Expand Up @@ -107,6 +108,7 @@ export default function RoutesSuite() {
</Route>
<Route path="/partners" element={<PartnersLayout />}>
<Route index element={<Partners />} />
<Route path=":partnerID" element={<Partner />}></Route>
</Route>
<Route path="/login" element={<LoginPage />} />
<Route path="/create" element={<Create />} />
Expand Down
15 changes: 13 additions & 2 deletions src/redux/services/partners.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import { PartnersResponseType } from '../../@types/partners'
import { PartnerDataType, PartnersResponseType } from '../../@types/partners'
import { StatePartnersType } from '../../helpers/partnersReducer'

const baseUrl = 'https://api.strapi.camino.network/partners'
Expand Down Expand Up @@ -34,7 +34,18 @@ export const partnersApi = createApi({
return query
},
}),
fetchPartnerData: build.query<PartnerDataType, { companyName: string }>({
query: ({ companyName }) => {
let query =
'?populate=*&sort[0]=companyName:asc&pagination[page]=1&pagination[pageSize]=12'
query += `&filters[companyName][$contains]=${companyName}`
return query
},
transformResponse: (response: PartnersResponseType) => {
return response.data[0]
},
}),
}),
})

export const { useListPartnersQuery } = partnersApi
export const { useListPartnersQuery, useFetchPartnerDataQuery } = partnersApi
14 changes: 8 additions & 6 deletions src/views/partners/ListPartners.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
import { PartnerDataType, PartnersResponseType } from '../../@types/partners'
import { PartnersResponseType } from '../../@types/partners'

import { Box } from '@mui/material'
import PartnerCard from '../../components/Partners/PartnerCard'
import React from 'react'
import { useNavigate } from 'react-router'
import PartnerCard from '../../components/Partners/PartnerCard'

interface ListPartnersProps {
partners: PartnersResponseType
setPartner: React.Dispatch<React.SetStateAction<PartnerDataType>>
}

const ListPartners: React.FC<ListPartnersProps> = ({ partners, setPartner }) => {
const ListPartners: React.FC<ListPartnersProps> = ({ partners }) => {
const navigate = useNavigate()
return (
<Box
sx={{
Expand All @@ -32,8 +33,9 @@ const ListPartners: React.FC<ListPartnersProps> = ({ partners, setPartner }) =>
partner.attributes.contactLastname &&
partner.attributes.contactPhone
)
)
setPartner(partner)
) {
navigate(partner.attributes.companyName)
}
}}
partner={partner}
key={index}
Expand Down
87 changes: 42 additions & 45 deletions src/views/partners/Partner.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,13 @@
import { Box, Button, Divider, Typography, useTheme } from '@mui/material'

import { mdiArrowLeft } from '@mdi/js'
import Icon from '@mdi/react'
import { Link } from 'react-router-dom'
import React from 'react'
import { Link, useNavigate, useParams } from 'react-router-dom'
import PartnerBusinessFields from '../../components/Partners/PartnerBusinessFields'
import { PartnerDataType } from '../../@types/partners'
import PartnerFlag from '../../components/Partners/PartnerFlag'
import PartnerLogo from '../../components/Partners/PartnerLogo'
import React from 'react'
import { mdiArrowLeft } from '@mdi/js'

interface PartnerProps {
partner: PartnerDataType
setPartner: React.Dispatch<React.SetStateAction<PartnerDataType>>
}
import { useFetchPartnerDataQuery } from '../../redux/services/partners'

const ContentField = ({ label, children }) => {
return (
Expand Down Expand Up @@ -44,26 +39,19 @@ const ContentField = ({ label, children }) => {
)
}

const Partner: React.FC<PartnerProps> = ({ partner, setPartner }) => {
const {
attributes: {
isConsortiumMember,
companyName,
companyShortDescription,
companyLongDescription,
business_fields,
companyLogoColor,
country_flag,
contactEmail,
companyWebsite,
contactPhone,
contactFirstname,
contactLastname,
logoBox,
},
} = partner
const Partner = () => {
let { partnerID } = useParams()
const theme = useTheme()
const isDark = theme.palette.mode === 'dark'
const {
data: partner,
isLoading,
isFetching,
} = useFetchPartnerDataQuery({
companyName: partnerID,
})
const navigate = useNavigate()
if (isLoading || isFetching) return <></>
return (
<Box sx={{ height: '100%', mb: '2rem' }}>
<Box sx={{ mb: '2rem' }}>
Expand All @@ -76,7 +64,7 @@ const Partner: React.FC<PartnerProps> = ({ partner, setPartner }) => {
border: theme => `1px solid ${theme.palette.grey[700]}`,
}}
startIcon={<Icon path={mdiArrowLeft} size={0.8} />}
onClick={() => setPartner(null)}
onClick={() => navigate('/partners')}
>
Back to all companies
</Button>
Expand All @@ -99,7 +87,7 @@ const Partner: React.FC<PartnerProps> = ({ partner, setPartner }) => {
flexWrap: 'wrap',
}}
>
<Typography variant="h3">{companyName}</Typography>
<Typography variant="h3">{partner.attributes.companyName}</Typography>
{/* the badge validator will be added when the api support getting p-chain
address */}
{/* {!!isConsortiumMember && (
Expand All @@ -118,16 +106,20 @@ const Partner: React.FC<PartnerProps> = ({ partner, setPartner }) => {
</Box>
)} */}
</Box>
<Typography variant="caption">{companyShortDescription}</Typography>
<Typography variant="caption">
{partner.attributes.companyShortDescription}
</Typography>
<Box>
<PartnerBusinessFields
business_fields={business_fields}
business_fields={partner.attributes.business_fields}
isPartnerView={true}
/>
</Box>
<Box sx={{ paddingBottom: '1.5rem' }}>
<Typography variant="subtitle1">Description</Typography>
<Typography variant="body2">{companyLongDescription}</Typography>
<Typography variant="body2">
{partner.attributes.companyLongDescription}
</Typography>
</Box>
</Box>
<Box
Expand Down Expand Up @@ -155,16 +147,19 @@ const Partner: React.FC<PartnerProps> = ({ partner, setPartner }) => {
}}
>
<PartnerLogo
colorLogo={companyLogoColor}
companyName={companyName}
logoBox={logoBox}
colorLogo={partner.attributes.companyLogoColor}
companyName={partner.attributes.companyName}
logoBox={partner.attributes.logoBox}
/>
</Box>
<Divider />
<ContentField label="company country">
{country_flag && country_flag.data?.attributes && (
<PartnerFlag country={country_flag.data.attributes} />
)}
{partner.attributes.country_flag &&
partner.attributes.country_flag.data?.attributes && (
<PartnerFlag
country={partner.attributes.country_flag.data.attributes}
/>
)}
</ContentField>
<Divider />
<ContentField label="Direct Contact">
Expand All @@ -177,15 +172,17 @@ const Partner: React.FC<PartnerProps> = ({ partner, setPartner }) => {
lineHeight: '150%',
}}
>
{contactFirstname + ' ' + contactLastname}
{partner.attributes.contactFirstname +
' ' +
partner.attributes.contactLastname}
</Typography>
</ContentField>
<Divider />
<ContentField label="Contact Email">
<Link
rel="noopener noreferrer"
style={{ textDecoration: 'none' }}
to={'mailto:' + contactEmail}
to={'mailto:' + partner.attributes.contactEmail}
>
<Typography
sx={{
Expand All @@ -196,7 +193,7 @@ const Partner: React.FC<PartnerProps> = ({ partner, setPartner }) => {
lineHeight: '150%',
}}
>
{contactEmail}
{partner.attributes.contactEmail}
</Typography>
</Link>
</ContentField>
Expand All @@ -205,7 +202,7 @@ const Partner: React.FC<PartnerProps> = ({ partner, setPartner }) => {
<Link
rel="noopener noreferrer"
style={{ textDecoration: 'none' }}
to={'tel:' + contactPhone}
to={'tel:' + partner.attributes.contactPhone}
>
<Typography
sx={{
Expand All @@ -216,7 +213,7 @@ const Partner: React.FC<PartnerProps> = ({ partner, setPartner }) => {
lineHeight: '150%',
}}
>
{contactPhone}
{partner.attributes.contactPhone}
</Typography>
</Link>
</ContentField>
Expand All @@ -226,7 +223,7 @@ const Partner: React.FC<PartnerProps> = ({ partner, setPartner }) => {
rel="noopener noreferrer"
target="_blank"
style={{ textDecoration: 'none' }}
to={companyWebsite}
to={partner.attributes.companyWebsite}
>
<Typography
sx={{
Expand All @@ -237,7 +234,7 @@ const Partner: React.FC<PartnerProps> = ({ partner, setPartner }) => {
lineHeight: '150%',
}}
>
{companyWebsite}
{partner.attributes.companyWebsite}
</Typography>
</Link>
</ContentField>
Expand Down
17 changes: 4 additions & 13 deletions src/views/partners/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Box, CircularProgress, Pagination, PaginationItem, Typography } from '@mui/material'
import React, { ReactNode, useReducer, useState } from 'react'
import React, { ReactNode, useReducer } from 'react'
import {
initialStatePartners,
partnersActions,
Expand All @@ -8,11 +8,9 @@ import {

import ArrowBackIcon from '@mui/icons-material/ArrowBack'
import ArrowForwardIcon from '@mui/icons-material/ArrowForward'
import ListPartners from './ListPartners'
import Partner from './Partner'
import { PartnerDataType } from '../../@types/partners'
import PartnersFilter from '../../components/Partners/PartnersFilter'
import { useListPartnersQuery } from '../../redux/services/partners'
import ListPartners from './ListPartners'

interface PartnersListWrapperProps {
isLoading: boolean
Expand Down Expand Up @@ -47,19 +45,16 @@ const Partners = () => {
const handleChange = (event: React.ChangeEvent<unknown>, value: number) => {
dispatchPartnersActions({ type: partnersActions.NEXT_PAGE, payload: value })
}
const [partner, setPartner] = useState<PartnerDataType | null>(null)

if (!partners?.data) {
return <PartnersListWrapper isLoading={isLoading} isFetching={isFetching} />
}
const content = partner ? (
<Partner partner={partner} setPartner={setPartner} />
) : (
const content = (
<>
<PartnersFilter state={state} dispatchPartnersActions={dispatchPartnersActions} />
<Typography variant="h5">{partners.meta.pagination.total} Partners</Typography>
<PartnersListWrapper isLoading={isLoading} isFetching={isFetching}>
<ListPartners partners={partners} setPartner={setPartner} />
<ListPartners partners={partners} />
</PartnersListWrapper>
<Box sx={{ display: 'flex', justifyContent: 'center', my: '2rem' }}>
<Pagination
Expand All @@ -82,11 +77,7 @@ const Partners = () => {
sx={{
display: 'flex',
flexDirection: 'column',
mt: '5rem',
gap: '1rem',
height: '100%',
width: '100%',
maxWidth: theme => theme.customWidth.layoutMaxWitdh,
}}
>
{content}
Expand Down
2 changes: 1 addition & 1 deletion src/views/settings/Links.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ export default function Links() {
variant="scrollable"
allowScrollButtonsMobile
>
{path === '/partners'
{path.includes('/partners')
? partnersTabs.map((tab, index) => (tab ? tab : null))
: settingsTabs.map((tab, index) => (tab ? tab : null))}
</Tabs>
Expand Down

0 comments on commit bd4225b

Please sign in to comment.