Commit b1886d0f authored by Michal Novák's avatar Michal Novák
Browse files

Merge branch 'master' of https://gitlab.fi.muni.cz/xuhlarik/pcbuilder

parents b1e30c5e 7041ae81

frontend/src/components/Filters/FilterProps.ts

+20 −0
Original line number Diff line number Diff line 
import {

  Manufacturer,

  Socket,

  IntegratedGraphics,

  MemoryGeneration,

  VideoChipset,

  PcieGeneration,

  MotherboardChipset,

  MotherboardPcieSlot,

  FormFactor,

} from '@pcbuilder/common/api';

import {

  IMemoryFilters,

  IMotherboardFilters,
@@ -14,4 +25,13 @@ export type IFilters = 
export interface FilterProps<T extends IFilters> {

  filterData: T;

  setFilterData: React.Dispatch<React.SetStateAction<T>>;

  minSize?: number;

  maxSize?: number;

  manufacturers?: Manufacturer[];

  sockets?: Socket[];

  integratedGraphics?: IntegratedGraphics[];

  generations?: MemoryGeneration[] | PcieGeneration[];

  chipsets?: VideoChipset[] | MotherboardChipset[];

  pcieSlots?: MotherboardPcieSlot[];

  formFactors?: FormFactor[];

}

frontend/src/components/Filters/Inputs/FormFactorFilter.tsx

+11 −10
Original line number Diff line number Diff line
@@ -4,22 +4,23 @@ import { IMotherboardFilters } from '../../../state/atoms'; 
import { FilterProps } from '../FilterProps';



export function FormFactorFilter({

  filterData,

  setFilterData,

  formFactors,

}: FilterProps<IMotherboardFilters>) {

  const handleFormFactorChange =

    (formFactor: FormFactor) =>

    (event: React.ChangeEvent<HTMLInputElement>) => {

      setFilterData((prev) => {

        if (event.target.checked) {

          prev.formFactors.push(formFactor);

        } else {

          const index = prev.formFactors.indexOf(formFactor);

          if (index > -1) {

            prev.formFactors.splice(index, 1);

          }

          return {

            ...prev,

            formFactors: [...prev.formFactors, formFactor],

          };

        }

        return { ...prev };

        return {

          ...prev,

          formFactors: prev.formFactors.filter((f) => f !== formFactor),

        };

      });

    };
@@ -27,11 +28,11 @@ export function FormFactorFilter({ 
    <div className="filters__checkbox">

      <h2 className="checkbox__title">Form Factor</h2>

      <FormGroup>

        {filterData.formFactors.map((formFactor) => (

        {[...(formFactors ?? [])].map((formFactor) => (

          <FormControlLabel

            key={formFactor.id}

            control={<Checkbox onChange={handleFormFactorChange(formFactor)} />}

            label={formFactor}

            label={formFactor.name}

          />

        ))}

      </FormGroup>

frontend/src/components/Filters/Inputs/IntegratedGraphicsFilter.tsx

+14 −11
Original line number Diff line number Diff line
@@ -4,22 +4,25 @@ import { FilterProps } from '../FilterProps'; 
import { IProcessorFilters } from '../../../state/atoms';



export function IntegratedGraphicsFilter({

  filterData,

  setFilterData,

  integratedGraphics,

}: FilterProps<IProcessorFilters>) {

  const handleIntegratedGraphicsChange =

    (integratedGraphic: IntegratedGraphics) =>

    (event: React.ChangeEvent<HTMLInputElement>) => {

      setFilterData((prev) => {

        if (event.target.checked) {

          prev.integratedGraphics.push(integratedGraphic);

        } else {

          const index = prev.integratedGraphics.indexOf(integratedGraphic);

          if (index > -1) {

            prev.integratedGraphics.splice(index, 1);

          }

          return {

            ...prev,

            integratedGraphics: [...prev.integratedGraphics, integratedGraphic],

          };

        }

        return { ...prev };

        return {

          ...prev,

          integratedGraphics: prev.integratedGraphics.filter(

            (i) => i !== integratedGraphic

          ),

        };

      });

    };
@@ -27,15 +30,15 @@ export function IntegratedGraphicsFilter({ 
    <div className="filters__checkbox">

      <h2 className="checkbox__title">Integrated Graphics</h2>

      <FormGroup>

        {filterData.integratedGraphics.map((integratedGraphic) => (

        {[...(integratedGraphics ?? [])].map((integratedGraphic) => (

          <FormControlLabel

            key={integratedGraphic.id}

            key={integratedGraphic?.id ?? 'None'}

            control={

              <Checkbox

                onChange={handleIntegratedGraphicsChange(integratedGraphic)}

              />

            }

            label={integratedGraphic}

            label={integratedGraphic?.name ?? 'None'}

          />

        ))}

      </FormGroup>

frontend/src/components/Filters/Inputs/ManufacturerFilter.tsx

+11 −10
Original line number Diff line number Diff line
@@ -3,22 +3,23 @@ import { Manufacturer } from '@pcbuilder/common/api'; 
import { FilterProps, IFilters } from '../FilterProps';



export function ManufacturerFilter<T extends IFilters>({

  filterData,

  setFilterData,

  manufacturers,

}: FilterProps<T>) {

  const handleManufacturerChange =

    (manufacturer: Manufacturer) =>

    (event: React.ChangeEvent<HTMLInputElement>) => {

      setFilterData((prev) => {

        if (event.target.checked) {

          prev.manufacturers.push(manufacturer);

        } else {

          const index = prev.manufacturers.indexOf(manufacturer);

          if (index > -1) {

            prev.manufacturers.splice(index, 1);

          }

          return {

            ...prev,

            manufacturers: [...prev.manufacturers, manufacturer],

          };

        }

        return { ...prev };

        return {

          ...prev,

          manufacturers: prev.manufacturers.filter((m) => m !== manufacturer),

        };

      });

    };
@@ -26,13 +27,13 @@ export function ManufacturerFilter<T extends IFilters>({ 
    <div className="filters__checkbox">

      <h2 className="checkbox__title">Manufacturer</h2>

      <FormGroup>

        {filterData.manufacturers.map((manufacturer) => (

        {[...(manufacturers ?? [])].map((manufacturer) => (

          <FormControlLabel

            key={manufacturer.id}

            control={

              <Checkbox onChange={handleManufacturerChange(manufacturer)} />

            }

            label={manufacturer}

            label={manufacturer.name}

          />

        ))}

      </FormGroup>

frontend/src/components/Filters/Inputs/MemoryGenerationFilter.tsx

+11 −10
Original line number Diff line number Diff line
@@ -4,22 +4,23 @@ import { FilterProps } from '../FilterProps'; 
import { IMemoryFilters } from '../../../state/atoms';



export function GenerationFilter({

  filterData,

  setFilterData,

  generations,

}: FilterProps<IMemoryFilters>) {

  const handleGenerationChange =

    (generation: MemoryGeneration) =>

    (event: React.ChangeEvent<HTMLInputElement>) => {

      setFilterData((prev) => {

        if (event.target.checked) {

          prev.generations.push(generation);

        } else {

          const index = prev.generations.indexOf(generation);

          if (index > -1) {

            prev.generations.splice(index, 1);

          }

          return {

            ...prev,

            generations: [...prev.generations, generation],

          };

        }

        return { ...prev };

        return {

          ...prev,

          generations: prev.generations.filter((g) => g !== generation),

        };

      });

    };
@@ -27,11 +28,11 @@ export function GenerationFilter({ 
    <div className="filters__checkbox">

      <h2 className="checkbox__title">Generation</h2>

      <FormGroup>

        {filterData.generations.map((generation) => (

        {[...(generations ?? [])].map((generation) => (

          <FormControlLabel

            key={generation.id}

            control={<Checkbox onChange={handleGenerationChange(generation)} />}

            label={generation}

            label={generation.name}

          />

        ))}

      </FormGroup>