Improve data scraping. Add ramda

package-lock.json

@@ -1734,6 +1734,14 @@
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.2.tgz",
       "integrity": "sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw=="
     },
+    "@types/ramda": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@types/ramda/-/ramda-0.27.3.tgz",
+      "integrity": "sha512-fUUQsx88sJksuZXh6p11Bl4m1IHwXCez1mgIcbZ7Z4PvUdOqx8rGsqP1zDkixrnMPvupXXrwV1/1/vJEGjSehA==",
+      "requires": {
+        "ts-toolbelt": "^6.3.3"
+      }
+    },
     "@types/react": {
       "version": "16.9.34",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.34.tgz",
@@ -13658,6 +13666,11 @@
       "resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.1.6.tgz",
       "integrity": "sha512-CrG5GqAAzMT7144Cl+UIFP7mz/iIhiy+xQ6GGcnjTezhALT02uPMRw7tgDSESgB5MsfKt55+GPWw4ir1kVtMIQ=="
     },
+    "ts-toolbelt": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/ts-toolbelt/-/ts-toolbelt-6.4.2.tgz",
+      "integrity": "sha512-B27axztBC+3K4D1cuaRO3ygMcyR54LRpQxlt1zNIS9RnqDwrlDoVlIIazDqWxLuRaFzGWNvDLkjDgs3eeLEVig=="
+    },
     "tslib": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.11.1.tgz",

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^7.2.1",
     "@types/jest": "^24.9.1",
     "@types/node": "^12.12.35",
+    "@types/ramda": "^0.27.3",
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.6",
     "antd": "^4.1.3",

src/DataParser.ts

@@ -0,0 +1,26 @@
+const month = [ '', 'jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];
+
+// enum LOCATION {
+//   River,
+//   RiverClifftop,
+//   RiverMouth,
+//   Pond,
+//   Sea,
+//   Pier
+// };
+export const FishLocationLabel = [
+  'river',
+  'clifftop river',
+  'river mouth',
+  'pond',
+  'sea',
+  'pier'
+];
+
+export const parseMonth = (num: number) => month[num];
+export const parseFishLocation = (num: number) => FishLocationLabel[num];
+
+export default {
+  parseMonth,
+  parseFishLocation
+};

src/Fish.tsx

@@ -1,8 +1,9 @@
 import React, { FunctionComponent } from 'react';
-import { Table } from 'antd';
+import { Table, Tag } from 'antd';
 
 import FISHES from './fish-data.json';
-import { Fish } from './types';
+import { Fish, Month, Time, FishLocation } from './types';
+import { parseMonth, parseFishLocation, FishLocationLabel } from './DataParser';
 
 type props = {
 };
@@ -23,14 +24,22 @@ const FishTable: FunctionComponent<props> = () => {
     {
       title: 'Location',
       dataIndex: 'location',
+      render: (location: FishLocation) => parseFishLocation(location),
+      filters: FishLocationLabel.map((location, id) => ({
+        text: location,
+        value: id
+      })),
+      onFilter: (value: string | number | boolean, fish: Fish) => fish.location === value,
     },
     {
       title: 'Time',
-      dataIndex: 'time'
+      dataIndex: 'time',
+      render: (time: Time) => DisplayTime({time})
     },
     {
       title: 'Months',
-      dataIndex: 'months'
+      dataIndex: 'months',
+      render: (months: Month[]) => DisplayMonths({ months })
     },
     {
       title: 'Price',
@@ -47,9 +56,56 @@ const FishTable: FunctionComponent<props> = () => {
   ];
 
   return (
-    <Table columns={columns} dataSource={FishData} size="small">
+    <Table<Fish>
+      columns={columns}
+      dataSource={FishData}
+      size="small"
+      pagination={false}
+    >
     </Table>
   )
 }
 
+const DisplayMonths: FunctionComponent<{months: Month[]}> = ({ months }) => {
+  const getColor = (month: number) => {
+    switch (month) {
+      case 12:
+      case 1:
+      case 2:
+        return 'blue';
+      case 3:
+      case 4:
+      case 5:
+        return 'pink';
+      case 6:
+      case 7:
+      case 8:
+        return 'gold';
+      case 9:
+      case 10:
+      case 11:
+        return 'volcano'
+    }
+  }
+  return (
+    <div>
+      { months.map(month => (
+        <Tag key={month} color={getColor(month)}>{parseMonth(month)}</Tag>
+      ))}
+    </div>
+  )
+}
+
+const DisplayTime: FunctionComponent<{time: Time}> = ({ time }) => {
+  return (
+    <div>
+      {
+        time.map(([from, to]) => {
+          return (from === 0 && to === 24) ?
+            'All day' : `${from}hs - ${to}hs`
+        }).join(' & ')
+      }
+    </div>
+  );
+}
 export default FishTable;

src/types.ts

@@ -2,11 +2,11 @@
 // Project: [~critter-crossing~]
 // Definitions by: [~tinama~]
 
-type Time = number[][];
-type Month = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type Time = [number, number][];
+export 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,
+export enum FishLocation {
+  River,
   RiverClifftop,
   RiverMouth,
   Pond,
@@ -14,7 +14,7 @@ enum FishLocation {
   Pier
 }
 enum ShadowSize {
-  Tiny = 1,
+  Tiny,
   Small,
   Medium,
   Large,