Mohammad2

.env

@@ -0,0 +1,5 @@
+REACT_APP_SERVER_URL=http://localhost:3005
+REACT_APP_domain=dev-1rcx5l4t.us.auth0.com
+REACT_APP_clientId=SGPjhjpJ06lcVrTJpLNej8Mywu370Gbk
+REACT_APP_ID =750a3def
+REACT_APP_KEY =78f65d43585a400ca862a44e196ee9c2

.env.sample

@@ -0,0 +1,5 @@
+REACT_APP_SERVER_URL=
+REACT_APP_domain=
+REACT_APP_clientId=
+const APP_ID = 
+const APP_KEY = 

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.env

package.json

@@ -3,11 +3,19 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@auth0/auth0-react": "^1.7.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/react-fontawesome": "^0.1.15",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "axios": "^0.21.4",
+    "bootstrap": "^5.1.0",
     "react": "^17.0.2",
+    "react-bootstrap": "^2.0.0-beta.6",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.1.2"
   },

src/App.css

@@ -1,16 +1,13 @@
+body{
+  font-family: 'Changa', sans-serif;
+}
+
 .App {
   text-align: center;
 }
 
 .App-logo {
   height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
 }
 
 .App-header {
@@ -25,14 +22,15 @@
 }
 
 .App-link {
-  color: #61dafb;
+  color: #09d3ac;
+}
+
+
+.table {
+  width: 80%;
+  margin-left: 10%;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+body{
+  background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
 }

src/App.js

@@ -1,14 +1,47 @@
 import React, { Component } from 'react'
+import { Main } from './components/Main';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import Login from './Login';
+import Profile from './Profile';
+// import DietPlan from './components/dietPlan';
+import { withAuth0 } from "@auth0/auth0-react";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import Callback from './components/Callback';
+import Recipes from './components/Recipes';
+import './App.css';
 
 export class App extends Component {
   render() {
+    const isAuth = this.props.auth0.isAuthenticated;
+
     return (
-      <div>
-
+      <div> 
+            <>
+        <Router>
+          {/* <Header user={this.state.user} onLogout={this.logoutHandler} /> */}
+          <Switch>
+            <Route exact path="/">
+              {isAuth ? < Main/> : <Login />}
+            </Route>
+            <Route exact path="/profile">
+              {isAuth && <Profile />}
+            </Route>
+<Route exact path="/callback">
+          <Callback />
+      </Route>
+      <Route exact path="/recipes">
+      {isAuth && <Recipes message="Welcome to youtrition" showbutton="false" />}
+
+      </Route>
+          </Switch>
+          {/* <Footer /> */}
+        </Router>
+      </>
+
       </div>
     )
   }
 }
 
-export default App;
+export default withAuth0(App);
 

src/App.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

src/FormTracker.css

@@ -0,0 +1,36 @@
+.tableform{
+font-size:20px;  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;  background-color:transparent;
+border-style: none;
+/* border-bottom: rgb(29, 29, 28); */
+}
+
+.tableform td ,th{
+    color:#52734D;
+
+
+}
+
+.buttonforClear.btn-primary {
+    color: #fff;
+    background-color: #198754;
+    border-color: #198754;
+}
+  .formTracker button {
+    background-color: #52734d;
+    color: #feffde;
+    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
+      Helvetica, Arial, "Lucida Grande", sans-serif;
+    text-transform: uppercase;
+    font-size: 14px;
+    text-decoration: none;
+    font-weight: bold;
+    text-transform: uppercase;
+    text-shadow: rgba(0, 0, 0, 0.3) 0 -1.25px 0;
+    margin-right: 80%;
+    width: 70%;
+  }
+
+  h5{
+      color: #062402;
+  }
+

src/Login.css

@@ -0,0 +1,53 @@
+.parent{
+    position: relative;
+}
+
+.parent img {
+    position: absolute;
+    top: 73%;
+    right: 49%;
+}
+
+/* .card{
+    width: 20%;
+    background-color: blue;
+    position: absolute;
+    left: 50%;
+    top:30%
+
+} */
+
+/* .card{
+    margin: auto;
+    text-align: center;
+    /* position: absolute;
+    left: 50%;
+    top:30% */
+  /* } */ */
+  /* .card-img-top {
+    width: 205%;
+} */
+
+
+body{
+    background-color:#FEFFDE;
+  }
+
+#Login{
+    position: absolute;
+    top: 1000%;
+    left: 70%;
+    width: 20%;
+    height: 50px;}
+/* 
+    h2{
+        position: absolute;
+        top: 400%;
+        left: 73%;
+
+    } */
+    /* p{
+        position: absolute;
+        top: 200%;
+        left: 73%; 
+    } */

