chapter15 added

PacktPublishing · Jul 31, 2023 · 88d1432 · 88d1432
1 parent ffa63ca
commit 88d1432
Show file tree

Hide file tree

Showing 26 changed files with 718 additions and 0 deletions.
diff --git a/Chapter14/.env b/Chapter14/.env
@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:8080
diff --git a/Chapter14/.gitignore b/Chapter14/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/Chapter15/.env b/Chapter15/.env
@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:8080
diff --git a/Chapter15/.eslintrc.cjs b/Chapter15/.eslintrc.cjs
@@ -0,0 +1,14 @@
+module.exports = {
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': 'warn',
+  },
+}
diff --git a/Chapter15/.gitignore b/Chapter15/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/Chapter15/index.html b/Chapter15/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>My Carshop</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/Chapter15/package.json b/Chapter15/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "carfront",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.13.6",
+    "@mui/x-data-grid": "^6.9.0",
+    "@tanstack/react-query": "^4.29.18",
+    "axios": "^1.4.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/react": "^18.0.37",
+    "@types/react-dom": "^18.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.59.0",
+    "@typescript-eslint/parser": "^5.59.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "eslint": "^8.38.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.3.4",
+    "jsdom": "^22.1.0",
+    "typescript": "^5.0.2",
+    "vite": "^4.3.9",
+    "vitest": "^0.33.0"
+  }
+}
diff --git a/Chapter15/public/vite.svg b/Chapter15/public/vite.svg
diff --git a/Chapter15/src/App.css b/Chapter15/src/App.css
@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
diff --git a/Chapter15/src/App.test.tsx b/Chapter15/src/App.test.tsx
@@ -0,0 +1,10 @@
+import { describe, test, expect } from 'vitest';
+import { render, screen } from "@testing-library/react";
+import App from "./App";
+
+describe("App tests", () => {
+  test("component renders", () => {
+    render(<App />);  
+    expect(screen.getByText(/Carshop/i)).toBeInTheDocument();
+  })
+});
diff --git a/Chapter15/src/App.tsx b/Chapter15/src/App.tsx
@@ -0,0 +1,29 @@
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import CssBaseline from '@mui/material/CssBaseline';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import Carlist from './components/Carlist';
+
+const queryClient = new QueryClient();
+
+function App() {
+  return (
+    <Container maxWidth="xl">
+    <CssBaseline />
+      <AppBar position="static">
+        <Toolbar>
+          <Typography variant="h6">
+            Carshop
+          </Typography>
+        </Toolbar>
+      </AppBar>
+      <QueryClientProvider client={queryClient}>
+        <Carlist />       
+      </QueryClientProvider>
+    </Container>
+  );
+}
+
+export default App;
diff --git a/Chapter15/src/Carlist.test.tsx b/Chapter15/src/Carlist.test.tsx
@@ -0,0 +1,39 @@
+import { describe, test } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Carlist from './components/Carlist';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});
+
+const wrapper = ({ children } : { children: React.ReactNode }) => (
+  <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+);
+
+describe("Carlist tests", () => {
+  test("component renders", () => {
+    render(<Carlist />, { wrapper });
+    expect(screen.getByText(/Loading/i)).toBeInTheDocument();
+  })
+
+  test("cars are fetched", async () => {
+    render(<Carlist />, { wrapper });
+
+    await waitFor(() => screen.getByText(/New Car/i));
+    expect(screen.getByText(/Ford/i)).toBeInTheDocument();
+  })
+
+  test("Open new car modal", async () => {
+    render(<Carlist />, { wrapper });
+
+    await waitFor(() => screen.getByText(/New Car/i));
+    await userEvent.click(screen.getByText(/New Car/i));
+    expect(screen.getByText(/Save/i)).toBeInTheDocument();
+  })  
+});
diff --git a/Chapter15/src/api/carapi.ts b/Chapter15/src/api/carapi.ts
@@ -0,0 +1,32 @@
+import { CarResponse, Car, CarEntry } from '../types';
+import axios from 'axios';
+
+export const getCars = async (): Promise<CarResponse[]> => {
+  const response = await axios.get(import.meta.env.VITE_API_URL + "/api/cars");
+  return response.data._embedded.cars;
+}
+
+export const deleteCar = async (link: string): Promise<CarResponse> => {
+  const response = await axios.delete(link);
+  return response.data
+}
+
+export const addCar = async (car: Car): Promise<CarResponse> => {
+  const response = await axios.post(import.meta.env.VITE_API_URL + "/api/cars", car, {
+    headers: {
+      'Content-Type': 'application/json',
+    },  
+  });
+
+  return response.data;
+}
+
+export const updateCar = async (carEntry: CarEntry): Promise<CarResponse> => {
+  const response = await axios.put(carEntry.url, carEntry.car, {
+    headers: {
+      'Content-Type': 'application/json',     
+    },
+  });
+  return response.data;
+}
+
diff --git a/Chapter15/src/assets/react.svg b/Chapter15/src/assets/react.svg
diff --git a/Chapter15/src/components/AddCar.tsx b/Chapter15/src/components/AddCar.tsx
@@ -0,0 +1,66 @@
+import { useState } from 'react';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogTitle from '@mui/material/DialogTitle';
+import Button from '@mui/material/Button';
+import { Car } from '../types';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { addCar } from '../api/carapi';
+import CarDialogContent from './CarDialogContent';
+
+function AddCar() {
+  const [open, setOpen] = useState(false);
+  const [car, setCar] = useState<Car>({
+    brand: '',
+    model: '',
+    color: '',
+    registerNumber: '',
+    modelYear: 0,  
+    price: 0
+  });
+
+  const queryClient = useQueryClient();
+
+  const { mutate } = useMutation(addCar, {
+    onSuccess: () => {
+     queryClient.invalidateQueries(["cars"]);
+    },
+    onError: (err) => {
+      console.error(err);
+    },
+  });
+
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const handleSave = () => {
+    mutate(car);   
+    setCar({ brand: '', model: '', color: '',  registerNumber:'', modelYear: 0, price: 0 });
+    handleClose();
+  }  
+
+  const handleChange = (event : React.ChangeEvent<HTMLInputElement>) => {
+    setCar({...car, [event.target.name]:
+        event.target.value});
+  }
+
+  return(
+    <>
+   <Button onClick={handleClickOpen}>New Car</Button>
+    <Dialog open={open} onClose={handleClose}>
+      <DialogTitle>New car</DialogTitle>
+      <CarDialogContent car={car} handleChange={handleChange}/>
+      <DialogActions>
+         <Button onClick={handleClose}>Cancel</Button>
+         <Button onClick={handleSave}>Save</Button>
+      </DialogActions>
+    </Dialog>               
+    </>
+  );
+}
+export default AddCar;
diff --git a/Chapter15/src/components/CarDialogContent.tsx b/Chapter15/src/components/CarDialogContent.tsx
@@ -0,0 +1,34 @@
+import { Car } from '../types';
+import DialogContent from '@mui/material/DialogContent';
+import TextField from '@mui/material/TextField';
+import Stack from '@mui/material/Stack';
+
+type DialogFormProps = {
+  car: Car;
+  handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+function CarDialogContent({ car, handleChange }: DialogFormProps) {
+  return (
+    <>
+    <DialogContent>
+      <Stack spacing={2} mt={1}>
+        <TextField label="Brand" name="brand"
+          value={car.brand} onChange={handleChange} fullWidth/>
+        <TextField label="Model" name="model"
+          value={car.model} onChange={handleChange} fullWidth/>
+        <TextField label="Color" name="color"
+          value={car.color} onChange={handleChange} fullWidth/>
+        <TextField label="Year" name="modelYear"
+          value={car.modelYear} onChange={handleChange} fullWidth/>
+        <TextField label="Reg.nr." name="registerNumber"
+          value={car.registerNumber} onChange={handleChange} fullWidth/>
+        <TextField label="Price" name="price"
+          value={car.price} onChange={handleChange} fullWidth/>
+      </Stack>
+    </DialogContent>
+    </>
+  );
+}
+
+export default CarDialogContent;