added bugs updated css for the tables to work better on mobile

src/components/BugTable/BugTable.css

@@ -0,0 +1,3 @@
+.hideMobile {
+  display: none;
+}

src/components/BugTable/BugTable.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+import { Table, Icon } from "semantic-ui-react";
+import './BugTable.css'
+
+
+export default function BugTable({ bug }) {
+  return (
+    <Table.Row key={bug.id} id={bug.id}>
+      <Table.Cell><Icon name='check' /></Table.Cell>
+      <Table.Cell>
+        <img className="photo" src={`/imgs/${bug.img}`} alt={bug.bug_name} />
+      </Table.Cell>
+      <Table.Cell>{bug.bug_name}</Table.Cell>
+      <Table.Cell className="hideMobile">{bug.price}</Table.Cell>
+      <Table.Cell>{bug.location}</Table.Cell>
+      <Table.Cell collapsing className="hideMobile">{bug.time}</Table.Cell>
+    </Table.Row>
+  )
+
+}

src/components/Nav/Nav.jsx

@@ -9,7 +9,7 @@ function Nav({ handleLogout, setCurrentHemisphere }) {
     console.log(hem, "im clicking");
   }
   return (
-    <Menu >
+    <Menu stackable>
       <Menu.Item as='a'>Animal Crossing</Menu.Item>
       <Menu.Item link><Link to="/fish">Fish</Link></Menu.Item>
       <Menu.Item link><Link to="/bugs">Bugs</Link></Menu.Item>

src/components/fish/fishtable.jsx

@@ -5,16 +5,19 @@ import './FishTable.css'
 
 
 export default function FishTable({ fish }) {
+  function clickHandler() {
+    console.log(fish, "clicked on this fish")
+  }
   return (
     <Table.Row key={fish.id} id={fish.id}>
-      <Table.Cell><Icon name='check' /></Table.Cell>
+      <Table.Cell><Icon name='check' onClick={() => clickHandler()} /></Table.Cell>
       <Table.Cell>
         <img className="photo" src={`/imgs/${fish.img}`} alt={fish.fish_name} />
       </Table.Cell>
       <Table.Cell>{fish.fish_name}</Table.Cell>
-      <Table.Cell>{fish.price}</Table.Cell>
-      <Table.Cell>{fish.shadow_size}</Table.Cell>
-      <Table.Cell collapsing>{fish.time}</Table.Cell>
+      <Table.Cell className="mobile hidden">{fish.price}</Table.Cell>
+      <Table.Cell className="mobile hidden">{fish.shadow_size}</Table.Cell>
+      <Table.Cell className="mobile hidden">{fish.time}</Table.Cell>
     </Table.Row>
   )
 

src/pages/App/App.css

@@ -36,3 +36,15 @@
     transform: rotate(360deg);
   }
 }
+
+@media only screen and (max-width: 767px) {
+
+  [class*="mobile hidden"],
+  [class*="tablet only"]:not(.mobile),
+  [class*="computer only"]:not(.mobile),
+  [class*="large monitor only"]:not(.mobile),
+  [class*="widescreen monitor only"]:not(.mobile),
+  [class*="or lower hidden"] {
+    display: none !important;
+  }
+}

src/pages/App/App.jsx

@@ -4,9 +4,8 @@ import "./App.css";
 import SignupPage from "../SignupPage/SignupPage";
 import LoginPage from "../LoginPage/LoginPage";
 import userService from "../../utils/userService";
-import bugData from '../../Data/bugData'
-import fishData from '../../Data/fishData'
 import Fish from '../Fish/Fish'
+import Bugs from '../Bugs/Bugs'
 import Loader from '../../components/Loader/Loader'
 import { Container } from "semantic-ui-react";
 import Nav from '../../components/Nav/Nav'
