start applying some basic styles

app/src/App.tsx

@@ -4,7 +4,7 @@ import {
   Switch,
   Route,
 } from 'react-router-dom';
-
+import { Container } from 'reactstrap';
 import 'App.css';
 
 import FishTable from 'Fishes';
@@ -36,15 +36,17 @@ const App: React.FunctionComponent = () => {
       <Router>
         <Navbar routes={routes} />
         <div className="cc-content">
-          <Switch>
-            {
-              routes.map((route, key) => (
-                <Route key={key} path={route.path} exact={route.exact}>
-                  <route.component/>
-                </Route>
-              ))
-            }
-          </Switch>
+          <Container>
+            <Switch>
+              {
+                routes.map((route, key) => (
+                  <Route key={key} path={route.path} exact={route.exact}>
+                    <route.component/>
+                  </Route>
+                ))
+              }
+            </Switch>
+          </Container>
         </div>
       </Router>
       <div className="cc-footer"></div>

app/src/Fishes/index.tsx

@@ -1,11 +1,8 @@
-import React, { FunctionComponent, useState } from 'react';
-import moment from 'moment';
-import { includes } from 'ramda';
+import React, { FunctionComponent, useState, useEffect } from 'react';
 import { getFishes } from 'services/Api';
-
+import Table from 'components/Table';
 import FISHES from './fish-data.json';
-import { Fish, Month, Time, FishLocation } from 'types';
-import { parseMonth, parseFishLocation, FishLocationLabel, parseFishSize } from 'services/DataParser';
+import { Fish } from 'types';
 
 type props = {
 };
@@ -14,141 +11,22 @@ const FishData = FISHES as unknown as Fish[];
 
 const FishTable: FunctionComponent<props> = () => {
   const [ data, setData ] = useState<Fish[]>(FishData);
-  getFishes().then(data => console.log("fishes, ", data));
-  const isInTimeRange = (rangeTime: Time) => {
-    return rangeTime.some(([from, to]) => moment().isBetween(moment().hour(from).minute(0), moment().hour(to < from ? to + 24 : to).minute(0)));
-  }
 
-  const availableNow = () => {
-    const currentMonth = moment().month() + 1;
-    const xs = data.filter(fish => {
-      return includes(currentMonth, fish.months) && isInTimeRange(fish.time)
-    });
-    setData(xs)
+  const fetchData = async () => {
+    const response = await getFishes()
+    setData(response)
   }
 
-  const columns = [
-    {
-      title: '',
-      dataIndex: 'image',
-      render: (image: string) => (<img src={image} alt='' className="fish-icon"/>)
-    },
-    {
-      title: 'Name',
-      dataIndex: 'name'
-    },
-    {
-      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',
-      render: (time: Time) => DisplayTime({time})
-    },
-    {
-      title: 'Availability',
-      dataIndex: 'months',
-      render: (months: Month[]) => DisplayMonths({ months })
-    },
-    {
-      title: 'Price',
-      dataIndex: 'price',
-      sorter: {
-        compare: (a: Fish, b: Fish) => a.price - b.price,
-        multiple: 1
-      }
-    },
-    {
-      title: 'Size',
-      dataIndex: 'shadowSize',
-      render: (size: number) => parseFishSize(size)
-    },
-  ];
+  useEffect(() => {
+    fetchData();
+  }, [])
 
   return (
     <>
-    {/* <div>
-      <Button onClick={() => availableNow()}>available now</Button>
-      <Button onClick={() => setData(FishData)}>show all</Button>
-    </div>
-    <Table<Fish>
-      columns={columns}
-      dataSource={data}
-      size="small"
-      pagination={false}
-    >
-    </Table> */}
+    <Table data={data}></Table>
     </>
 
   )
 }
 
-const showAvailability = (months: Month[]) => {
-  const currentMonth = (moment().get('month') as Month) + 1;
-
-  if (months.length === 12){
-    return {
-      color: 'green',
-      text: 'all year'
-    }
-  }
-  const availableNow = months.findIndex(m => m === currentMonth);
-  
-  if (availableNow === -1) {
-    const availableFrom = months.find(m => m > currentMonth) || 1;
-    return {
-      color: 'red',
-      text: `from ${parseMonth(availableFrom)}`
-    }
-  }
-
-  const nextIteration = (i: number) => (i + 1) % months.length;
-  
-  let i = availableNow;
-  while (true) {
-    const actual = months[i];
-    const next = months[nextIteration(i)];
-    
-    if ( (actual % 12) + 1 !== next) {
-      const lastMonth = actual === currentMonth;
-      return lastMonth ? {
-        color: 'orange',
-        text: 'last month available'
-      } : {
-        color: 'blue',
-        text: `until ${parseMonth(actual)}`
-      }
-    } else {
-      i = nextIteration(i);
-    }
-  }
-}
-
-const DisplayMonths: FunctionComponent<{months: Month[]}> = ({ months }) => {
-  const result = showAvailability(months);
-  return (
-    <div></div>
-    // <Tag color={result.color}>{result.text}</Tag>
-  )
-}
-
-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;

app/src/components/Navbar/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import './styles.css';
 import { NavLink as Link } from 'react-router-dom';
-import { Nav, NavItem, NavLink } from 'reactstrap';
+import { Nav, NavItem } from 'reactstrap';
 
 type NavbarProps = {
   routes: {
@@ -18,8 +18,8 @@ const Navbar: React.FunctionComponent<NavbarProps> = ({ routes }) => {
       <Nav>
         {
           routes.map((route, key) => (
-            <NavItem>
-              <Link to={route.path} className="nav-link" activeClassName="selected-page" key={key}>{route.name}</Link>
+            <NavItem key={key}>
+              <Link to={route.path} className="nav-link" activeClassName="selected-page">{route.name}</Link>
             </NavItem>
           ))
         }

app/src/components/Navbar/styles.css

@@ -13,7 +13,8 @@
   padding: 0.2rem 5rem;
 }
 
-.cc-navbar .nav a:hover {
+.cc-navbar .nav a:hover,
+.cc-navbar .nav a.selected-page {
   text-decoration: none;
   color: #e58541;
 }

app/src/components/Table/index.tsx

@@ -0,0 +1,118 @@
+import React, { FunctionComponent } from 'react';
+import Critter, { Time, Month } from 'types';
+import { Table as Tb } from 'reactstrap';
+import moment from 'moment';
+// import { includes } from 'ramda';
+import { parseMonth } from 'services/DataParser';
+import './styles.css';
+
+type TableProps = {
+  data: Critter[],
+}
+
+const Table: FunctionComponent<TableProps> = ({ data }) => {
+  // const isInTimeRange = (rangeTime: Time) => {
+  //   return rangeTime.some(([from, to]) => moment().isBetween(moment().hour(from).minute(0), moment().hour(to < from ? to + 24 : to).minute(0)));
+  // }
+
+  // const availableNow = () => {
+  //   const currentMonth = moment().month() + 1;
+  //   const xs = data.filter(fish => {
+  //     return includes(currentMonth, fish.months) && isInTimeRange(fish.time)
+  //   });
+  // }
+  
+  const showAvailability = (months: Month[]) => {
+    const currentMonth = (moment().get('month') as Month) + 1;
+  
+    if (months.length === 12){
+      return {
+        color: 'green',
+        text: 'all year'
+      }
+    }
+    const availableNow = months.findIndex(m => m === currentMonth);
+    
+    if (availableNow === -1) {
+      const availableFrom = months.find(m => m > currentMonth) || 1;
+      return {
+        color: 'red',
+        text: `from ${parseMonth(availableFrom)}`
+      }
+    }
+  
+    const nextIteration = (i: number) => (i + 1) % months.length;
+    
+    let i = availableNow;
+    while (true) {
+      const actual = months[i];
+      const next = months[nextIteration(i)];
+      
+      if ( (actual % 12) + 1 !== next) {
+        const lastMonth = actual === currentMonth;
+        return lastMonth ? {
+          color: 'orange',
+          text: 'last month available'
+        } : {
+          color: 'blue',
+          text: `until ${parseMonth(actual)}`
+        }
+      } else {
+        i = nextIteration(i);
+      }
+    }
+  }
+  
+  const DisplayMonths: FunctionComponent<{months: Month[]}> = ({ months }) => {
+    const result = showAvailability(months);
+    return (
+      <div>{result.text}</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>
+    );
+  }
+
+  return (
+    <div>
+      <Tb striped hover responsive className="critter-table">
+        <thead>
+          <tr>
+            <th></th>
+            <th>Name</th>
+            <th>price</th>
+            <th>location</th>
+            <th>time</th>
+            <th>availability</th>
+          </tr>
+        </thead>
+        <tbody>
+          {
+            data.map((critter, key) => (
+              <tr key={key}>
+                <td className="critter-img"><img className="critter-img" src={`${process.env.REACT_APP_API}/${critter.img}`} alt={critter.name}/></td>
+                <td>{critter.name}</td>
+                <td>{critter.price}</td>
+                <td>{critter.location}</td>
+                <td>{DisplayTime(critter)}</td>
+                <td>{DisplayMonths(critter)}</td>
+              </tr>
+            ))
+          }
+        </tbody>
+      </Tb>      
+    </div>
+  )
+}
+
+export default Table;

app/src/components/Table/styles.css

@@ -0,0 +1,31 @@
+.table.critter-table {
+  color: #563928;
+  background-color: #ded9bc;
+  border-radius: 1rem;
+}
+
+.table.critter-table th {
+  border: 0;
+}
+
+.table.critter-table thead {
+  border-bottom: 2px dashed #785b31;
+}
+
+.table-hover.table.critter-table tbody tr:hover {
+  color: #563928;
+  background-color: rgba(0,0,0,.075);
+}
+
+.table.critter-table td.critter-img {
+  padding: 0;
+}
+
+.table.critter-table tr td {
+  border: 0;
+}
+
+td.critter-img img {
+  width: 48px;
+  height: auto;
+}

app/src/index.css

@@ -4,7 +4,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #343434;
-  background-color: #ebcac3;
+  background-color: #eae1c6;
 }
 
 code {

app/src/types.ts

@@ -2,6 +2,24 @@
 // Project: [~critter-crossing~]
 // Definitions by: [~tinama~]
 
+interface Critter {
+  name: string,
+  img: string,
+  price: number,
+  location: string,
+  time: [number, number][],
+  months: Month[]
+}
+
+export interface Fish extends Critter {
+  shadowSize: number,
+}
+
+export interface Insect extends Critter {
+  flickPrice: number,
+}
+
+
 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";
@@ -26,22 +44,4 @@ enum ShadowSize {
 type ShadowSizeLabel = "Tiny" | "Small" | "Medium" | "Large" | "Very Large" | "Huge" | "Long" | "Fin";
 type InsectLocation = "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 Insect extends Critter {
-  flickPrice: number,
-  location: InsectLocation
-}
-
 export default Critter;