Susheela

how-to/package.json

@@ -3,9 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.19.0",
+    "formik": "^1.5.8",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "react-scripts": "3.1.2"
+    "react-redux": "^7.1.1",
+    "react-router-dom": "^5.1.0",
+    "react-scripts": "3.1.2",
+    "redux": "^4.0.4",
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.3.0",
+    "styled-components": "^4.4.0",
+    "yup": "^0.27.0"
   },
   "scripts": {
     "start": "react-scripts start",

how-to/public/index.html

@@ -10,6 +10,8 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="logo192.png" />
+    <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Righteous&display=swap" rel="stylesheet">
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

how-to/src/App.css

@@ -1,22 +1,57 @@
+*{
+  font-family: 'Lato', sans-serif;
+
+}
+
+h1,h2,h3,h4,p {
+  font-family: 'Righteous', cursive;
+
+}
+
+
 .App {
   text-align: center;
+  height: 80vh;
+  color: #E76E3C;
 }
 
 .App-logo {
   height: 40vmin;
 }
 
 .App-header {
-  background-color: #282c34;
   min-height: 100vh;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
   color: white;
 }
 
-.App-link {
-  color: #09d3ac;
+
+.nav{
+  font-family: 'Righteous', cursive;
+}
+
+.nav-links a {
+  text-decoration: none;
+  color: #e76e3c;
+  font-weight: bold;
+} 
+
+a{
+  text-decoration:none;
 }
+
+a:hover{
+  color: lightgrey;
+}
+
+
+
+
+
+
+
+

how-to/src/App.js

@@ -1,24 +1,42 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React, { useState } from "react";
+import { Route, Link } from "react-router-dom";
+import "./App.css";
+import SignUp from "./components/sign-up";
+import Articles from "./components/articles";
+import LogIn from "./components/logIn-form";
+import data from "./data";
+import NewTutorialForm from "./components/new-tutorial";
+import MyItems from "./components/finished-tutorial";
+import EditItem from "./components/edit-tutorial";
+
 
 function App() {
+  const [items, setItems] = useState(data);
+  const [filteredItems, setFiltered] = useState(data);
+  const search = query => {
+    console.log(query);
+    const found = items.filter(item =>
+      item.title.toLowerCase().includes(query)
+    );
+    setFiltered(found);
+  };
+
+  const [post] = useState(data);
+
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Route exact path="/" component={SignUp} />
+      <Route path="/login" component={LogIn} />
+      <Route exact path="/edit-tutorial" component={EditItem} />
+      <Route exact path="/finished-tutorial" component={MyItems} />
+      <Route
+        exact
+        path="/articles"
+        render={props => (
+          <Articles {...props} articles={filteredItems} search={search} />
+        )}
+      />
+      <Route path="/new-tutorial" component={NewTutorialForm} />
     </div>
   );
 }

how-to/src/components/articles.js

@@ -0,0 +1,137 @@
+import React from 'react';
+import { Route, Link } from 'react-router-dom';
+import '../App.css';
+import NewTutorialForm from './new-tutorial';
+import posts from '../data';
+import styled from 'styled-components';
+import SearchForm from "./searchForm";
+
+
+const StyledArticle = styled.div`
+    margin: 0;
+    padding:0;
+    box-sizing: border-box;
+
+    h2{ 
+        color: white;
+    }
+
+    .nav{
+        box-sizing: border-box;
+        width: 100vw;
+        margin-top: 0;
+        padding: 1rem 5rem;
+        background-color:#e76e3c;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .nav a{
+      padding: 25px;
+      color: white;
+      font-family: 'Righteous', cursive;
+    }
+
+    .articles-header{
+        margin: 3rem;
+    }
+
+    .articles-list-wrapper {
+        width: 80%;
+        margin: 0 auto;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-around;
+    }
+
+    .article-card {
+        width: 250px;
+        height: 350px;
+        margin: 2rem;
+        padding: 1rem;
+
+        @media only screen and (max-width: 600px){
+            margin-bottom: 0;
+        }
+    }
+
+    .article-card p {
+        text-align: center;
+        color: #595959;
+    }
+
+    .article-list-image {
+        width: 100%;
+        border: 1px solid lightgray;
+    }
+
+    a{
+        & h3{
+            color: #e76e3c;
+        }
+    }
+
+
+    .articles-button {
+       padding: 1rem 2rem;
+       postion: relative;
+       display: flex;
+       justify-content:space-between;
+       align-items: center;
+
+    }
+
+    .articles-button .md-button {
+        color: #fff;
+        background-color: #e76e3c;
+        padding: 1rem 2rem;
+
+        &:hover{
+            border: 1px solid #e76e3c;
+            background-color: white;
+            color: #e76e3c; 
+        }
+
+    }
+`
+
+
+function Articles(props) {
+  return (
+    <StyledArticle className="articles-wrapper">
+      <div className = "nav">
+          <h2> How-to</h2>
+      </div>
+      <div className="articles-header">
+        <h1>Suggested Articles</h1>
+      </div>
+      <div className="articles-button">
+      <SearchForm search = {props.search}/>
+      <Link to="/new-tutorial" >
+        <button className="md-button new-tutorial-button">
+          Make a New Tutorial
+        </button>
+      </Link>
+      </div>
+      <Route path="/new-tutorial" component={NewTutorialForm} />
+      <div className="articles-list-wrapper">
+        {props.articles.map(post => (
+          <div className="article-card" key={post.id}>
+            <Link to={`/articles/${post.id}`}>
+              <img
+                className="article-list-image"
+                src={post.imageUrl}
+                alt={post.alt}
+              />
+              <h3>{post.title}</h3>
+            </Link>
+            <p>{post.summary}</p>
+          </div>
+        ))}
+      </div>
+    </StyledArticle>
+  );
+}
+
+export default Articles;

how-to/src/components/edit-tutorial.js

@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from "react";
+import axiosWitAuth from "../utils/axiosWithAuth";
+import { NavLink } from "react-router-dom";
+
+export default function EditItem(props) {
+  const editingState = {
+    item: "",
+    description: "",
+    steps: "",
+    tags: ""
+  };
+
+  const [stuff, setStuff] = useState(editingState);
+
+  const handleChange = e => {
+    setStuff({ ...stuff, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = e => {
+    e.preventDefault();
+    axiosWitAuth()
+      .put(`/api/auth/:user_id/posts/:post_id/${props.match.params.id}`, stuff)
+      .then(res => {
+        setStuff(editingState);
+        props.history.push(`/finished-tutorial`);
+      })
+      .catch(err => console.log(err));
+  };
+  console.log(stuff);
+  return (
+    <div className="updateContainer">
+      <h1>Update Item</h1>
+      <form className="update-form" onSubmit={handleSubmit}>
+        <input
+          type="text"
+          name="item"
+          value={stuff.item}
+          onChange={handleChange}
+          placeholder="Name"
+        ></input>
+        <input
+          type="text"
+          name="description"
+          value={stuff.description}
+          onChange={handleChange}
+          placeholder="Description"
+        ></input>
+        <input
+          type="text"
+          name="steps"
+          value={stuff.steps}
+          onChange={handleChange}
+          placeholder="Steps"
+        ></input>
+        <input
+          type="text"
+          name="tags"
+          value={stuff.tags}
+          onChange={handleChange}
+          placeholder="Tags"
+        ></input>
+        <button className="updateButton">Update</button>
+      </form>
+    </div>
+  );
+}