gges5110 · gges5110 · Sep 30, 2020 · Sep 30, 2020
diff --git a/.babelrc b/.babelrc
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,11 +28,7 @@
   ],
   "dependencies": {
     "express": "^4.17.1",
-    "json-server": "^0.16.0",
-    "lodash.debounce": "^4.0.8",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
-    "semantic-ui-react": "^1.0.0"
+    "json-server": "^0.16.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "5.11.4",
@@ -44,14 +40,15 @@
     "@types/react": "16.9.49",
     "@types/react-dom": "16.9.8",
     "coveralls": "3.1.0",
-    "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.5",
-    "enzyme-to-json": "3.6.1",
     "fetch-mock": "9.10.7",
-    "isomorphic-fetch": "3.0.0",
+    "lodash.debounce": "4.0.8",
+    "node-fetch": "^2.6.1",
     "prettier": "2.1.2",
-    "prop-types": "15.7.2",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
     "react-scripts": "3.4.3",
+    "semantic-ui-css": "2.4.1",
+    "semantic-ui-react": "1.3.1",
     "typescript": "4.0.3"
   },
   "engines": {

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -2,12 +2,18 @@
 <html>
   <head>
     <meta charset="utf-8">
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+            name="description"
+            content="Web site created using create-react-app"
+    />
     <meta name="google-site-verification" content="z-EYLvuBqfPUwJy99KVRiPvGh4BZ0HyMG_wGH0Bvl9Q" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
 
     <title>React Semantic UI Sortable Table Example</title>
-    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/>
   </head>
   <body>
     <div id="contents"></div>

diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,5 +1,23 @@
 {
+  "short_name": "React Semantic UI Sortable Table Example",
   "name": "React Semantic UI Sortable Table Example",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
   "start_url": ".",
   "display": "standalone",
   "theme_color": "#000000",

diff --git a/server/vehicles.json b/server/vehicles.json
@@ -3789,7 +3789,7 @@
       "package": "XSE",
       "fuelType": "Diesel",
       "transmission": "Manual",
-      "favorite": false
+      "favorite": true
     },
     {
       "id": 380,
@@ -6349,7 +6349,7 @@
       "package": "SE",
       "fuelType": "Gas",
       "transmission": "Auto",
-      "favorite": false
+      "favorite": true
     },
     {
       "id": 636,

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { Button, Container, Header, Icon, Menu } from "semantic-ui-react";
 import { VehicleList } from "./VehicleList";
+import "semantic-ui-css/semantic.min.css";
 
 export const App: React.FC = () => (
   <Container style={{ padding: "2em 0em" }}>

diff --git a/src/VehicleList.spec.tsx b/src/VehicleList.spec.tsx
@@ -1,9 +1,9 @@
 import React from "react";
-import "isomorphic-fetch";
 import fetchMock from "fetch-mock";
 import { VehicleList } from "./VehicleList";
 import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import "node-fetch";
 
 jest.mock("lodash.debounce", () => jest.fn(fn => fn));
 

diff --git a/src/VehicleList.tsx b/src/VehicleList.tsx
@@ -42,7 +42,10 @@ export const VehicleList: React.FC = () => {
     limit: 10
   });
   const [filter, setFilter] = useState<string>("");
-  const [sort, setSort] = useState<SortField>({ sortColumn: "id" });
+  const [sort, setSort] = useState<SortField>({
+    sortColumn: "id",
+    sortOrder: "ascending"
+  });
 
   const loadData = () => {
     setLoading(true);

diff --git a/src/VehiclePageSizeSelect.tsx b/src/VehiclePageSizeSelect.tsx
@@ -31,7 +31,7 @@ export const VehiclePageSizeSelect: React.FC<VehiclePageSizeSelectProps> = ({
       <Dropdown
         inline={true}
         options={limitOptions}
-        defaultValue={limit}
+        defaultValue={String(limit)}
         onChange={handleChangeLimit}
       />
     </React.Fragment>

diff --git a/src/setupTests.js b/src/setupTests.js
@@ -1,5 +1 @@
-import { configure } from "enzyme";
-import Adapter from "enzyme-adapter-react-16";
 import "@testing-library/jest-dom/extend-expect";
-
-configure({ adapter: new Adapter() });