src/Login.js

@@ -0,0 +1,16 @@
+import React from "react";
+// import Card from 'react-bootstrap/Card';
+import "./Login.css";
+import LoginForm from "./LoginForm";
+
+class Login extends React.Component {
+  render() {
+    return (
+      <div className="parent">
+        <LoginForm />
+      </div>
+    );
+  }
+}
+
+export default Login;

src/LoginButton.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { useAuth0 } from "@auth0/auth0-react";
+
+const LoginButton = () => {
+  const { loginWithRedirect } = useAuth0();
+
+  return <button onClick={() => loginWithRedirect()} id='Login'>Log In</button>;
+};
+
+export default LoginButton;

src/LoginForm.js

@@ -0,0 +1,39 @@
+import React from "react";
+import LoginButton from "./LoginButton";
+// import Card from "react-bootstrap/Card";
+class LoginForm extends React.Component {
+  render() {
+    return (
+      <div>
+        <div>
+          {" "}
+          <img
+            src={
+              window.location.origin +
+              "/youtrition.png"
+            }
+            alt="hi"
+            width="40%"
+            height="500px"
+          ></img>
+          <h2>Youtrition App</h2>
+          <p>Track your diet</p>
+        </div>
+
+        <LoginButton />
+        {/* <Card style={{ width: "18rem" }}>
+          <Card.Img variant="top" src={window.location.origin +'/—Pngtree—nutrition diet sport icon_5413722.png'} alt="hi"/>
+          <Card.Body>
+            <Card.Title>Card Title</Card.Title>
+            <Card.Text>
+              Some quick example text to build on the card title and make up the
+              bulk of the card's content.
+            </Card.Text>
+            <LoginButton />
+          </Card.Body>
+        </Card> */}
+      </div>
+    );
+  }
+}
+export default LoginForm;

src/LogoutButton.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { useAuth0 } from "@auth0/auth0-react";
+
+const LogoutButton = () => {
+  const { logout } = useAuth0();
+
+  return (
+    <button onClick={() => logout({ returnTo: window.location.origin })}>
+      Log Out
+    </button>
+  );
+};
+
+export default LogoutButton

src/News.js

@@ -0,0 +1,75 @@
+import React from "react";
+import axios from "axios";
+import { Card, Form, Row, Col, Button } from "react-bootstrap";
+
+class News extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      newsData: {},
+      searchData: "",
+      info:false
+    };
+  }
+
+  handleSearch = async (e) => {
+    e.preventDefault();
+    console.log("hi");
+    await this.setState({ searchData: e.target.value });
+    console.log(this.state.searchData);
+    const serverUrl = `${process.env.REACT_APP_SERVER_URL}/news?q=${this.state.searchData}`;
+    const getNews = await axios.get(serverUrl);
+    // this.state.newsData.push(getNews.data);
+
+    await this.setState({ newsData: getNews.data ,
+    info:true});
+    console.log(this.state.newsData.results);
+  };
+  render() {
+    return (
+      <div>
+        <Form
+          style={{
+            width: "60%",
+            marginLeft: "20%",
+            marginTop: "5%",
+            paddingLeft: "4%",
+          }}
+          className="formTracker"
+        >
+          <Row>
+            <Col xs={7}>
+              <Form.Control
+                onChange={this.handleSearch}
+                type="text"
+                placeholder="Search for Heath and new Type of diets"
+                name="search"
+              />
+            </Col>
+          </Row>
+        </Form>
+        {this.state.info &&
+          this.state.newsData.results.map((el) => {
+            return (
+              <div>
+                <Card style={{ width: "18rem" }}>
+                  <Card.Img variant="top" src={el.image_url} alt="" />
+                  <Card.Body>
+                    <Card.Title>{el.title}</Card.Title>
+                    <Card.Text>
+                      Some quick example text to build on the card title and
+                      make up the bulk of the card's content.
+                    </Card.Text>
+                    <Button variant="primary">Go somewhere</Button>
+                  </Card.Body>
+                </Card>
+              </div>
+            );
+          })
+        }
+      </div>
+    );
+  }
+}
+
+export default News;