@@ -34,6 +33,7 @@ function App() {
         <Routes>
           <Route path="/" element={<h1>This is Home Page!</h1>} />
           <Route path="/fish" element={<Fish currentHemisphere={currentHemisphere} />} />
+          <Route path="/bugs" element={<Bugs currentHemisphere={currentHemisphere} />} />
           <Route
             path="/login"
             element={<LoginPage handleSignUpOrLogin={handleSignUpOrLogin} />}

src/pages/Bugs/Bugs.jsx

@@ -0,0 +1,65 @@
+import React, { useState, useEffect } from "react";
+
+import { Table, Container } from "semantic-ui-react";
+import BugTable from '../../components/BugTable/BugTable'
+import Loading from '../../components/Loader/Loader'
+import BugData from '../../Data/bugData'
+
+export default function Bug({ currentHemisphere }) {
+  console.log(BugData, "data")
+  const [currentBug, setCurrentBug] = useState();
+  const [loading, setLoading] = useState(true);
+  async function getData() {
+    var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+    const today = new Date();
+    const currentHour = `h_${today.getHours()}`;
+    console.log(currentHour)
+    const currentMonth = months[today.getMonth()];
+    console.log(currentMonth, "month")
+    let filterBug = await BugData.filter(function (i) {
+      return i.time_available[currentHour] === true &&
+        i.hemisphere[currentHemisphere][currentMonth] === true;
+    });
+    console.log(filterBug, "filteredbug")
+    setCurrentBug(filterBug);
+    setLoading(() => false);
+  }
+  console.log(currentBug, "bug page")
+  // const allBug = currentBug.map((m, i) => <BugTable key={m.id} {...m} />)
+
+  useEffect(() => {
+    getData();
+  }, [currentHemisphere]);
+
+  if (loading) {
+    return (
+      <>
+        <Loading />
+      </>
+    );
+  }
+  return (
+    <Container style={{ maxWidth: 800 }}>
+      <Table basic striped unstackable>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell>Caught</Table.HeaderCell>
+            <Table.HeaderCell></Table.HeaderCell>
+            <Table.HeaderCell>Name</Table.HeaderCell>
+            <Table.HeaderCell className="mobile hidden">Price</Table.HeaderCell>
+            <Table.HeaderCell>Location</Table.HeaderCell>
+            <Table.HeaderCell className="mobile hidden">Avaliable</Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {currentBug.map((bug) => {
+            return (
+              <BugTable bug={bug} />
+            );
+          })}
+        </Table.Body>
+      </Table>
+    </Container>
+  )
+
+}

src/pages/Fish/Fish.jsx

@@ -14,7 +14,7 @@ export default function Fish({ currentHemisphere }) {
     const currentHour = `h_${today.getHours()}`;
     const currentMonth = months[today.getMonth()];
     console.log(currentMonth, "month")
-    let filterFish = await fishData.fishData.filter(function (i) {
+    let filterFish = await fishData.filter(function (i) {
       return i.time_available[currentHour] === true &&
         i.hemisphere[currentHemisphere][currentMonth] === true;
     });
@@ -24,7 +24,9 @@ export default function Fish({ currentHemisphere }) {
   }
   console.log(currentFish, "fish page")
   // const allFish = currentFish.map((m, i) => <FishTable key={m.id} {...m} />)
+  function addCaught() {
 
+  }
   useEffect(() => {
     getData();
   }, [currentHemisphere]);
@@ -38,21 +40,21 @@ export default function Fish({ currentHemisphere }) {
   }
   return (
     <Container style={{ maxWidth: 800 }}>
-      <Table basic striped>
+      <Table basic striped unstackable>
         <Table.Header>
           <Table.Row>
             <Table.HeaderCell>Caught</Table.HeaderCell>
-            <Table.HeaderCell>img</Table.HeaderCell>
+            <Table.HeaderCell></Table.HeaderCell>
             <Table.HeaderCell>Name</Table.HeaderCell>
-            <Table.HeaderCell>Price</Table.HeaderCell>
-            <Table.HeaderCell>Shadow Size</Table.HeaderCell>
-            <Table.HeaderCell>Avaliable</Table.HeaderCell>
+            <Table.HeaderCell className="mobile hidden">Price</Table.HeaderCell>
+            <Table.HeaderCell className="mobile hidden">Shadow Size</Table.HeaderCell>
+            <Table.HeaderCell className="mobile hidden">Avaliable</Table.HeaderCell>
           </Table.Row>
         </Table.Header>
         <Table.Body>
           {currentFish.map((fish) => {
             return (
-              <FishTable fish={fish} />
+              <FishTable fish={fish} addCaught={addCaught} />
             );
           })}
         </Table.Body>