-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Daniel Lundholm
committed
Feb 24, 2021
1 parent
c93e173
commit 93a5aec
Showing
16 changed files
with
437 additions
and
95 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
import React from 'react'; | ||
|
||
export const About = () => { | ||
return <h2>THIS IS THE ABOUT PAGE</h2>; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
import React from 'react'; | ||
|
||
export const Home = () => { | ||
return ( | ||
<> | ||
<h2>THIS IS THE HOME PAGE</h2> | ||
<p> | ||
This React project is meant to be able to be used as a startup template when creating new React | ||
projects. | ||
<br /> | ||
It contains a basic implementation of some technologies that you would likely want to use. | ||
</p> | ||
<p></p> | ||
</> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
import React from 'react'; | ||
import { NavLink } from 'react-router-dom'; | ||
|
||
export const NavBar = () => { | ||
return ( | ||
<nav className="App-navbar"> | ||
<ul> | ||
<li> | ||
<NavLink to="/" activeClassName="activeNavLink" exact> | ||
Home | ||
</NavLink> | ||
</li> | ||
<li> | ||
<NavLink to="/about" activeClassName="activeNavLink"> | ||
About | ||
</NavLink> | ||
</li> | ||
<li> | ||
<NavLink to="/crud" activeClassName="activeNavLink"> | ||
CRUD | ||
</NavLink> | ||
</li> | ||
<li> | ||
<NavLink to="/subroutes" activeClassName="activeNavLink"> | ||
Subroutes | ||
</NavLink> | ||
</li> | ||
<li> | ||
<NavLink to="/props" activeClassName="activeNavLink"> | ||
Props | ||
</NavLink> | ||
</li> | ||
</ul> | ||
</nav> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import React from 'react'; | ||
|
||
export const PageNotFound = () => { | ||
return ( | ||
<> | ||
<h2>PAGE NOT FOUND</h2> | ||
<h2>404</h2> | ||
</> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import React from 'react'; | ||
import { withRouter } from 'react-router-dom'; | ||
|
||
export const Props = (props: { text: string }): JSX.Element => { | ||
return ( | ||
<> | ||
<h2>THIS IS THE PROPS PAGE</h2> | ||
<p>{props.text}</p> | ||
</> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
import React from 'react'; | ||
import { useParams } from 'react-router-dom'; | ||
|
||
export const Subroute = () => { | ||
const { subrouteId } = useParams<{ subrouteId: string }>(); | ||
|
||
return <h3>Requested subroute: {subrouteId}</h3>; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
import React from 'react'; | ||
import { NavLink, Route, Switch, useRouteMatch } from 'react-router-dom'; | ||
import { Subroute } from './Subroute'; | ||
|
||
export const Subroutes = () => { | ||
const match = useRouteMatch(); | ||
|
||
return ( | ||
<> | ||
<h2>THIS IS THE SUBROUTES PAGE</h2> | ||
<p> | ||
Select a subroute bellow and it will be passed as a <b>route parameter</b> to the child component | ||
</p> | ||
<ul className="Topics-list"> | ||
<li> | ||
<NavLink to={`${match.url}/Subroute One`} activeClassName="activeNavLink"> | ||
Subroute One | ||
</NavLink> | ||
</li> | ||
<li> | ||
<NavLink to={`${match.url}/Subroute Two`} activeClassName="activeNavLink"> | ||
Subroute Two | ||
</NavLink> | ||
</li> | ||
</ul> | ||
|
||
<Switch> | ||
<Route path={`${match.path}/:subrouteId`}> | ||
<Subroute /> | ||
</Route> | ||
</Switch> | ||
</> | ||
); | ||
}; |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
import React, { useState } from 'react'; | ||
import { Prompt } from 'react-router-dom'; | ||
import { createUser } from '../../api/user'; | ||
import { IUser } from '../../interface/interface'; | ||
|
||
export const AddUser = (props: { updateUserList(): void }) => { | ||
const [user, setUser] = useState<IUser>({ id: '', name: '' }); | ||
|
||
const onChange = async (e: any) => { | ||
setUser((userToCreate) => ({ ...userToCreate, [e.target.name]: e.target.value })); | ||
}; | ||
|
||
const onSubmit = async (e: any) => { | ||
e.preventDefault(); | ||
await createUser(user); | ||
props.updateUserList(); | ||
}; | ||
|
||
return ( | ||
<> | ||
<Prompt | ||
when={user.id != '' || user.name != ''} | ||
message="If you leave this page without submiting Add User data, the data will be lost" | ||
/> | ||
<h3>Add user</h3> | ||
<form onSubmit={onSubmit}> | ||
<label> | ||
Id: | ||
<input type="text" name="id" value={user.id} onChange={onChange} /> | ||
</label> | ||
<label> | ||
Name: | ||
<input type="text" name="name" value={user.name} onChange={onChange} /> | ||
</label> | ||
<input type="submit" value="Submit" /> | ||
<button>Cancel</button> | ||
</form> | ||
</> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
import React, { useEffect, useState } from 'react'; | ||
import { IUser } from '../../interface/interface'; | ||
import { getUserById, updateUser } from '../../api/user'; | ||
|
||
export const UpdateUser = (props: { userId: string; updateUserList(): void }): JSX.Element => { | ||
const [user, setUser] = useState<IUser>({ id: '', name: '' }); | ||
|
||
useEffect(() => { | ||
init(); | ||
}, []); | ||
|
||
const init = async () => { | ||
setUser(await getUserById(props.userId)); | ||
}; | ||
|
||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { | ||
setUser((user) => ({ ...user, [e.target.name]: e.target.value })); | ||
console.log(user.name); | ||
}; | ||
|
||
const handleSubmit = async (e: any) => { | ||
e.preventDefault(); | ||
await updateUser(user); | ||
props.updateUserList(); | ||
}; | ||
|
||
return ( | ||
<> | ||
<h3>Update user</h3> | ||
<form onSubmit={handleSubmit}> | ||
<label> | ||
Name: | ||
<input type="text" name="name" value={user.name} onChange={handleChange} /> | ||
</label> | ||
<input type="submit" value="Submit" /> | ||
{/* TODO Fix cancel buttons */} | ||
<button>Cancel</button> | ||
</form> | ||
</> | ||
); | ||
}; |
Oops, something went wrong.