gregdanko92 · brookecalhoun · Sep 8, 2021 · Sep 8, 2021 · Sep 8, 2021 · Sep 8, 2021
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,9 +6,12 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "@tiptap/react": "^2.0.0-beta.66",
+    "@tiptap/starter-kit": "^2.0.0-beta.102",
     "axios": "^0.21.1",
     "bootstrap": "^3.4.1",
     "cors": "^2.8.5",
+    "draft-js": "^0.11.7",
     "express": "^4.17.1",
     "jquery": "^3.6.0",
     "mongoose": "^6.0.4",
@@ -19,6 +22,7 @@
     "react-multi-carousel": "^2.6.5",
     "react-router-dom": "^5.2.1",
     "react-scripts": "4.0.3",
+    "react-slick": "^0.28.1",
     "reactstrap": "^8.10.0",
     "rowdy-logger": "^1.0.2",
     "web-vitals": "^1.1.2"

diff --git a/public/images/Moped.jpg b/public/images/Moped.jpg
diff --git a/public/images/Moped.png b/public/images/Moped.png
diff --git a/public/images/airport.jpeg b/public/images/airport.jpeg
diff --git a/public/images/citybg.jpg b/public/images/citybg.jpg
diff --git a/public/index.html b/public/index.html
@@ -2,14 +2,28 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+
+    <link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" /> 
+<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
+    <meta charset="utf-8" />
+
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"
+  integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We"
+  crossorigin="anonymous"
+
+
+
+/>
+
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
     <!--
       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/
@@ -24,7 +38,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>React App</title>
+    <title>Wayfarer App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -39,5 +53,17 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+
+    <script src="https://unpkg.com/react/umd/react.production.min.js" crossorigin></script>
+
+<script
+  src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
+  crossorigin></script>
+
+<script
+  src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
+  crossorigin></script>
+
+<script>var Alert = ReactBootstrap.Alert;</script>
   </body>
 </html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -6,17 +6,9 @@
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
+
+
   ],
   "start_url": ".",
   "display": "standalone",

