Refactor UserTypeFilter component to use Chips for selection and update user type filtering logic

This commit is contained in:
AshAnand34
2025-07-21 21:22:05 -07:00
parent b29845c2d3
commit 1cae1c9fda
4 changed files with 38 additions and 60 deletions

View File

@@ -1,23 +1,11 @@
import React, { useState, useEffect } from 'react';
import {
Box,
Chip,
FormControl,
InputLabel,
MenuItem,
OutlinedInput,
Select,
SelectChangeEvent,
Typography,
useTheme
} from '@mui/material';
import { Box, Chip, Typography } from '@mui/material';
import { UserType } from '@tools/defineTool';
const userTypes: UserType[] = [
'General Users',
'Developers',
'Designers',
'Students',
'CyberSec'
];
@@ -32,54 +20,28 @@ export default function UserTypeFilter({
onUserTypesChange,
label = 'Filter by User Type'
}: UserTypeFilterProps) {
const theme = useTheme();
const handleChange = (event: SelectChangeEvent<UserType[]>) => {
const {
target: { value }
} = event;
const newUserTypes =
typeof value === 'string' ? (value.split(',') as UserType[]) : value;
onUserTypesChange(newUserTypes);
};
return (
<Box sx={{ minWidth: 200 }}>
<FormControl fullWidth>
<InputLabel id="user-type-filter-label">{label}</InputLabel>
<Select
labelId="user-type-filter-label"
id="user-type-filter"
multiple
value={selectedUserTypes}
onChange={handleChange}
input={<OutlinedInput label={label} />}
renderValue={(selected) => (
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
{selected.map((value) => (
<Chip
key={value}
label={value}
size="small"
sx={{
backgroundColor: theme.palette.primary.main,
color: 'white',
'& .MuiChip-deleteIcon': {
color: 'white'
}
}}
/>
))}
</Box>
)}
>
{userTypes.map((userType) => (
<MenuItem key={userType} value={userType}>
{userType}
</MenuItem>
))}
</Select>
</FormControl>
<Typography variant="subtitle2" sx={{ mb: 1 }}>
{label}
</Typography>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
{userTypes.map((userType) => (
<Chip
key={userType}
label={userType}
color={selectedUserTypes.includes(userType) ? 'primary' : 'default'}
onClick={() => {
const isSelected = selectedUserTypes.includes(userType);
const newUserTypes = isSelected
? selectedUserTypes.filter((ut) => ut !== userType)
: [...selectedUserTypes, userType];
onUserTypesChange(newUserTypes);
}}
sx={{ cursor: 'pointer' }}
/>
))}
</Box>
</Box>
);
}

View File

@@ -2,9 +2,17 @@ import { Box, useTheme } from '@mui/material';
import Hero from 'components/Hero';
import Categories from './Categories';
import { Helmet } from 'react-helmet';
import UserTypeFilter, { useUserTypeFilter } from 'components/UserTypeFilter';
import { UserType } from '@tools/defineTool';
export default function Home() {
const theme = useTheme();
const { selectedUserTypes, setSelectedUserTypes } = useUserTypeFilter();
const handleUserTypesChange = (userTypes: UserType[]) => {
setSelectedUserTypes(userTypes);
};
return (
<Box
padding={{
@@ -28,6 +36,11 @@ export default function Home() {
>
<Helmet title={'OmniTools'} />
<Hero />
<UserTypeFilter
selectedUserTypes={selectedUserTypes}
onUserTypesChange={handleUserTypesChange}
label="Filter by User Type"
/>
<Categories />
</Box>
);

View File

@@ -8,7 +8,6 @@ export type UserType =
| 'General Users'
| 'Developers'
| 'Designers'
| 'Students'
| 'CyberSec';
export interface ToolMeta {

View File

@@ -145,6 +145,10 @@ export const filterToolsByUserTypes = (
if (userTypes.length === 0) return tools;
return tools.filter((tool) => {
// Always treat xml tools as dev-only
if (tool.type === 'xml') {
return userTypes.includes('Developers');
}
// If tool has no userTypes defined, show it to all users
if (!tool.userTypes || tool.userTypes.length === 0) return true;