Skip to content

Commit 9f99e2b

Browse files
RahmteenRahmteen
committed
Backend notecard routing set up and basic page routing implemented + skeleton of an AUTHORIZATION page implemented
1 parent a4089fa commit 9f99e2b

File tree

18 files changed

+316
-86
lines changed

18 files changed

+316
-86
lines changed

‎client/src/App.jsx

+20-6
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,30 @@ import React, { Component } from 'react';
33
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
44
import Header from "./components/Header";
55
import AddCard from "./pages/AddCard";
6+
import Decks from "./pages/Decks";
7+
import Deck from "./pages/Deck";
8+
import Auth from "./pages/Auth";
69

10+
11+
// Utilize react router to render component based on path
712
class App extends Component {
813
render() {
914
return (
10-
<div>
11-
<Header/>
12-
<AddCard/>
13-
</div>
14-
)
15-
}
15+
<Router>
16+
<div>
17+
<Route path='/home' component={Header}/>
18+
<Route path='/decks' component={Header}/>
19+
<Route path='/deck' component={Header}/>
20+
<Switch>
21+
<Route exact path='/' component={Auth}/>
22+
<Route exact path='/home' component={AddCard}/>
23+
<Route exact path='/decks' component={Decks}/>
24+
<Route exact path='/deck' component={Deck}/>
25+
<Route exact path='/auth' component={Auth}/>
26+
</Switch>
27+
</div>
28+
</Router>
29+
)}
1630
}
1731

1832
export default App;

‎client/src/components/header/Header.css

+6-38
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,13 @@
1-
.addcard {
2-
padding: 30px;
3-
4-
}
5-
6-
h2 {
7-
font-family: Verdana, Geneva, Tahoma, sans-serif;
8-
}
91

102

