Add scrape files. Separate Fish and Insect components. Create types file

src/App.tsx

@@ -1,67 +1,15 @@
 import React from 'react';
-import FISHES from './fish-data.json';
-import { Layout, Menu, Table } from 'antd';
+import FishTable from './Fish';
+import { Layout, Menu } from 'antd';
 import {
   BrowserRouter as Router,
   Switch,
   Route,
   Link } from 'react-router-dom';
 import './App.css';
+import InsectTable from './Insect';
 const { Header, Content, Footer } = Layout;
 
-const Bugs = () => {
-  return (
-    <h2> Bugs </h2>
-  )
-}
-
-// name: fish.name,
-// image: fish.imageLink,
-// price: fish.price,
-// location: mkLocation(fish.location),
-// time: mkTime(fish.time),
-// months: mkMonth(fish),
-// shadowSize: mkSize(fish.shadowSize)
-
-const Fishes = () => {
-  const columns = [
-    {
-      title: '',
-      dataIndex: 'image',
-      render: (image: string) => (<img src={image} alt='' className="fish-icon"/>)
-    },
-    {
-      title: 'Name',
-      dataIndex: 'name'
-    },
-    {
-      title: 'Location',
-      dataIndex: 'location',
-    },
-    {
-      title: 'Time',
-      dataIndex: 'time'
-    },
-    {
-      title: 'Months',
-      dataIndex: 'months'
-    },
-    {
-      title: 'Price',
-      dataIndex: 'price'
-    },
-    {
-      title: 'Size',
-      dataIndex: 'shadowSize'
-    },
-  ];
-
-  return (
-    <Table columns={columns} dataSource={FISHES} size="small">
-    </Table>
-  )
-}
-
 const routes = [
   {
     path: "/",
@@ -72,12 +20,12 @@ const routes = [
   {
     path: "/fishes",
     name: 'fishes',
-    component: Fishes
+    component: FishTable
   },
   {
-    path: "/bugs",
-    name: 'bugs',
-    component: Bugs
+    path: "/insects",
+    name: 'insects',
+    component: InsectTable
   }
 ];
 
@@ -112,11 +60,6 @@ const App: React.FunctionComponent = () => {
         </Layout>
 
       </Router>
-      {/* {
-        FISHES.map(fish => (
-          <p>{fish.name}</p>
-        ))
-      }       */}
     </div>
   );
 }

src/Fish.tsx

@@ -0,0 +1,55 @@
+import React, { FunctionComponent } from 'react';
+import { Table } from 'antd';
+
+import FISHES from './fish-data.json';
+import { Fish } from './types';
+
+type props = {
+};
+
+const FishData = FISHES as unknown as Fish[];
+
+const FishTable: FunctionComponent<props> = () => {
+  const columns = [
+    {
+      title: '',
+      dataIndex: 'image',
+      render: (image: string) => (<img src={image} alt='' className="fish-icon"/>)
+    },
+    {
+      title: 'Name',
+      dataIndex: 'name'
+    },
+    {
+      title: 'Location',
+      dataIndex: 'location',
+    },
+    {
+      title: 'Time',
+      dataIndex: 'time'
+    },
+    {
+      title: 'Months',
+      dataIndex: 'months'
+    },
+    {
+      title: 'Price',
+      dataIndex: 'price',
+      sorter: {
+        compare: (a: Fish, b: Fish) => a.price - b.price,
+        multiple: 1
+      }
+    },
+    {
+      title: 'Size',
+      dataIndex: 'shadowSize'
+    },
+  ];
+
+  return (
+    <Table columns={columns} dataSource={FishData} size="small">
+    </Table>
+  )
+}
+
+export default FishTable;

src/Insect.tsx

@@ -0,0 +1,9 @@
+import React, { FunctionComponent } from 'react';
+
+const InsectTable: FunctionComponent = () => {
+  return (
+    <div>insect</div>
+  )
+};
+
+export default InsectTable;

src/types.ts

@@ -0,0 +1,47 @@
+// Type definitions for [~Critter~]
+// Project: [~critter-crossing~]
+// Definitions by: [~tinama~]
+
+type Time = number[][];
+type Month = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+type FishLocationLabel = "River" | "River Clifftop" | "River Mouth" | "Pond" | "Sea" | "Pier";
+enum FishLocation {
+  River = 1,
+  RiverClifftop,
+  RiverMouth,
+  Pond,
+  Sea,
+  Pier
+}
+enum ShadowSize {
+  Tiny = 1,
+  Small,
+  Medium,
+  Large,
+  VeryLarge,
+  Huge,
+  Long,
+  Fin
+}
+type ShadowSizeLabel = "Tiny" | "Small" | "Medium" | "Large" | "Very Large" | "Huge" | "Long" | "Fin";
+type BugLocation = "Flying" | "Flying by Hybrid Flowers" | "Flying by Light" | "On Trees" | "On the Ground" | "On Flowers" | "On Flowers (White)" | "Shaking Trees" | "Underground" | "On Ponds and Rivers" | "On Tree Stumps" | "On the Ground (rolling snowballs)" | "On Trees (Coconut)" | "Under Trees Disguised as Leafs" | "On rotten food" | "Beach disguised as Shells" | "On Beach Rocks" | "On Trash Items" | "Villager's Heads" | "On Rocks (Rain)" | "Hitting Rocks";
+
+export interface Critter {
+  name: string,
+  image: string,
+  price: number,
+  time: Time,
+  months: Month[],
+}
+
+export interface Fish extends Critter {
+  location: FishLocation,
+  shadowSize: ShadowSize
+}
+
+export interface Bug extends Critter {
+  flickPrice: number,
+  location: BugLocation
+}
+
+export default Critter;