Merge branch 'main'

diagram.dot

@@ -12,28 +12,35 @@ digraph Madlibs {
 
   // Nodes & Edges
 
-  App [label="App\n"]
-  NavBar [label="Navigation"]
+  App [label="App\n\nState: currentUser"]
+  ApplyButton [label="ApplyButton\n\nContext: applied []"]
+  Homepage [label="Homepage\n\nContext: {currentUser}"]
+  Context [label="userContext.Provider\n\n{currentUser: null OR {}, applied: []}"]
+  Navigation [label="Navigation\n\nContext: {currentUser}"]
   Routes [label="RoutesList\n"]
   Company [label="CompanyDetail\n\nRoute: /companies/:company_id\nState: companyData {}, isLoading\nparams: {company_handle}\n\nGET Request"]
   JobListing [label="JobList\n\nRoute: /jobs\nState: jobs [], searchFilter [], isLoading\nFn: handleSearch()\n\nGET Request"]
   CompanyListing [label="CompanyList\n\nRoute: /companies\nState: companies [], searchFilter [], isLoading\nFn: handleSearch()\n\nGET Request"]
   SearchBar [label="SearchForm\nState: formData"]
   JobCardList [label="JobCardList"]
+  LoginForm [label="LoginForm\n\nPOST Request\n/token"]
+  RegisterForm [label="RegisterForm\n\nPOST Request\n/register"]
+  ProfileForm [label="ProfileForm\n\nPATCH Request\n/:username"]
 
-
-  App -> NavBar
-  App -> Routes
-  Routes -> CompanyListing
-  Routes -> JobListing
-  Routes -> Company
-  Routes -> Homepage
+  App -> Context -> Navigation, Routes
+  Routes -> JobListing, Company, CompanyListing [label="Context: {currentUser}" color="red"]
+  Routes -> Homepage [color="blue"]
   CompanyListing -> CompanyCard [label="companyData {}"]
 
+  Routes -> RegisterForm, LoginForm [label="handleSubmit()" color="blue"]
+  Routes -> ProfileForm [label="handleSubmit()\nContext: {currentUser}" color="red"]
+  RegisterForm, LoginForm, ProfileForm -> Alert [label="errorMessage"]
 
+  Homepage -> Button [label="formType"]
   JobListing -> JobCardList [label="jobData {}\nshowCompany"]
   Company -> JobCardList -> JobCard [label="jobData {}"]
   JobListing, CompanyListing -> SearchBar [label="handleSearch()"]
+  JobCard -> ApplyButton [label="job.id"]
 //   App -> Game
 
 //   Game -> StoryPicker [label="[titles]\n'buttonLabel'"]

package.json

@@ -7,10 +7,15 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.3.6",
+<<<<<<< HEAD
+=======
+    "bootstrap": "^5.2.3",
+>>>>>>> 351e9869cdb85e8442cdb2e89e2ed6e4fb91cfcd
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.10.0",
     "react-scripts": "5.0.1",
+    "reactstrap": "^9.1.9",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.css

@@ -1,3 +1,9 @@
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
+
+* {
+  font-family: 'IBM Plex Mono', monospace;
+}
+
 .App {
   text-align: center;
 }

src/CompanyCard.css

@@ -4,4 +4,7 @@
     right: '0px';
     height: '25px';
     width: '25px';
+}
+.CompanyCard a {
+    text-decoration: none;
 }

src/CompanyCard.js

@@ -28,8 +28,10 @@ function CompanyCard({ companyData }) {
 						alt={name}
 					/>
 				)}
-				<h3>{name}</h3>
-				<p>{description}</p>
+				<div className='card-body'>
+					<h3>{name}</h3>
+					<p>{description}</p>
+				</div>
 			</Link>
 		</div>
 	);

src/Homepage.css

@@ -0,0 +1,17 @@
+.Homepage {
+    height: 100vh;
+    display:flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-image: url('../public/assets/homepage.jpg');
+    background-size:cover;
+}
+
+.Homepage h1 {
+    color:white;
+}
+
+.Homepage h2 {
+    color: wheat;
+}

src/Homepage.js

@@ -1,4 +1,4 @@
-
+import './Homepage.css';
 /** Renders homepage
  *
  *  props:
@@ -12,7 +12,8 @@
 function Homepage() {
   return (
     <div className="Homepage">
-      <h1>Homepage</h1>
+      <h1>Jobly</h1>
+      <h2>Your job. Simplified.</h2>
     </div>
   )
 };

src/Navigation.css

@@ -1,3 +1,16 @@
-.Navigation a.active {
+/* .Navigation a.active {
     font-weight: bold;
+} */
+
+.Navigation-item {
+    padding: 5px;
+    text-decoration: none;
+}
+
+.Navigation-item.active {
+    font-weight: bold;
+}
+
+.Navigation {
+    background-color: lightgray;
 }

src/Navigation.js

@@ -1,6 +1,6 @@
-import { NavLink } from "react-router-dom";
+import { NavLink } from 'react-router-dom';
 import './Navigation.css';
-
+import { Navbar, Nav, NavbarBrand } from 'reactstrap';
 /**
  *
  * Renders a navbar.
@@ -15,14 +15,15 @@ import './Navigation.css';
  *
  */
 function Navigation() {
-  return(
-    <div className="Navigation">
-      <NavLink to='/'>Home</NavLink>
-      <NavLink to='/companies'>Companies</NavLink>
-      <NavLink to='/jobs'>Jobs</NavLink>
-    </div>
-  )
+	return (
+		<Navbar className='Navigation'>
+			<NavbarBrand href='/'>Jobly</NavbarBrand>
+			<Nav>
+				<NavLink to='/companies' className={'Navigation-item'}>Companies</NavLink>
+				<NavLink to='/jobs' className={'Navigation-item'}>Jobs</NavLink>
+			</Nav>
+		</Navbar>
+	);
 }
 
-
-export default Navigation;
+export default Navigation;

src/index.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(