Fix env variables for App. Redirect home to Fishes component

README.md

@@ -6,7 +6,7 @@ Guide to catch all the fishes/insects from Animal Crossing.
 
 `npm install scraper/ & npm install app/`
 
-You also need config files with the following values:
+You also need config files with the following keys:
 
 ### Scraper
 ```
@@ -19,6 +19,6 @@ PUBLIC_PATH
 ### App
 
 ```
-REACT_APP_API **PATH to scraper
+REACT_APP_API **PATH to scraper (if not declared, app will redirect to '/')
 ```
 

app/src/App.tsx

@@ -3,6 +3,7 @@ import {
   BrowserRouter as Router,
   Switch,
   Route,
+  Redirect
 } from 'react-router-dom';
 import { Container } from 'reactstrap';
 import 'App.css';
@@ -16,7 +17,7 @@ const routes = [
     path: "/",
     name: 'home',
     exact: true,
-    component: () => <h2>Home</h2>
+    component: () => (<Redirect to="/fishes"/>)
   },
   {
     path: "/fishes",

app/src/components/Table/index.tsx

@@ -5,6 +5,7 @@ import Tag from 'components/Tag';
 import Button from 'components/Button';
 import Input from 'components/Input';
 import moment from 'moment';
+import { IMG } from 'services/Api';
 import { parseMonth } from 'services/DataParser';
 import { includes, descend, ascend, sortWith } from 'ramda';
 import { FaSort, FaSortUp, FaSortDown } from 'react-icons/fa';
@@ -235,7 +236,7 @@ const Table = <T extends Critter>({ data, columns }: TableProps<T>) => {
               {
                 critters.map((critter, key) => (
                   <tr key={key}>
-                    <td className="critter-img"><img className="critter-img" src={`${process.env.REACT_APP_API}/images/${critter.imgUrl}`} alt={critter.name}/></td>
+                    <td className="critter-img"><img className="critter-img" src={`${IMG}/${critter.imgUrl}`} alt={critter.name}/></td>
                     {
                       columns.map(({ key, display, type }, i) => (
                           <td key={i}>

app/src/services/Api.ts

@@ -1,11 +1,16 @@
 import Axios from 'axios';
 import { Fish, Insect } from 'types';
 
-export const getFishes = (): Promise<Fish[]> => Axios.get(`${process.env.REACT_APP_API}/data/fishes.json`).then(result => result.data);
+const API = process.env.REACT_APP_API || '';
 
-export const getInsects = (): Promise<Insect[]> => Axios.get(`${process.env.REACT_APP_API}/data/insects.json`).then(result => result.data);
+export const getFishes = (): Promise<Fish[]> => Axios.get(`${API}/data/fishes.json`).then(result => result.data);
+
+export const getInsects = (): Promise<Insect[]> => Axios.get(`${API}/data/insects.json`).then(result => result.data);
+
+export const IMG = `${API}/images`;
 
 export default {
   getFishes,
-  getInsects
+  getInsects,
+  IMG
 }