chessmyers · scheung97 · Feb 28, 2021 · Mar 1, 2021 · Mar 5, 2021 · Mar 14, 2021
diff --git a/app/controllers/hello_world_controller.rb b/app/controllers/hello_world_controller.rb
@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class HelloWorldController < ApplicationController
+  layout "hello_world"
+
+  def index
+    @hello_world_props = { name: "Stranger" }
+  end
+end
diff --git a/app/controllers/homepage_controller.rb b/app/controllers/homepage_controller.rb
@@ -2,6 +2,6 @@ class HomepageController < ApplicationController
     layout "home"
 
     def index
-      @homepage_props = { name: "Stranger" }
+      @homepage_props = {parks: Park.all}
     end
   end
diff --git a/app/controllers/landingpage_controller.rb b/app/controllers/landingpage_controller.rb
@@ -0,0 +1,7 @@
+class LandingpageController < ApplicationController
+    layout "landing_page"
+
+    def index
+
+    end
+  end
diff --git a/app/javascript/bundles/HelloWorld/components/HelloWorld.js b/app/javascript/bundles/HelloWorld/components/HelloWorld.js
@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+
+const HelloWorld = (props) => {
+  const [name, setName] = useState(props.name);
+
+  return (
+    <div>
+      <h3>Hello, {name}!</h3>
+      <hr />
+      <form>
+        <label htmlFor="name">
+          Say hello to:
+          <input id="name" type="text" value={name} onChange={(e) => setName(e.target.value)} />
+        </label>
+      </form>
+    </div>
+  );
+};
+
+HelloWorld.propTypes = {
+  name: PropTypes.string.isRequired, // this is passed from the Rails view
+};
+
+export default HelloWorld;
diff --git a/app/javascript/bundles/homepage/components/HomePage.js b/app/javascript/bundles/homepage/components/HomePage.js
@@ -5,23 +5,14 @@
  import Sidebar from './Sidebar';
 
 const HomePage = (props) => {
-    //const parks = props.parks
-    //const listParks = parks.map((park) =>
-   // <li key = {park.toString()}>
-    //    {park}
-    //</li>); 
+  const parks = props.parks
   return(
-    //   <ul> listParks</ul>  
     <main> 
       <div className = "home" id = "outer-container">
-        <Sidebar pageWrapId={'page-wrap'} outerContainerId={'outer-container'} />
+        <Sidebar parks = {parks} pageWrapId={'page-wrap'} outerContainerId={'outer-container'} />
         <div id="page-wrap">
           <h1> 
             Welcome to NattyTracker!
-              {/* This is the main page
-              {arr.map((num) => {
-                return <li>{num} </li> 
-              })} */}
           </h1>
           <h2> 
             Please click the button in the top-left, and choose a National Park!
@@ -32,5 +23,6 @@ const HomePage = (props) => {
   );
 };
 HomePage.propTypes = {
+  parks: PropTypes.array.isRequired
 }
 export default HomePage; 
diff --git a/app/javascript/bundles/homepage/components/LandingPage.js b/app/javascript/bundles/homepage/components/LandingPage.js
@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types'; 
+import React from 'react';
+import '../../../../assets/stylesheets/homepage.css';
+import '../../../../assets/stylesheets/Sidebar.css';
+
+const LandingPage = () => {
+    return(
+        <main> 
+            <header> 
+                This is the landing page
+                {/* insert natty tracker logo here */}
+            </header>
+            <body> 
+                <form> 
+                    <h1> 
+                        Login
+                    </h1>
+                    <div class = "Container">
+                        <label htmlFor="uname"> <b>Username</b></label>
+                        <input type = "text" placeholder="Username" name="uname" required></input>
+                        <button type = "submit"> Login</button> 
+                        <label> 
+                            <input type = "checkbox" checked = "checked" name="remember"> Remember me </input>
+                        </label>
+                        <br></br> {/*not sure why just </br> doesn't work*/}
+                        <button type = "submit">Sign Up</button>
+                    </div> 
+                </form>
+            </body> 
+        </main>
+    );
+}
+
+LandingPage.propTypes = {
+
+}
+export default LandingPage;
diff --git a/app/javascript/bundles/homepage/components/ParkPage.js b/app/javascript/bundles/homepage/components/ParkPage.js
@@ -9,7 +9,8 @@ const ParkPage = (props) => {
         <p> This is the parks page </p>
     );
 } 
+
 ParkPage.propTypes = {
-    
+
 }
 export default ParkPage; 
diff --git a/app/javascript/bundles/homepage/components/Sidebar.js b/app/javascript/bundles/homepage/components/Sidebar.js
@@ -1,37 +1,39 @@
 import React from 'react';
 import { slide as Menu } from 'react-burger-menu';
 
