From 6b790bbf28ad7de801d78b1cb95332a3334d981b Mon Sep 17 00:00:00 2001 From: Umoren Date: Wed, 13 May 2020 21:01:24 +0100 Subject: [PATCH 1/4] (fix): deleted some files --- package-lock.json | 98 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 4 +- src/App.js | 16 +------- 3 files changed, 102 insertions(+), 16 deletions(-) diff --git a/package-lock.json b/package-lock.json index 83f3c05..4b88866 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1078,6 +1078,29 @@ "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz", "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==" }, + "@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "requires": { + "@emotion/memoize": "0.7.4" + } + }, + "@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" + }, + "@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, + "@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, "@hapi/address": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz", @@ -2687,6 +2710,22 @@ "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.6.tgz", "integrity": "sha512-1aGDUfL1qOOIoqk9QKGIo2lANk+C7ko/fqH0uIyC71x3PEGz0uVP8ISgfEsFuG+FKmjHTvFK/nNM8dowpmUxLA==" }, + "babel-plugin-styled-components": { + "version": "1.10.7", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.7.tgz", + "integrity": "sha512-MBMHGcIA22996n9hZRf/UJLVVgkEOITuR2SvjHLb5dSTUyR4ZRGn+ngITapes36FI3WLxZHfRhkA1ffHxihOrg==", + "requires": { + "@babel/helper-annotate-as-pure": "^7.0.0", + "@babel/helper-module-imports": "^7.0.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.11" + } + }, + "babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=" + }, "babel-plugin-syntax-object-rest-spread": { "version": "6.13.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz", @@ -3319,6 +3358,11 @@ } } }, + "camelize": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", + "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=" + }, "caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -3951,6 +3995,11 @@ "postcss": "^7.0.5" } }, + "css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=" + }, "css-color-names": { "version": "0.0.4", "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", @@ -4041,6 +4090,16 @@ "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" }, + "css-to-react-native": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz", + "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==", + "requires": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -6358,6 +6417,14 @@ "minimalistic-crypto-utils": "^1.0.1" } }, + "hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "requires": { + "react-is": "^16.7.0" + } + }, "hosted-git-info": { "version": "2.8.8", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz", @@ -11210,6 +11277,15 @@ } } }, + "react-spring": { + "version": "8.0.27", + "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.27.tgz", + "integrity": "sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==", + "requires": { + "@babel/runtime": "^7.3.1", + "prop-types": "^15.5.8" + } + }, "read-pkg": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", @@ -12063,6 +12139,11 @@ } } }, + "shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "shebang-command": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz", @@ -12783,6 +12864,23 @@ } } }, + "styled-components": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.1.0.tgz", + "integrity": "sha512-0Qs2wEkFBXHFlysz6CV831VG6HedcrFUwChjnWylNivsx14MtmqQsohi21rMHZxzuTba063dEyoe/SR6VGJI7Q==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^0.8.8", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + } + }, "stylehacks": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz", diff --git a/package.json b/package.json index 8e7a1ab..500ff18 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,9 @@ "node-sass": "4.14.1", "react": "^16.13.1", "react-dom": "^16.13.1", - "react-scripts": "3.4.1" + "react-scripts": "3.4.1", + "react-spring": "^8.0.27", + "styled-components": "^5.1.0" }, "scripts": { "start": "react-scripts start", diff --git a/src/App.js b/src/App.js index 34994f3..7fb2997 100644 --- a/src/App.js +++ b/src/App.js @@ -1,24 +1,10 @@ import React from 'react'; -import logo from './logo.svg'; import './App.scss'; function App() { return (
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
+
); } From 19a1a2f71cfbda1c95091cf0a9ffb9854b060444 Mon Sep 17 00:00:00 2001 From: Janetsomehow Date: Sat, 16 May 2020 20:47:22 +0100 Subject: [PATCH 2/4] Created Navbar components --- src/App.js | 37 +++++++++++++++++++------- src/assets/colored 1.png | Bin 0 -> 7849 bytes src/components/navbar/Brand.js | 17 ++++++++++++ src/components/navbar/BurgerMenu.js | 0 src/components/navbar/CollapseMenu.js | 0 src/components/navbar/Navbar.js | 0 src/index.js | 14 +--------- src/styles/Global.js | 25 +++++++++++++++++ 8 files changed, 71 insertions(+), 22 deletions(-) create mode 100644 src/assets/colored 1.png create mode 100644 src/components/navbar/Brand.js create mode 100644 src/components/navbar/BurgerMenu.js create mode 100644 src/components/navbar/CollapseMenu.js create mode 100644 src/components/navbar/Navbar.js create mode 100644 src/styles/Global.js diff --git a/src/App.js b/src/App.js index 7fb2997..26ec382 100644 --- a/src/App.js +++ b/src/App.js @@ -1,12 +1,31 @@ -import React from 'react'; -import './App.scss'; - -function App() { - return ( -
- -
- ); +import React from "react"; +import Navbar from "./components/navbar/Navbar"; +import GlobalStyle from './styles/Global' + +class App extends React.Component { + + state = { + openNavbar: false + } + + handleNavbar = () => { + this.setState({ + openNavbar: !this.state.openNavbar + }) + } + + render() { + + return ( +
+ + +
+ ) + } } export default App; diff --git a/src/assets/colored 1.png b/src/assets/colored 1.png new file mode 100644 index 0000000000000000000000000000000000000000..909f24699b0c4d27b4e49af5bdc05c6debf726b2 GIT binary patch literal 7849 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 Hu0mjfJsEC2 literal 0 HcmV?d00001 diff --git a/src/components/navbar/Brand.js b/src/components/navbar/Brand.js new file mode 100644 index 0000000..a95ab69 --- /dev/null +++ b/src/components/navbar/Brand.js @@ -0,0 +1,17 @@ +import React from 'react'; +import styled from 'styled-components'; +import logo from '../../assets/colored 1.png'; + +const Image = styled.img` + height: 45px; + width: 192.46px; + margin: auto 0; +`; + +const Brand = () => { + return ( + Farm Reach logo + ); +}; + +export default Brand; diff --git a/src/components/navbar/BurgerMenu.js b/src/components/navbar/BurgerMenu.js new file mode 100644 index 0000000..e69de29 diff --git a/src/components/navbar/CollapseMenu.js b/src/components/navbar/CollapseMenu.js new file mode 100644 index 0000000..e69de29 diff --git a/src/components/navbar/Navbar.js b/src/components/navbar/Navbar.js new file mode 100644 index 0000000..e69de29 diff --git a/src/index.js b/src/index.js index 4cb9410..b597a44 100644 --- a/src/index.js +++ b/src/index.js @@ -1,17 +1,5 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import './index.scss'; import App from './App'; -import * as serviceWorker from './serviceWorker'; -ReactDOM.render( - - - , - document.getElementById('root') -); - -// If you want your app to work offline and load faster, you can change -// unregister() to register() below. Note this comes with some pitfalls. -// Learn more about service workers: https://bit.ly/CRA-PWA -serviceWorker.unregister(); +ReactDOM.render(, document.getElementById('root')); diff --git a/src/styles/Global.js b/src/styles/Global.js new file mode 100644 index 0000000..731b9e6 --- /dev/null +++ b/src/styles/Global.js @@ -0,0 +1,25 @@ +import { createGlobalStyle } from 'styled-components'; + +const GlobalStlyes = createGlobalStyle` + + @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap'); + + *, + *::after, + *::before { + margin: 0px; + padding: 0px; + box-sizing: inherit; + } + + html { + font-size: 12px; + } + + body { + box-sizing: border-box; + font-family: 'Roboto', sans-serif; + } +`; + +export default GlobalStlyes; From d740a8d41e7ba2ac22fc0924e1630ad9f14c8f11 Mon Sep 17 00:00:00 2001 From: Janetsomehow Date: Wed, 20 May 2020 09:07:12 +0100 Subject: [PATCH 3/4] Fixing issues in App.js --- src/App.js | 32 +++++++++++++++++--------------- src/components/navbar/Brand.js | 6 +----- 2 files changed, 18 insertions(+), 20 deletions(-) diff --git a/src/App.js b/src/App.js index 26ec382..bc8983e 100644 --- a/src/App.js +++ b/src/App.js @@ -1,30 +1,32 @@ -import React from "react"; -import Navbar from "./components/navbar/Navbar"; -import GlobalStyle from './styles/Global' +import React, { Component } from 'react'; +import Navbar from './components/navbar/Navbar'; -class App extends React.Component { +import GlobalStyle from './styles/Global'; - state = { - openNavbar: false +class App extends Component { + constructor(props) { + super(props); + + this.state = { + navbarOpen: false + }; } - handleNavbar = () => { - this.setState({ - openNavbar: !this.state.openNavbar - }) + + handleNavbar() { + this.setState({ navbarOpen: !this.state.navbarOpen }); } render() { - return ( -
+ <> -
- ) + + ); } } diff --git a/src/components/navbar/Brand.js b/src/components/navbar/Brand.js index a95ab69..c3255cb 100644 --- a/src/components/navbar/Brand.js +++ b/src/components/navbar/Brand.js @@ -8,10 +8,6 @@ const Image = styled.img` margin: auto 0; `; -const Brand = () => { - return ( - Farm Reach logo - ); -}; +const Brand = () => Farm Reach logo; export default Brand; From 55be22c434b073ce1d5c29585de7a0db2d338b65 Mon Sep 17 00:00:00 2001 From: Umoren Date: Fri, 22 May 2020 19:26:55 +0100 Subject: [PATCH 4/4] I am stuck, i need help --- package.json | 1 + src/App.js | 35 ++------- src/components/Footer.js | 14 ++++ src/components/HomePage.js | 40 ++++++++++ src/components/navbar/BurgerMenu.js | 47 ++++++++++++ src/components/navbar/CollapseMenu.js | 63 ++++++++++++++++ src/components/navbar/Navbar.js | 102 ++++++++++++++++++++++++++ src/components/navbar/Search.js | 6 ++ src/styles/Global.js | 2 +- 9 files changed, 279 insertions(+), 31 deletions(-) create mode 100644 src/components/Footer.js create mode 100644 src/components/HomePage.js create mode 100644 src/components/navbar/Search.js diff --git a/package.json b/package.json index 500ff18..b466ac2 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "@testing-library/user-event": "^7.2.1", "eslint-config-airbnb-base": "^14.1.0", "node-sass": "4.14.1", + "prop-types": "^15.7.2", "react": "^16.13.1", "react-dom": "^16.13.1", "react-scripts": "3.4.1", diff --git a/src/App.js b/src/App.js index bc8983e..962b958 100644 --- a/src/App.js +++ b/src/App.js @@ -1,33 +1,8 @@ -import React, { Component } from 'react'; -import Navbar from './components/navbar/Navbar'; +import React from 'react'; +import HomePage from './components/HomePage'; -import GlobalStyle from './styles/Global'; - -class App extends Component { - constructor(props) { - super(props); - - this.state = { - navbarOpen: false - }; - } - - - handleNavbar() { - this.setState({ navbarOpen: !this.state.navbarOpen }); - } - - render() { - return ( - <> - - - - ); - } -} +const App = () => ( + +); export default App; diff --git a/src/components/Footer.js b/src/components/Footer.js new file mode 100644 index 0000000..5af3717 --- /dev/null +++ b/src/components/Footer.js @@ -0,0 +1,14 @@ +import React from 'react'; +import Brand from './navbar/Brand'; + +const Footer = () => ( + <> +
+ +
+

Hey some shit us here

+
+
+ +); +export default Footer; diff --git a/src/components/HomePage.js b/src/components/HomePage.js new file mode 100644 index 0000000..77f5b59 --- /dev/null +++ b/src/components/HomePage.js @@ -0,0 +1,40 @@ +import React, { Component } from 'react'; +import Navbar from './navbar/Navbar'; +import Footer from './Footer'; + +class HomePage extends Component { + constructor(props) { + super(props); + this.handleNavbar = this.handleNavbar.bind(this); + this.navState = this.navState.bind(this); + this.state = { + navbarOpen: false + }; + } + + handleNavbar() { + this.setState((prevState) => ({ + navbarOpen: !prevState.navbarOpen + })); + } + + navState() { + this.setState((prevState) => ({ + navbarOpen: prevState.navbarOpen + })); + } + + render() { + return ( + <> + +