Domovská stránka Prehľadávať Pomoc
Prihlásiť sa
tati
/
critter-crossing
1
0
Fork 0
Súbory Issues 0 Pull requesty 0 Wiki
Prechádzať zdrojové kódy

Add components folder. Add reacstrap. Create Nav component

Tatiana Inama 6 rokov pred
rodič
12af977071
commit
24587369e1
14 zmenil súbory, kde vykonal 371 pridanie a 676 odobranie
Rozdelené zobrazenie Ukázať štatistiku rozdielnych dát
  1. 1 0
      app/.env
  2. 212 615
      app/package-lock.json
  3. 4 1
      app/package.json
  4. 2 1
      app/public/index.html
  5. 17 30
      app/src/App.tsx
  6. 6 5
      app/src/Fishes/index.tsx
  7. 32 0
      app/src/components/Navbar/index.tsx
  8. 26 0
      app/src/components/Navbar/styles.css
  9. 9 20
      app/src/index.css
  10. 2 1
      app/src/index.tsx
  11. 11 0
      app/src/services/Api.ts
  12. 3 3
      app/src/types.ts
  13. 37 0
      package-lock.json
  14. 9 0
      scraper/server.ts

+ 1 - 0
app/.env
Zobraziť súbor 

@@ -0,0 +1 @@
 
+REACT_APP_API='http://192.168.2.199:3001'

Rozdielové dáta súboru neboli zobrazené, pretože súbor je príliš veľký
+ 212 - 615
app/package-lock.json


+ 4 - 1
app/package.json
Zobraziť súbor 

@@ -6,18 +6,21 @@
 
     "@testing-library/jest-dom": "^4.2.4",
 
     "@testing-library/react": "^9.5.0",
 
     "@testing-library/user-event": "^7.2.1",
 
+    "@theme-ui/presets": "^0.3.0",
 
     "@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",
 
+    "@types/reactstrap": "^8.4.2",
 
+    "bootstrap": "^4.4.1",
 
     "moment": "^2.24.0",
 
     "ramda": "^0.27.0",
 
     "react": "^16.13.1",
 
     "react-dom": "^16.13.1",
 
     "react-router-dom": "^5.1.2",
 
     "react-scripts": "3.4.1",
 
+    "reactstrap": "^8.4.1",
 
     "typescript": "^3.7.5"
 
   },
 
   "scripts": {

+ 2 - 1
app/public/index.html
Zobraziť súbor 

@@ -15,6 +15,7 @@
 
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
 
     -->
 
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
+    <link href="https://fonts.googleapis.com/css2?family=Dosis:wght@600;800&display=swap" rel="stylesheet">
 
     <!--
 
       Notice the use of %PUBLIC_URL% in the tags above.
 
       It will be replaced with the URL of the `public` folder during the build.
 
@@ -24,7 +25,7 @@
 
       work correctly both with client-side routing and a non-root public URL.
 
       Learn how to configure a non-root public URL by running `npm run build`.
 
     -->
 
-    <title>AC Guide</title>
 
+    <title>critter crossing</title>
 
   </head>
 
   <body>
 
     <noscript>You need to enable JavaScript to run this app.</noscript>

+ 17 - 30
app/src/App.tsx
Zobraziť súbor 

@@ -1,16 +1,16 @@
 
 import React from 'react';
 
-import { Layout, Menu } from 'antd';
 
 import {
 
   BrowserRouter as Router,
 
   Switch,
 
   Route,
 
-  Link } from 'react-router-dom';
 
+} from 'react-router-dom';
 
+
 
 import 'App.css';
 
 
 import FishTable from 'Fishes';
 
 import InsectTable from 'Insects';
 
