Commit b8acaa26 authored by jakub uhlarik's avatar jakub uhlarik
Browse files

feat(frontend): add error and loading on get

parent cbfa788c

frontend/src/components/PartTable/PartTable.tsx

+78 −61
Original line number Diff line number Diff line
@@ -14,6 +14,7 @@ import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'; 
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';

import { useNavigate } from 'react-router-dom';

import { useSetRecoilState, useRecoilState, useRecoilValue } from 'recoil';

import { RotatingLines } from 'react-loader-spinner';

import { SellablePartName, SellablePart } from '../../types/SellableParts';

import { priceToString } from '../../services/helperFunctions';

import { VideoCardFilters } from '../Filters/VideoCardFilters.tsx';
@@ -39,6 +40,9 @@ export type PartTableInput<T> = { 
  deleteLoading: boolean;

  errorDelete: ApiError | null;

  isErrorDelete: boolean;

  isError: boolean;

  error: ApiError | null;

  isLoading: boolean;

};



export function PartTable<T extends SellablePart>({
@@ -49,6 +53,9 @@ export function PartTable<T extends SellablePart>({ 
  deleteLoading,

  errorDelete,

  isErrorDelete,

  isError: isErrorGet,

  error: loadError,

  isLoading: loadingGet,

}: PartTableInput<T>) {

  const navigate = useNavigate();

  const setOrdering = useSetRecoilState(sortingAtom);
@@ -93,7 +100,16 @@ export function PartTable<T extends SellablePart>({ 
      ) : (

        ''

      )}

      {isErrorGet && loadError !== null ? (

        <ErrorView dataType={name} error={loadError} />

      ) : (

        ''

      )}



      <h1 className="parts__title">Choose {name}</h1>

      {loadingGet ? (

        <RotatingLines />

      ) : (

        <TableContainer className="parts__container">

          {filters}

          <Table className="container__table">
@@ -124,7 +140,7 @@ export function PartTable<T extends SellablePart>({ 
            </TableHead>

            <TableBody>

              {data.map((oneRow) => (

              <TableRow>

                <TableRow key={oneRow.id}>

                  <TableCell>

                    <Stack spacing={3} direction="row" alignItems="center">

                      <Avatar
@@ -165,6 +181,7 @@ export function PartTable<T extends SellablePart>({ 
            </TableBody>

          </Table>

        </TableContainer>

      )}

    </div>

  );

}

frontend/src/pages/Parts/MemoryParts.tsx

+4 −2
Original line number Diff line number Diff line
@@ -11,14 +11,15 @@ import { 
import { memoriesAtom, memoryFiltersAtom } from '../../state/atoms';

import { filteredMemoriesSelector } from '../../state/selectors';

import { useDelete } from '../../hooks/deleteHook';

import { ApiError } from '../../types/Error';



export function MemoryParts() {

  const { addMemory, configuration } = useConfiguration();

  const setMemories = useSetRecoilState(memoriesAtom);

  const setMemoryFilters = useSetRecoilState(memoryFiltersAtom);

  const mem = ['memories'];

  const mem = ['memoriesfil'];

  const deleteHook = useDelete(mem, deleteMemoryApi);

  useQuery({

  const queryHook = useQuery<Memory[], ApiError>({

    queryKey: mem,

    queryFn: async () =>

      readManyMemories({
@@ -46,6 +47,7 @@ export function MemoryParts() { 
  return (

    <PartTable<Memory>

      name="Memory"

      {...queryHook}

      data={filteredMemories ?? []}

      addPart={addMemory}

      {...deleteHook}

frontend/src/pages/Parts/MotherboardParts.tsx

+3 −1
Original line number Diff line number Diff line
@@ -11,6 +11,7 @@ import { motherboardFiltersAtom, motherboardsAtom } from '../../state/atoms'; 
import { filteredMotherboardsSelector } from '../../state/selectors';



import { useDelete } from '../../hooks/deleteHook';

import { ApiError } from '../../types/Error';



export function MotherBoardParts() {

  const { addMotherboard, configuration } = useConfiguration();
@@ -19,7 +20,7 @@ export function MotherBoardParts() { 
  const query = ['motherboards'];

  const deleteHook = useDelete(query, deleteMotherboard);



  useQuery({

  const queryHook = useQuery<Motherboard[], ApiError>({

    queryKey: query,

    queryFn: async () =>

      readManyMotherboards({
@@ -55,6 +56,7 @@ export function MotherBoardParts() { 
  return (

    <PartTable<Motherboard>

      name="Motherboard"

      {...queryHook}

      data={filteredMotherboards ?? []}

      addPart={addMotherboard}

      {...deleteHook}

frontend/src/pages/Parts/ProcessorParts.tsx

+3 −1
Original line number Diff line number Diff line
@@ -10,6 +10,7 @@ import { 
import { processorFiltersAtom, processorsAtom } from '../../state/atoms';

import { filteredProcessorsSelector } from '../../state/selectors';

import { useDelete } from '../../hooks/deleteHook';

import { ApiError } from '../../types/Error';



export function ProcessorParts() {

  const { addProcesor, configuration } = useConfiguration();
@@ -17,7 +18,7 @@ export function ProcessorParts() { 
  const setProcessorFilters = useSetRecoilState(processorFiltersAtom);

  const query = ['processors'];

  const deleteHook = useDelete(query, deleteProcessor);

  useQuery({

  const queryHook = useQuery<Processor[], ApiError>({

    queryKey: query,

    queryFn: async () =>

      readManyProcessors({ socketId: configuration.motherboard?.socket.id }),
@@ -42,6 +43,7 @@ export function ProcessorParts() { 
  return (

    <PartTable<Processor>

      name="Processor"

      {...queryHook}

      data={filteredProcessors ?? []}

      addPart={addProcesor}

      {...deleteHook}

frontend/src/pages/Parts/VideoCardParts.tsx

+3 −1
Original line number Diff line number Diff line
@@ -10,6 +10,7 @@ import { 
import { videoCardFiltersAtom, videoCardsAtom } from '../../state/atoms';

import { filteredVideoCardsSelector } from '../../state/selectors';

import { useDelete } from '../../hooks/deleteHook';

import { ApiError } from '../../types/Error';



export function VideoCardParts() {

  const { addVideoCard } = useConfiguration();
@@ -17,7 +18,7 @@ export function VideoCardParts() { 
  const setVideoCardFilters = useSetRecoilState(videoCardFiltersAtom);

  const query = ['videoCards'];

  const deleteHook = useDelete(query, deleteVideoCards);

  useQuery({

  const queryHook = useQuery<VideoCard[], ApiError>({

    queryKey: query,

    queryFn: async () => readManyVideoCards({}),

    onSuccess: (data) => {
@@ -49,6 +50,7 @@ export function VideoCardParts() { 
  return (

    <PartTable<VideoCard>

      name="Video Card"

      {...queryHook}

      data={filteredVideoCards ?? []}

      addPart={addVideoCard}

      {...deleteHook}