11-
/* . {
12-
border: thin solid blue;
13-
border-radius: 10px;
14-
background: linear-gradient(0.25turn, lightblue, lightgray, lightblue);
15-
padding: 20px;
16-
} */
17-
18-
.cardform {
19-
border: thin solid blue;
20-
border-radius: 10px;
21-
/* background: linear-gradient(0.25turn, lightblue, lightgray, lightblue); */
22-
padding: 20px;
3+
#decks {
4+
padding-left: 10px
235
}
24-
25-
.submitButton {
26-
border: thin solid blue;
27-
border-radius: 20px;
28-
margin-top: 20px;
29-
background-color: lightslategray;
30-
padding: 5px 15px;
31-
color: white;
32-
font-size: 28px;
6+
h2 {
7+
font-family: Verdana, Geneva, Tahoma, sans-serif;
338
}
349

35-
input {
36-
width: 100%;
37-
border: none;
38-
border-bottom: 1px solid whitesmoke;
10+
#logo-OS {
11+
padding-bottom: 6px;
3912
}
40-
/* input[type=text] {
41-
} */
4213

43-
label {
44-
justify-content: center;
45-
}

‎client/src/components/header/Header.jsx

+18-20
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,28 @@ import React, { Component } from 'react';
22
import { Link } from 'react-router-dom'
33
import "./Header.css";
44

5+
56
class Header extends Component {
67
render () {
78
return (
8-
<div className='mainheader'>
9-
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
10-
<div className="container-fluid">
11-
<a className="navbar-brand" href="#">OScards</a>
12-
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
13-
<span className="navbar-toggler-icon"></span>
14-
</button>
15-
<div id='button-padding'>
16-
<button className="btn btn-outline-success" type="submit">Login</button>
17-
<button className="btn btn-outline-success" type="submit">Sign-Up</button>
18-
</div>
9+
<div className='mainheader'>
10+
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
11+
<div className="container-fluid">
12+
<Link className="navbar-brand" to="/home"><img id='logo-OS' src="https://i.ibb.co/r3Sp3Ks/ADBD46-A8-C78-F-472-A-A0-B9-097065-E7-A34-D.png" alt="" width="20" height="27"/>OScards</Link>
13+
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
14+
<span className="navbar-toggler-icon"></span>
15+
</button>
1916
<div className="collapse navbar-collapse" id="navbarSupportedContent">
20-
<ul className="navbar-nav ms-auto mb-2 mb-lg-0">
21-
<li className="nav-item"><a className="nav-link active" aria-current="page" href="#">Home</a></li>
22-
<li className="nav-item"><a className="nav-link" href="#">Decks</a></li>
23-
</ul>
24-
25-
</div>
26-
</div>
27-
</nav>
28-
</div>
17+
<ul className="navbar-nav ms-auto mb-2 mb-lg-0">
18+
<Link className="nav-item" to='/home'>Home</Link>
19+
<div id='decks'>
20+
<Link className="nav-item" to='/decks'>Decks</Link>
21+
</div>
22+
</ul>
23+
</div>
24+
</div>
25+
</nav>
26+
</div>
2927
)
3028
}
3129
}

‎client/src/pages/AddCard/AddCard.css

+31-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,33 @@
11
h2 {
2-
color: red;
2+
color: rgb(0, 0, 0);
3+
}
4+
5+
.submitButton {
6+
border: thin solid blue;
7+
border-radius: 20px;
8+
margin-top: 10px;
9+
background-color: lightslategray;
10+
padding: 5px 15px;
11+
color: white;
12+
font-size: 28px;
13+
}
14+
15+
.cardform {
16+
border: thin solid blue;
17+
border-radius: 10px;
18+
padding: 10px;
19+
}
20+
21+
.addcard {
22+
padding: 20px;
23+
}
24+
25+
input {
26+
width: .5vh;
27+
border: none;
28+
border-bottom: 1px solid whitesmoke;
29+
}
30+
31+
label {
32+
justify-content: center;
333
}

‎client/src/pages/AddCard/AddCard.jsx

+16-15
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ class AddCard extends Component {
99
this.state = {
1010
term: '',
1111
definition: '',
12-
deck: ''
12+
deck: 0
1313
}
1414
this.handleSubmit = this.handleSubmit.bind(this);
1515
this.handleTerm = this.handleTerm.bind(this);
@@ -29,6 +29,7 @@ class AddCard extends Component {
2929
}
3030

3131
handleDeck(event) {
32+
console.log(event.target.value)
3233
event.preventDefault();
3334
this.setState({deck: event.target.value})
3435
}
@@ -59,25 +60,25 @@ class AddCard extends Component {
5960
<div className='addcard'>
6061
{/* // card form h2 "CARD FORM" */}
6162
<h2 className="addcard">Create A New Flash Card</h2>
62-
63-
6463
<form className="cardform">
6564
<div className="mb-3">
66-
<label htmlFor="formGroupExampleInput" className="form-label">Term</label>
67-
<input type="text" className="form-control" id="formGroupExampleInput" placeholder="YetiCrab" onChange={(e) => context.handleTerm(event)}/>
68-
</div>
69-
70-
<div className="mb-3">
71-
<label htmlFor="formGroupExampleInput2" className="form-label">Definition</label>
72-
<input type="text" className="form-control" id="formGroupExampleInput2" placeholder="Kiwa hirsuta is a crustacean discovered in 2005 in the South Pacific Ocean. This decapod, which is approximately 15 cm long, is notable for the quantity of silky blond setae covering its pereiopods. Its discoverers dubbed it the yeti lobster or yeti crab" onChange={(e) => context.handleDefinition(event)}/>
73-
</div>
74-
65+
<label htmlFor="formGroupExampleInput" className="form-label">Term</label>
66+
<input type="text" className="form-control" id="formGroupExampleInput" placeholder="YetiCrab" onChange={(e) => context.handleTerm(event)}/>
67+
</div>
7568
<div className="mb-3">
76-
<label htmlFor="formGroupExampleInput2" className="form-label">Deck</label>
77-
<input type="text" className="form-control" id="formGroupExampleInput2" placeholder="Crustaceans" onChange={(e) => context.handleDeck(event)}/>
69+
<label htmlFor="formGroupExampleInput2" className="form-label">Definition</label>
70+
<input type="text" className="form-control" id="formGroupExampleInput2" placeholder="Kiwa hirsuta is a crustacean discovered in 2005 in the South Pacific Ocean. This decapod, which is approximately 15 cm long, is notable for the quantity of silky blond setae covering its pereiopods." onChange={(e) => context.handleDefinition(event)}/>
7871
</div>
72+
<select className="form-select" onChange={(e) => context.handleDeck(event)}>
73+
<option>Select Your Deck</option>
74+
<option defaultValue={1}>{1}</option>
75+
<option defaultValue={2}>{2}</option>
76+
<option defaultValue={3}>{3}</option>
77+
<option defaultValue={4}>{4}</option>
78+
<option defaultValue={4}>{5}</option>
79+
</select>
7980
</form>
80-
<button className="submitButton" onClick={context.handleSubmit}>+</button>
81+
<button class="btn btn-primary" type="submit" onClick={context.handleSubmit}>+</button>
8182
</div>
8283
)
8384
}

‎client/src/pages/Auth/Auth.css

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
body {
2+
padding: 0;
3+
margin: 0;
4+
height: 100vh;
5+
}
6+
7+
.form-control {
8+
line-height: 2;
9+
}
10+
11+
.bg-custom {
12+
background-color: #27797c;
13+
}
14+
15+
.btn-custom {
16+
background-color: #3e3d56;
17+
color: #fff;
18+
}
19+
20+
.btn-custom:hover {
21+
background-color: #33313f;
22+
color: #fff;
23+
}
24+
25+
label {
26+
color: #fff;
27+
}
28+
29+
a,
30+
a:hover {
31+
color: #fff;
32+
text-decoration: none;
33+
}
34+
35+
a,
36+
a:hover {
37+
text-decoration: none;
38+
}
39+
40+
@media(max-width: 932px) {
41+
.display-none {
42+
display: none !important;
43+
}
44+
}

‎client/src/pages/Auth/Auth.jsx

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React, { Component } from 'react';
2+
import { Link } from 'react-router-dom'
3+
import "./Auth.css";
4+
import axios from 'axios';
5+
6+
// create a landing page for authorization
7+
// ## stretch feature to create a get request to our DB for user/pw
8+
class Auth extends Component {
9+
render() {
10+
return (
11+
<div class="row m-0 h-100">
12+
<div class="col p-0 text-center d-flex justify-content-center align-items-center display-none">
13+
<img src="https://i.ibb.co/XxJfK9q/95-EA8817-E472-4822-8-DAA-83-D8-E28-C1903-4.png" class="w-100"/>
14+
</div>
15+
<div class="col p-0 bg-custom d-flex justify-content-center align-items-center flex-column w-100">
16+
<form class="w-75" action="#">
17+
<div class="mb-3">
18+
<label for="exampleFormControlInput1" class="form-label">Username</label>
19+
<input type="text" class="form-control" id="exampleFormControlInput1" placeholder="username"
20+
required/>
21+
</div>
22+
<div class="mb-3">
23+
<label for="exampleFormControlInput2" class="form-label">Password</label>
24+
<input type="text" class="form-control" id="exampleFormControlInput2" placeholder="password"
25+
required/>
26+
</div>
27+
<button type="button" class="btn btn-primary btn-lg btn-block mt-3">Login Now</button>
28+
<button type="button" class="btn btn-custom btn-lg btn-block mt-3">Register</button>
29+
<Link to="/home">Skip</Link>
30+
</form>
31+
</div>
32+
33+
</div>
34+
)
35+
}
36+
}
37+
38+
39+
export default Auth;

‎client/src/pages/Auth/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from "./Auth.jsx"

‎client/src/pages/Deck/Deck.css

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.flashcard {
2+
border: thin solid blue;
3+
border-radius: 10px;
4+
margin: 15px;
5+
}

‎client/src/pages/Deck/Deck.jsx

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React, { Component } from 'react';
2+
import { Link } from 'react-router-dom'
3+
import "./Deck.css";
4+
import axios from 'axios';
5+
6+
7+
// create a page to view deck one cards, and create a get request to our DB
8+
// upon component did mount GET all cards in deck 1
9+
class Deck extends Component {
10+
constructor(props) {
11+
super(props);
12+
this.state = {
13+
deck: [{_id:123123123, term: 'name', definition: 'george', deck: '1'},{_id:123123123, term: 'name2', definition: 'kevin', deck: 1},]
14+
}
15+
}
16+
17+
// componentDidMount() {
18+
// const {deckNumber} = this.props.location.state
19+
20+
// axios.get(`/deck/${deckNumber}`)
21+
// .then((res) => {
22+
// console.log("res: ", res);
23+
// this.setState({deck: res})
24+
// })
25+
// .catch((err) => {
26+
// console.log("err: ", err);
27+
// })
28+
29+
// }
30+
31+
render(){
32+
// iterate through the response array of objects (this.state.deck)
33+
// render a component for each card object
34+
// ### provide flashcard styling
35+
// ### provide flashcard functionality
36+
const inputArray = this.state.deck;
37+
const componentsToRender = [];
38+
39+
inputArray.map((current, i) => {
40+
componentsToRender.push(
41+
<div key={i} className="flashcard">
42+
<h5 className="card-title">{current.term}</h5>
43+
<p className="card-text">{current.definition}</p>
44+
45+
<button type="button" className="btn btn-primary btn-sm">delete card</button>
46+
<button type="button" className="btn btn-primary btn-sm">update card</button>
47+
</div>
48+
)
49+
})
50+
51+
return (
52+
<div>
53+
{componentsToRender}
54+
</div>
55+
56+
)
57+
}
58+
}
59+
60+
61+
export default Deck;
62+

‎client/src/pages/Deck/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from "./Deck.jsx"

‎client/src/pages/Decks/Decks.css

Whitespace-only changes.

0 commit comments

Comments
 (0)