+import Navbar from 'components/Navbar';
 
 
-const { Header, Content, Footer } = Layout;
 
 const routes = [
 
   {
 
     path: "/",
 
@@ -32,35 +32,22 @@ const routes = [
 
 
 const App: React.FunctionComponent = () => {
 
   return (
 
-    <div className="App">
 
+    <div className="cc-app">
 
       <Router>
 
-        <Layout className="layout">
 
-          <Header>
 
-            <Menu theme="dark" mode="horizontal">
 
-              {
 
-                routes.map((route, key) => (
 
-                  <Menu.Item key={key}>
 
-                    <Link to={route.path}>{route.name}</Link>
 
-                  </Menu.Item>
 
-                ))
 
-              }
 
-            </Menu>
 
-          </Header>
 
-          <Content style={{ padding: '0 50px' }} className="site-layout-content">
 
-            <Switch>
 
-              {
 
-                routes.map((route, key) => (
 
-                  <Route key={key} path={route.path} exact={route.exact}>
 
-                    <route.component/>
 
-                  </Route>
 
-                ))
 
-              }
 
-            </Switch>
 
-          </Content>
 
-          <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
 
-        </Layout>
 
-
 
+        <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>
 
+        </div>
 
       </Router>
 
+      <div className="cc-footer"></div>
 
     </div>
 
   );
 
 }

+ 6 - 5
app/src/Fishes/index.tsx
Zobraziť súbor 

@@ -1,7 +1,7 @@
 
 import React, { FunctionComponent, useState } from 'react';
 
-import { Table, Tag, Button } from 'antd';
 
 import moment from 'moment';
 
 import { includes } from 'ramda';
 
+import { getFishes } from 'services/Api';
 
 
 import FISHES from './fish-data.json';
 
 import { Fish, Month, Time, FishLocation } from 'types';
 
@@ -14,7 +14,7 @@ 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)));
 
   }
 
