Skip to content

Commit

Permalink
integrate project filters
Browse files Browse the repository at this point in the history
  • Loading branch information
wgardiner committed Nov 11, 2024
1 parent 4ed6830 commit 5bd7e8c
Show file tree
Hide file tree
Showing 9 changed files with 463 additions and 15 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,15 @@ export interface Props {
tag: ProjectTagType;
sx?: SxProps<Theme>;
onClick?: () => void;
fontSize?: any;
}

const ProjectTag = ({ tag, sx = [], onClick }: Props): JSX.Element => {
const ProjectTag = ({
tag,
sx = [],
onClick,
fontSize = { xs: 12, sm: 14 },
}: Props): JSX.Element => {
const { icon, name } = tag;

return (
Expand Down Expand Up @@ -44,7 +50,7 @@ const ProjectTag = ({ tag, sx = [], onClick }: Props): JSX.Element => {
/>
)}
{isValidElement(icon) && icon}
<Box sx={{ fontWeight: 700, fontSize: { xs: 12, sm: 14 } }}>{name}</Box>
<Box sx={{ fontWeight: 700, fontSize }}>{name}</Box>
</Box>
);
};
Expand Down
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
import { cloneElement } from 'react';
import { SxProps } from '@mui/system';

import { Theme } from '../../../theme/muiTheme';
import { ProjectTag } from '../../molecules/ProjectTag/ProjectTag';

interface TagFilterProps {
icon: JSX.Element;
name: string;
isSelected: boolean;
onClick?: () => void;
sx?: SxProps<Theme>;
}

