diff --git a/components/project/project-filters-bar.tsx b/components/project/project-filters-bar.tsx index 7284d482..051dc2a3 100644 --- a/components/project/project-filters-bar.tsx +++ b/components/project/project-filters-bar.tsx @@ -84,44 +84,6 @@ export const ThemesStatusMapping = (lang: LocaleTypes): IThemeStatus => { } } -const FilterButtons = ({ - searchQuery, - lang, -}: { - lang: LocaleTypes - searchQuery?: string -}): JSX.Element => { - const { activeFilters, onSelectTheme } = useProjectFiltersState( - (state) => state - ) - - return ( -
- {Object.entries(ThemesButtonMapping(lang)).map( - ([key, { label, icon }]) => { - const isActive = activeFilters?.themes?.includes(key) - const variant = isActive ? "blue" : "white" - return ( - - ) - } - )} -
- ) -} - export default function ProjectFiltersBar({ lang }: LangProps["params"]) { const { t } = useTranslation(lang as LocaleTypes, "common") const [showModal, setShowModal] = useState(false) @@ -341,9 +303,12 @@ export default function ProjectFiltersBar({ lang }: LangProps["params"]) {
) => + onChange={(e: ChangeEvent) => { setSearchQuery(e?.target?.value) - } + useProjectFiltersState.setState({ + searchQuery: e?.target?.value, + }) + }} value={searchQuery} placeholder={t("searchProjectPlaceholder")} /> diff --git a/components/project/project-list.tsx b/components/project/project-list.tsx index 3630b1a1..018b93dd 100644 --- a/components/project/project-list.tsx +++ b/components/project/project-list.tsx @@ -51,7 +51,9 @@ export const ProjectList = ({ lang }: LangProps["params"]) => { const [isManualScroll, setIsManualScroll] = useState(false) const [isMounted, setIsMounted] = useState(false) - const { projects } = useProjectFiltersState((state) => state) + const { projects, searchQuery, queryString } = useProjectFiltersState( + (state) => state + ) const noItems = projects?.length === 0 @@ -96,6 +98,8 @@ export const ProjectList = ({ lang }: LangProps["params"]) => { } }, []) + const hasActiveFilters = searchQuery !== "" || queryString !== "" + // loading state skeleton if (!isMounted) { return ( @@ -126,6 +130,24 @@ export const ProjectList = ({ lang }: LangProps["params"]) => { return acc }, {} as Record) + // show all projects without sections if there are active filters + if (hasActiveFilters) { + return ( +
+ {projects.map((project) => ( + + ))} +
+ ) + } + return (
@@ -141,12 +163,14 @@ export const ProjectList = ({ lang }: LangProps["params"]) => { return (
-
-

{status}

- - {description} - -
+ {!hasActiveFilters && ( +
+

{status}

+ + {description} + +
+ )}
{projects.map((project) => ( queryString: string + searchQuery: string currentCategory: ProjectCategory | null } @@ -211,6 +212,7 @@ export const useProjectFiltersState = create< sortBy: DEFAULT_PROJECT_SORT_BY, projects: sortProjectByFn(projects, DEFAULT_PROJECT_SORT_BY), queryString: "", + searchQuery: "", filters: getProjectFilters(), // list of filters with all possible values from projects activeFilters: {}, // list of filters active in the current view by the user toggleFilter: ({ tag: filterKey, value, searchQuery }: toggleFilterProps) => @@ -264,6 +266,7 @@ export const useProjectFiltersState = create< ...state, activeFilters, projects: sortProjectByFn(filteredProjects, state.sortBy), + searchQuery, } }) },