+//creates burger menu checkbox 
+function ParkItems(props){
+  return <a href = {"/parks/" + props.id}>
+  <input type = "checkbox" className="menu-item"></input>
+  <label htmlFor="menu-item"> {props.name} </label>
+  <br/> <br/>
+  </a>; 
+}
+
 export default props => {
+  // const parks = props.parks
+
+  //use first 62 IDs (reduces size by ~95%)
+  var parks = []; 
+  for(var i = 0; i < 61; i++){ //should probably remove hard coding
+    parks[i] = props.parks[i]; 
+    if(i == 28)
+      parks[i].name = "Haleakala National Park"; //last "a" in parks[28].name is a special character; will tackle this issue later
+  }
+
+  //parkItems = react elements for each iteration of parks
+  const parkItems = parks.map((park) => 
+    <ParkItems key={park.id.toString()} id={park.id} name={park.name}/> 
+  );
+
   return (
-    <Menu>
-      <a className="menu-item" href="/">
+    <Menu> 
+      <a className="menu-item" href="/homepage">
         Home
       </a>
       <br/>
-      <a className="menu-item" href="/parks/1">
-        Arcadia
-      </a>
-      <br/>
-      <a className="menu-item" href="/parks/2">
-        Arches
-      </a>
-      <br/>
-      <a className="menu-item" href="/parks/3">
-        Badlands
-      </a>
-      <br/>
-      <a className="menu-item" href="/parks/4">
-        Big Bend
-      </a>
-      <br/>
-      <a className="menu-item" href="/parks/23">
-        Grand Canyon
-      </a>
-      <br/>
-      <a className="menu-item" href="/parks/60">
-        Yosemite
-      </a>
+
+      {parkItems} {/* yay */}
     </Menu>
   );
 };
-
diff --git a/app/javascript/packs/hello-world-bundle.js b/app/javascript/packs/hello-world-bundle.js
@@ -0,0 +1,8 @@
+import ReactOnRails from 'react-on-rails';
+
+import HelloWorld from '../bundles/HelloWorld/components/HelloWorld';
+
+// This is how react_on_rails can see the HelloWorld in the browser.
+ReactOnRails.register({
+  HelloWorld,
+});
diff --git a/app/javascript/packs/landingpage-bundle.js b/app/javascript/packs/landingpage-bundle.js
@@ -0,0 +1,8 @@
+import ReactOnRails from 'react-on-rails';
+
+import LandingPage from '../bundles/homepage/components/LandingPage';
+
+// This is how react_on_rails can see the HelloWorld in the browser.
+ReactOnRails.register({
+  LandingPage,
+});
diff --git a/app/views/hello_world/index.html.erb b/app/views/hello_world/index.html.erb
@@ -0,0 +1,2 @@
+<h1>Hello World</h1>
+<%= react_component("HelloWorld", props: @hello_world_props, prerender: false) %>
diff --git a/app/views/layouts/landing_page.html.erb b/app/views/layouts/landing_page.html.erb
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Natty Tracker</title>
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+
+    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
+    <%= javascript_pack_tag 'landingpage-bundle' %>
+  </head>
+
+  <body>
+  <header class="main">
+    <%= image_tag 'logo.png', alt: 'Natty Tracker' %>
+    <style>
+    </style>
+    <h1><%= @page_title %></h1>
+    <%= button_to "Log Out", logout_path %>
+  </header>
+    <main class='<%= controller.controller_name %>'>
+      <%= yield %>
+    </main>
+  </body>
+</html>
diff --git a/app/views/parks/show.html.erb b/app/views/parks/show.html.erb
@@ -1,6 +1,5 @@
 <p id="notice"><%= notice %></p>
 
-<%= react_component("ParkPage", props: @park_props, prerender = false %>
 
 <head> 
   <%= stylesheet_link_tag 'application' %> 

diff --git a/app/views/sessions/test_welcome.html.erb b/app/views/sessions/test_welcome.html.erb
@@ -0,0 +1,2 @@
+<%= react_component("LandingPage", props: @landingpage_props, prerender: false) %>
+<%= link_to "Enter App", '/homepage' %>
diff --git a/app/views/sessions/welcome.html.erb b/app/views/sessions/welcome.html.erb
@@ -7,5 +7,4 @@
 <%= button_to "Login", '/login', method: :get%>
 
 <%= button_to "Sign Up", '/users/new', method: :get%>
-
 <%= link_to "Enter App", '/homepage' %>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<h1>Hello World</h1>
		<%= react_component("HelloWorld", props: @hello_world_props, prerender: false) %>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<%= react_component("LandingPage", props: @landingpage_props, prerender: false) %>
		<%= link_to "Enter App", '/homepage' %>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,5 +7,4 @@
		<%= button_to "Login", '/login', method: :get%>

		<%= button_to "Sign Up", '/users/new', method: :get%>

		<%= link_to "Enter App", '/homepage' %>