diff --git a/src/App.css b/src/App.css
@@ -6,11 +6,12 @@
 }
 .header {
   border: 1px solid black;
-  font-family: 'Bellota Text';
+  font-family: 'Bellota Text', 'Sans';
   font-size: 30px;
   color: white;
   padding: 5px;
-  background: rgba(250, 249, 249, 0.611);
+  background: rgb(170, 194, 216);
+  display: float;
 }
 .logobanner {
   display: inline;
@@ -34,8 +35,6 @@
 .search{
   padding-right: 2px;
 }
-.authentication{
-}
 
 .pics{
   height: 400px;
@@ -61,11 +60,42 @@ border: 1px solid black;
   margin: auto;
 }
 
-.App{
+/* .App{
   background-position: fixed center;
   background-size: cover;
-  height: 100vh;
-}
+
+} */
 /* .city-show-page{
+} */
+
 
-} */
+
+/* Styling the Index Carousel */
+/* .carousel-pics{
+} */
+.cityindeximage{
+  width:400px;
+  height: 300px;
+}
+.cities-index{
+  margin: 0 auto;
+  padding: 20px;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+.carousel-container{
+  padding: 20px;
+  background-color: rgba(255,255,255,0.7);
+}
+.carousel-index{
+  text-align: center;
+}
+.cityindexname{
+  font-size: 20px;
+  color: white;
+  font-family: 'Bellota Text', 'Sans';
+  text-align: center;
+  position: fixed;
+  bottom: 125px; 
+  margin-left: 150px;
+}
diff --git a/src/App.js b/src/App.js
@@ -15,14 +15,11 @@ import CityCarousel from './partials/CityCarousel'
 function App() {
   return (
     <div 
-    className="App"
-    style={{
-      backgroundImage: `url('${process.env.PUBLIC_URL}/images/home.jpeg')`
-    }}>
+    className="App">
 
       <Header/>
       <Routes/>
-      <Footer/>
+      {/* <Footer/> */}
 
     </div>
   );

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -1,14 +1,18 @@
 import React from 'react';
+import { Link } from 'react-router-dom'
 
 function Header(){
     return(
         <div className='header'>
-           <span class='inlineheader'> 
+           <span className='inlineheader'> 
                 <img className='logobanner' src={process.env.PUBLIC_URL + '/images/banner.png'} alt="" />
                 <span className='headerlinks'>
                     <ul className='something'>
                 <li className='Search'>Search</li> &nbsp;
-                <li className='Authentication'>Authentication</li> &nbsp;
+                <Link to='./signup'> Sign-Up </Link> &nbsp;
+                <Link to='./login'> Login </Link> &nbsp;
+
+                <li className='cities-link'><a href='/cities'>Cities</a></li>&nbsp;
                     </ul>
                 </span>
             </span>

diff --git a/src/config/Routes.jsx b/src/config/Routes.jsx
@@ -1,11 +1,17 @@
 import React from 'react';
 import HomePage from '../pages/HomePage';
+
 import CitiesIndexPage from '../pages/CitiesIndexPage';
 import ArticlePage from '../pages/ArticlePage';
 import CityShowPage from '../pages/CityShowPage';
 import { Switch, Route } from 'react-router-dom';
 import CreateCity from '../pages/CreateCity';
 import CityModel from '../models/CityModel'
+import CreateArticlePage from '../pages/CreateArticlePage';
+import SignupPage from '../pages/SignupPage';
+import LoginPage from '../pages/LoginPage'
+// import CityModel from '../models/CityModel';
+
 
 
 function Routes(){
@@ -16,17 +22,27 @@ function Routes(){
         <Route path='/' exact component={HomePage}/>
 
         {/* <Route path='/cities/:id' exact component={CityShowPage} /> */}
+
+
+        <Route exact path='/cities/:id/create' component={CreateArticlePage} />
+        <Route exact path='/cities/:cityId/:articleId'render={(props)=> <ArticlePage {...props} />} />
+
+
         <Route exact path='/cities/:id'render={(props)=> <CityShowPage {...props} />} />
 
         <Route path='/cities' component={CitiesIndexPage} />
 
         {/* <Route path='/cities/:id' exact render={()=>{
           <CityShowPage cityData={cityData}/>}} /> */}
 
-        <Route path='/cities/:id/:id' component={ArticlePage} />
+
 
         <Route path='/create' component={CreateCity} />
 
+        <Route path='/signup' render={(props) => <SignupPage {...props} /> } />
+
+        <Route path ='/login' render={(props) => <LoginPage {...props} /> } />
+
       </Switch>
 
     )

diff --git a/src/index.css b/src/index.css
@@ -5,6 +5,13 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+}
+
+html,body,#root,.App,.homepage-css{
+  background-position: fixed center;
+  background-size: cover;
+  min-height: 100vh;
 }
 
 code {

diff --git a/src/index.js b/src/index.js
@@ -4,14 +4,16 @@ import { BrowserRouter as Router } from 'react-router-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import 'react-bootstrap'
+
 
 //bootstrap stuff
 // import Bootstrap from '/node_modules/react-bootstrap'
 // import'./node_modules/bootstrap/dist/css/bootstrap.css';
 // import'./node_modules/bootstrap/dist/css/bootstrap-theme.css';
-import $ from 'jquery';
+// import $ from 'jquery';
 import Popper from 'popper.js';
-import 'bootstrap/dist/js/bootstrap.bundle.min';
+// import './bootstrap/dist/js/bootstrap.bundle.min';
 import 'bootstrap/dist/css/bootstrap.min.css';
 
 ReactDOM.render(

diff --git a/src/models/ArticleModel.js b/src/models/ArticleModel.js
@@ -0,0 +1,24 @@
+const url = 'http://localhost:4000/api/cities/';
+//store logic to make api calls (fetch/axios here)
+class ArticleModel {
+    static all() {
+        // fetch method uses a JS promise
+        // when we call fetch, fetch is promising that at some point there will be a response
+        return fetch(url)
+            .then((response)=>{ 
+                return response.json() //convert response to json
+            })
+            .catch((err)=>{
+                console.log(err)
+                // show user a message describing error
+
+            })
+    }
+    // will make  fetch call to get a single game by it's id
+    static show(articleId, cityId){
+         return fetch(`${url}/${cityId}/${articleId}`)
+            .then((response)=> response.json())
+
+    }
+}
+export default ArticleModel;
diff --git a/src/models/CityModel.js b/src/models/CityModel.js
@@ -18,6 +18,9 @@ class CityModel {
     static show(cityId){
          return fetch(`${url}/${cityId}`)
             .then((response)=> response.json())
+            .catch((err)=>{
+                console.log(err)
+            })
 
     }
 }

diff --git a/src/pages/ArticlePage.jsx b/src/pages/ArticlePage.jsx
@@ -1,10 +1,44 @@
 import React from 'react'
-function ArticlePage() {
-    return(
-        <div>
-            <h2>article</h2>
+import ArticleModel from '../models/ArticleModel'
+class ArticlePage extends React.Component{
+    state = {
+        content:''
+    }
+
+    componentDidMount(){
+        const articleId = this.props.match.params.articleId
+        const cityId = this.props.match.params.cityId
+
+        console.log(articleId)
+        ArticleModel.show(articleId, cityId).then((data)=>{
+            console.log(data)
+
+            this.setState({
+                content:data.content
+            })
+        })
+
+    }
+    setHTML = ()=>{
+        return{
+            __html:this.state.content
+        }
+
+    }
+    render(){
+        console.log(this.props)
+        return(
+
+        <div className='article-show-page'>
+
+            <div dangerouslySetInnerHTML={this.setHTML()}>
+
+            </div>
         </div>
-    )
+        )
+    }
 }
+
+
 
 export default ArticlePage