const tagSx = {
Expand All @@ -23,12 +26,14 @@ export default function TagFilter({
name,
isSelected,
onClick,
sx = {},
}: TagFilterProps) {
// add isSelected prop to icon
const iconWithProps = cloneElement(icon, { isSelected });
return (
<ProjectTag
sx={tagSx}
sx={{ ...tagSx, ...sx }}
fontSize={12}
tag={{
name,
icon: iconWithProps,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
useMediaQuery,
useTheme,
} from '@mui/material';
import { fontSize } from '@mui/system';

import { Subtitle, Title } from '../../typography';
import TagFilter from './ProjectFilter.TagFilter';
Expand Down Expand Up @@ -52,21 +53,25 @@ export default function ProjectFilters({
const handleExpand = (index: number) => {
setIsExpanded({ ...isExpanded, [index]: !isExpanded[index] });
};
console.log(activeFilterIds);
return (
<>
<Box display="flex" justifyContent="space-between" alignItems="baseline">
<Title variant="h4">{labels.title}</Title>
<Subtitle onClick={onFilterReset} sx={{ cursor: 'pointer' }}>
<div className="font-montserrat justify-between items-baseline flex">
<div className="text-[18px] font-bold">{labels.title}</div>
<div
className="cursor-pointer text-[14px] text-sc-text-link font-bold"
onClick={onFilterReset}
>
{labels.reset}
</Subtitle>
</Box>
</div>
</div>
<Divider sx={{ my: 5 }} />
{filters.map((filter, index) => {
return (
<Box sx={{ mb: 5 }} key={filter.title}>
<Title variant="h5" sx={{ mb: 5 }}>
<div className="text-[16px] font-montserrat font-bold mb-[20px] ">
{filter.title}
</Title>
</div>

<Collapse
in={
Expand All @@ -84,12 +89,13 @@ export default function ProjectFilters({
key={id}
isSelected={activeFilterIds.includes(id)}
onClick={() => onFilterChange(id)}
sx={{ fontFamily: 'Montserrat' }}
/>
))}
</Box>
)}
{filter.displayType === 'checkbox' && (
<Box display="flex" flexDirection="column">
<div className="flex flex-column flex-wrap">
{filter.options.map(({ name, icon, id }) => (
<CheckboxFilter
isSelected={activeFilterIds.includes(id)}
Expand All @@ -99,14 +105,15 @@ export default function ProjectFilters({
onChange={() => onFilterChange(id)}
/>
))}
</Box>
</div>
)}
</Collapse>
{filter.hasCollapse && (
<ButtonBase
disableRipple
onClick={() => handleExpand(index)}
sx={{ fontWeight: '700' }}
className="text-sc-text-link"
>
{isExpanded[index] ? labels.collapse : labels.expand}
</ButtonBase>
Expand Down
32 changes: 32 additions & 0 deletions web-marketplace/src/hooks/useEcosystemTags.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { useQuery } from '@tanstack/react-query';
import { useAtom } from 'jotai';

import { ProjectTagType } from 'web-components/src/components/molecules/ProjectTag/ProjectTag.types';

import { selectedLanguageAtom } from 'lib/atoms/languageSwitcher.atoms';
import { client as sanityClient } from 'lib/clients/sanity';
import { getAllEcosystemQuery } from 'lib/queries/react-query/sanity/getAllEcosystemQuery/getAllEcosystemQuery';

import { getIconsMapping } from 'components/organisms/ProjectTopSection/ProjectTopSection.utils';

export const useEcosystemTags = (ecosystemTypes: string[]) => {
const [selectedLanguage] = useAtom(selectedLanguageAtom);
const { data: allProjectEcosystemData } = useQuery(
getAllEcosystemQuery({
sanityClient,
languageCode: selectedLanguage,
}),
);
const projectEcosystemIconsMapping = getIconsMapping({
data: allProjectEcosystemData?.allProjectEcosystem,
});

const ecosystemTags = Object.fromEntries(
ecosystemTypes?.map(ecosystem => [
ecosystem,
projectEcosystemIconsMapping?.[ecosystem.toLowerCase()] ?? '',
]) ?? [],
);

return ecosystemTags;
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
import { useState } from 'react';
import { Trans } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import {
Box,
FormControlLabel,
Grid,
SwipeableDrawer,
SxProps,
Theme,
} from '@mui/material';
import { useAtom } from 'jotai';
import { sxToArray } from 'utils/mui/sxToArray';

import OutlinedButton from 'web-components/src/components/buttons/OutlinedButton';
import FilterIcon from 'web-components/src/components/icons/FilterIcon';
import Checkbox from 'web-components/src/components/inputs/new/CheckBox/Checkbox';
import { CollapseList } from 'web-components/src/components/organisms/CollapseList/CollapseList';
import { Subtitle } from 'web-components/src/components/typography';
import { cn } from 'web-components/src/utils/styles/cn';

import {
creditClassSelectedFiltersAtom,
useCommunityProjectsAtom,
} from 'lib/atoms/projects.atoms';
import { SEE_LESS, SEE_MORE } from 'lib/constants/shared.constants';
import { COLOR_SCHEME, IS_TERRASOS } from 'lib/env';
import { useTracker } from 'lib/tracker/useTracker';

import { CommunityFilter } from './AllProjects.CommunityFilter';
import {
COMMUNITY_FILTER_LABEL,
CREDIT_CLASS_FILTER_LABEL,
FILTERS_LABEL,
RESET_FILTERS_LABEL,
SIDE_FILTERS_BUTTON,
UNREGISTERED_PATH,
} from './AllProjects.constants';
import { CreditClassFilter, FilterCreditClassEvent } from './AllProjects.types';
import {
getCreditClassSelectedFilters,
getFilterSelected,
} from './AllProjects.utils';

type Props = {
// creditClassFilters?: CreditClassFilter[];
// hasCommunityProjects: boolean;
// showFiltersReset: boolean;
// resetFilter: () => void;
// sx?: SxProps<Theme>;
};

const ProjectFilter = ({
// creditClassFilters = [],
// hasCommunityProjects,
// showFiltersReset,
// resetFilter,
sx = [],
}: Props) => {
const { _ } = useLingui();
const [isOpen, setIsOpen] = useState(false);
// const [creditClassSelectedFilters, setCreditClassSelectedFilters] = useAtom(
// creditClassSelectedFiltersAtom,
// );
// const [useCommunityProjects] = useAtom(useCommunityProjectsAtom);
// const filteredCreditClassFilters = creditClassFilters.filter(
// ({ isCommunity, path }) =>
// path === UNREGISTERED_PATH ||
// useCommunityProjects ||
// (!useCommunityProjects && !isCommunity),
// );
// const { track } = useTracker();

// const values = Object.values(creditClassSelectedFilters);
// const selectAllEnabled = values.includes(false);
// const clearAllEnabled = values.includes(true);

return (
<>
<OutlinedButton
size="small"
onClick={() => setIsOpen(true)}
startIcon={
<FilterIcon
sx={{
with: 25,
height: 24,
}}
/>
}
sx={[
{
mr: 4,
},
...sxToArray(sx),
]}
>
{_(SIDE_FILTERS_BUTTON)}
</OutlinedButton>
<SwipeableDrawer
anchor="left"
open={isOpen}
onClose={() => setIsOpen(false)}
onOpen={() => setIsOpen(true)}
>
hello
</SwipeableDrawer>
</>
);
};

export default ProjectFilter;
Loading

0 comments on commit 5bd7e8c

Please sign in to comment.