@@ -74,7 +74,7 @@ const FishTable: FunctionComponent<props> = () => {
 
 
   return (
 
     <>
 
-    <div>
 
+    {/* <div>
 
       <Button onClick={() => availableNow()}>available now</Button>
 
       <Button onClick={() => setData(FishData)}>show all</Button>
 
     </div>
 
@@ -84,7 +84,7 @@ const FishTable: FunctionComponent<props> = () => {
 
       size="small"
 
       pagination={false}
 
     >
 
-    </Table>
 
+    </Table> */}
 
     </>
 
 
   )
 
@@ -134,7 +134,8 @@ const showAvailability = (months: Month[]) => {
 
 const DisplayMonths: FunctionComponent<{months: Month[]}> = ({ months }) => {
 
   const result = showAvailability(months);
 
   return (
 
-    <Tag color={result.color}>{result.text}</Tag>
 
+    <div></div>
 
+    // <Tag color={result.color}>{result.text}</Tag>
 
   )
 
 }

+ 32 - 0
app/src/components/Navbar/index.tsx
Zobraziť súbor 

@@ -0,0 +1,32 @@
 
+import React from 'react';
 
+import './styles.css';
 
+import { NavLink as Link } from 'react-router-dom';
 
+import { Nav, NavItem, NavLink } from 'reactstrap';
 
+
 
+type NavbarProps = {
 
+  routes: {
 
+    path: string,
 
+    name: string,
 
+    exact?: boolean,
 
+    component: React.FunctionComponent
 
+  }[]
 
+}
 
+
 
+const Navbar: React.FunctionComponent<NavbarProps> = ({ routes }) => {
 
+  return (
 
+    <div className="cc-navbar">
 
+      <Nav>
 
+        {
 
+          routes.map((route, key) => (
 
+            <NavItem>
 
+              <Link to={route.path} className="nav-link" activeClassName="selected-page" key={key}>{route.name}</Link>
 
+            </NavItem>
 
+          ))
 
+        }
 
+      </Nav>
 
+      <div className="scallop"></div>
 
+    </div>
 
+  )
 
+}
 
+
 
+export default Navbar;

+ 26 - 0
app/src/components/Navbar/styles.css
Zobraziť súbor 

@@ -0,0 +1,26 @@
 
+.cc-navbar .nav{
 
+  background-color: white;
 
+  display: flex;
 
+  justify-content: space-around;
 
+  padding: 1rem;
 
+  padding-top: 1.5rem;
 
+}
 
+
 
+.cc-navbar .nav a {
 
+  color: #797979;
 
+  text-transform: capitalize;
 
+  font-weight: 800;
 
+  padding: 0.2rem 5rem;
 
+}
 
+
 
+.cc-navbar .nav a:hover {
 
+  text-decoration: none;
 
+  color: #e58541;
 
+}
 
+
 
+.cc-navbar .scallop {
 
+  height: 2rem;
 
+  width: 100%;
 
+  background: -webkit-gradient(radial, 50% 0, 10, 50% 0, 50, from(#FFF), color-stop(0.49, #FFF), color-stop(0.51, rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0)));
 
+  background-size: 49px 100%;
 
+}

+ 9 - 20
app/src/index.css
Zobraziť súbor 

@@ -1,12 +1,10 @@
 
-@import '~antd/dist/antd.css';
 
-
 
 body {
 
   margin: 0;
 
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 
-    sans-serif;
 
+  font-family: 'Dosis', sans-serif;
 
   -webkit-font-smoothing: antialiased;
 
   -moz-osx-font-smoothing: grayscale;
 
+  color: #343434;
 
+  background-color: #ebcac3;
 
 }
 
 
 code {
 
@@ -14,27 +12,18 @@ code {
 
     monospace;
 
 }
 
 
-.App {
 
+.cc-app {
 
   height: 100vh;
 
-}
 
-.layout {
 
-  height: 100%;
 
+  display: flex;
 
+  flex-direction: column;
 
 }
 
 
-.site-layout-content {
 
-  background: #fff;
 
-  padding: 24px;
 
-  height: 100%;
 
+.cc-content {
 
+  flex-grow: 1;
 
 }
 
 
 .fish-icon {
 
   width: 48px;
 
   height: auto;
 
 }
 
-#components-layout-demo-top .logo {
 
-  width: 120px;
 
-  height: 31px;
 
-  background: rgba(255, 255, 255, 0.2);
 
-  margin: 16px 24px 16px 0;
 
-  float: left;
 
-}
 
+

+ 2 - 1
app/src/index.tsx
Zobraziť súbor 

@@ -1,8 +1,9 @@
 
 import React from 'react';
 
 import ReactDOM from 'react-dom';
 
-import './index.css';
 
 import App from './App';
 
 import * as serviceWorker from './serviceWorker';
 
+import 'bootstrap/dist/css/bootstrap.min.css'
 
+import './index.css';
 
 
 ReactDOM.render(
 
   <React.StrictMode>

+ 11 - 0
app/src/services/Api.ts
Zobraziť súbor 

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

+ 3 - 3
app/src/types.ts
Zobraziť súbor 

@@ -24,7 +24,7 @@ enum ShadowSize {
 
   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";

+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,

@@ -39,9 +39,9 @@ export interface Fish extends Critter {
 
   shadowSize: ShadowSize

 }

 

-export interface Bug extends Critter {

+export interface Insect extends Critter {

   flickPrice: number,

-  location: BugLocation

+  location: InsectLocation

 }

 

 export default Critter;

+ 37 - 0
package-lock.json
Zobraziť súbor 

@@ -2,10 +2,47 @@
 
   "requires": true,
 
   "lockfileVersion": 1,
 
   "dependencies": {
 
+    "@types/axios": {
 
+      "version": "0.14.0",
 
+      "resolved": "https://registry.npmjs.org/@types/axios/-/axios-0.14.0.tgz",
 
+      "integrity": "sha1-7CMA++fX3d1+udOr+HmZlkyvzkY=",
 
+      "requires": {
 
+        "axios": "*"
 
+      }
 
+    },
 
+    "axios": {
 
+      "version": "0.19.2",
 
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
 
+      "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
 
+      "requires": {
 
+        "follow-redirects": "1.5.10"
 
+      }
 
+    },
 
+    "debug": {
 
+      "version": "3.1.0",
 
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
 
+      "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
 
+      "requires": {
 
+        "ms": "2.0.0"
 
+      }
 
+    },
 
     "dotenv": {
 
       "version": "8.2.0",
 
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz",
 
       "integrity": "sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw=="
 
+    },
 
+    "follow-redirects": {
 
+      "version": "1.5.10",
 
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
 
+      "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
 
+      "requires": {
 
+        "debug": "=3.1.0"
 
+      }
 
+    },
 
+    "ms": {
 
+      "version": "2.0.0",
 
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
 
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
 
     }
 
   }
 
 }

+ 9 - 0
scraper/server.ts
Zobraziť súbor 

@@ -12,6 +12,15 @@ if (process.env.AC_FISH === undefined || process.env.AC_INSECT === undefined) {
 
 }
 
 
 app.use(express.static('public'))
 
+app.use((req, res, next)=> {
 
+  res.header("Access-Control-Allow-Origin", "*");
 
+  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
 
+  if ('OPTIONS' == req.method) {
 
+    res.sendStatus(200);
 
+  } else {
 
+    next();
 
+  }
 
+})
 
 
 app.get('/', (req, res) => { res.send('Hello World!') });