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,
}
})
},