updated font files and removed Navigation componetn in Appjs since it…

… is empty, functional and renders on screen

app/assets/stylesheets/application.css → app/assets/stylesheets/application.scss

@@ -13,3 +13,24 @@
  *= require_tree .
  *= require_self
  */
+
+
+ @font-face {
+    font-family: 'GlamourAbsolute_Extended';
+    src: url('./fonts/GlamourAbsolute_Extended.otf')
+  }
+
+
+
+
+.card{
+  width: 246px !important;
+  float: left;
+  margin: 30px;
+  padding: 0px;
+}
+
+.display-3 {
+  color: #e91e8f;
+  font-family: 'GlamourAbsolute_Extended';
+}

app/assets/stylesheets/managers.scss

@@ -1,3 +1,4 @@
 // Place all the styles related to the Managers controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: https://sass-lang.com/
+

app/javascript/components/App.js

@@ -1,8 +1,10 @@
 import React from "react"
 import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"
 import { Container } from "reactstrap"
-import ApartmentList from "../components/pages/ApartmentList"
-import ApartmentNew from "../components/pages/ApartmentNew"
+import Header from "./Header"
+import Navigation from "./Navigation"
+import ApartmentList from "./pages/ApartmentList"
+import ApartmentNew from "./pages/ApartmentNew"
 
 
 class App extends React.Component {
@@ -35,8 +37,8 @@ async componentDidMount () {
 
     return (
       <React.Fragment>
+        <Header />
       <Router>
-      <div>
         {logged_in &&
           <div>
               <div>
@@ -52,7 +54,6 @@ async componentDidMount () {
             <a href={sign_in_route}>Sign In</a>
           </div>
         }
-      </div>
       <Container>
       <Switch>
         <Route
@@ -71,4 +72,4 @@ async componentDidMount () {
   }
 }
 
-export default App
+export default App;

app/javascript/components/Header.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Jumbotron, Button } from 'reactstrap';
+import '../packs/application'
+const Header = (props) => {
+  return (
+    <div>
+      <Jumbotron>
+        <h1 className="display-3">Hello, world!</h1>
+        <p className="lead">This is a simple hero unit, a simple Jumbotron-style component for calling extra attention to featured content or information.</p>
+        <hr className="my-2" />
+        <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
+        <p className="lead">
+          <Button color="primary">Learn More</Button>
+        </p>
+      </Jumbotron>
+    </div>
+  );
+};
+
+export default Header;

app/javascript/components/pages/ApartmentList.js

@@ -1,22 +1,28 @@
 import React from 'react'
-import { ListGroup } from 'reactstrap'
+import { ListGroup, Button, Card, CardImg, CardText, CardBody, CardTitle, CardSubtitle } from "reactstrap";
 
 const ApartmentList = (props) => {
 const { apartments } = props
-  return(
-    apartments.map((apartment, index) => {
-      return(
-        <ListGroup key={ index }>
-          <h4>{ apartment.image }</h4>
-          <h4>{ apartment.address }</h4>
-          <h4>{ apartment.city }, { apartment.state }  { apartment.zip_code }, { apartment.country }</h4>
-          <h4>Bedrooms: { apartment.bedrooms }</h4>
-          <h4>Bathrooms: { apartment.bathrooms }</h4>
-          <h4>Monthly Rent: { apartment.monthly_rent }</h4>
-          <h4>Manager: { apartment.manager_id }</h4>
-        </ListGroup>
-        )
-    })
-  )
+  return (
+    <React.Fragment>
+      { apartments.map((apartment, index) => {
+        return (
+          <div key={index}>
+          <Card className="card" body inverse style={{ backgroundColor: '#fff', borderColor: '#333' }}>
+              <ListGroup key={index}>
+                  <CardImg top width="100%" margin="0" padding="0" src={ apartment.image } alt="Card image cap" />
+                  <CardBody>
+                  <CardTitle>{apartment.address}</CardTitle>
+                  <CardSubtitle>{apartment.city}, {apartment.state}</CardSubtitle>
+                  <CardText>{apartment.manager_id}</CardText>
+                  <Button href="/" color="info">More Info</Button>
+                  </CardBody>
+              </ListGroup>
+          </Card>
+          </div>
+        );
+      })}
+    </React.Fragment>
+  );
 }
 export default ApartmentList

app/javascript/components/pages/ApartmentNew.js

@@ -154,14 +154,14 @@ const ApartmentNew = (props) => {
         <Row form>
           <Col md={6}>
           <FormGroup>
-            <Label htmlFor="bedrooms" id="bedrooms">
-              Bedrooms
+            <Label htmlFor="bathrooms" id="bathrooms">
+              Bathrooms
             </Label>
             <Input
               type="text"
-              name="bedrooms"
+              name="bathrooms"
               onChange={ handleChange }
-              value={form.bedrooms}
+              value={form.bathrooms}
             />
           </FormGroup>
           </Col>
@@ -181,7 +181,7 @@ const ApartmentNew = (props) => {
           </FormGroup>
           </Col>
         </Row>
-        <Button color="info" onClick={ handleSubmit } id="submit">
+        <Button href="/" color="info" onClick={ handleSubmit } id="submit">
           Add New Apartments
         </Button>
       </Form>

app/javascript/packs/application.js

@@ -8,7 +8,6 @@ require("turbolinks").start()
 require("@rails/activestorage").start()
 require("channels")
 
-
 // Uncomment to copy all static images under ../images to the output folder and reference
 // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
 // or the `imagePath` JavaScript helper below.

app/views/home/index.html.erb

@@ -2,4 +2,5 @@
     logged_in: user_signed_in?,
     sign_in_route: new_user_session_path,
     sign_out_route: destroy_user_session_path
-}) %>
+}) %>
+

config/webpack/environment.js

@@ -1,3 +1,9 @@
 const { environment } = require('@rails/webpacker')
+const webpack = require("webpack") 
 
+environment.plugins.append("Provide", new webpack.ProvidePlugin({ 
+  $: 'jquery',
+  jQuery: 'jquery',
+  Popper: ['popper.js', 'default']
+})) 
 module.exports = environment

config/webpack/environment.js.save

@@ -0,0 +1,10 @@
+const { environment } = require('@rails/webpacker')
+const webpack = require("webpack") 
+
+environment.plugins.append("Provide", new webpack.ProvidePlugin({ 
+  $: 'jquery',
+  jQuery: 'jquery',
+  Popper: ['popper.js', 'default']
+}))
+module.exports = environment
+

package.json

@@ -9,6 +9,8 @@
     "@rails/webpacker": "4.2.2",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "bootstrap": "^4.5.0",
+    "jquery": "^3.5.1",
+    "popper.js": "^1.16.1",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

yarn.lock

@@ -4061,6 +4061,11 @@ jest-worker@^25.4.0:
     merge-stream "^2.0.0"
     supports-color "^7.0.0"
 
+jquery@^3.5.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.5.1.tgz#d7b4d08e1bfdb86ad2f1a3d039ea17304717abb5"
+  integrity sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg==
+
 js-base64@^2.1.8:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.2.tgz#cf9301bc5cc756892a9a6c8d7138322e5944fb0d"
@@ -5230,7 +5235,7 @@ pnp-webpack-plugin@^1.5.0:
   dependencies:
     ts-pnp "^1.1.6"
 
-popper.js@^1.14.4:
+popper.js@^1.14.4, popper.js@^1.16.1:
   version "1.16.1"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
   integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==