initial-frontend-work #2
@ -31,6 +31,8 @@ struct ApiResponse {
|
||||
message: Option<Cow<'static, str>>,
|
||||
#[serde(skip_serializing_if = "Option::is_none")]
|
||||
jwt: Option<Cow<'static, str>>,
|
||||
#[serde(skip_serializing_if = "Option::is_none")]
|
||||
gamenights: Option<Vec<schema::GameNight>>,
|
||||
}
|
||||
|
||||
impl ApiResponse {
|
||||
@ -41,6 +43,7 @@ impl ApiResponse {
|
||||
result: Self::SUCCES_RESULT,
|
||||
message: None,
|
||||
jwt: None,
|
||||
gamenights: None,
|
||||
};
|
||||
|
||||
fn error(message: String) -> Self {
|
||||
@ -48,6 +51,7 @@ impl ApiResponse {
|
||||
result: Self::FAILURE_RESULT,
|
||||
message: Some(Cow::Owned(message)),
|
||||
jwt: None,
|
||||
gamenights: None,
|
||||
}
|
||||
}
|
||||
|
||||
@ -56,6 +60,16 @@ impl ApiResponse {
|
||||
result: Self::SUCCES_RESULT,
|
||||
message: None,
|
||||
jwt: Some(Cow::Owned(jwt)),
|
||||
gamenights: None,
|
||||
}
|
||||
}
|
||||
|
||||
fn gamenight_response(gamenights: Vec<schema::GameNight>) -> Self {
|
||||
Self {
|
||||
result: Self::SUCCES_RESULT,
|
||||
message: None,
|
||||
jwt: None,
|
||||
gamenights: Some(gamenights),
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -106,7 +120,7 @@ impl<'r> FromRequest<'r> for schema::User {
|
||||
#[get("/gamenights")]
|
||||
pub async fn gamenights(conn: DbConn, _user: schema::User) -> ApiResponseVariant {
|
||||
let gamenights = schema::get_all_gamenights(conn).await;
|
||||
ApiResponseVariant::Value(json!(gamenights))
|
||||
ApiResponseVariant::Value(json!(ApiResponse::gamenight_response(gamenights)))
|
||||
}
|
||||
|
||||
#[get("/gamenights", rank = 2)]
|
||||
@ -117,17 +131,20 @@ pub async fn gamenights_unauthorized() -> ApiResponseVariant {
|
||||
#[post("/gamenight", format = "application/json", data = "<gamenight_json>")]
|
||||
pub async fn gamenight_post_json(
|
||||
conn: DbConn,
|
||||
user: Option<schema::User>,
|
||||
_user: schema::User,
|
||||
gamenight_json: Json<schema::GameNightNoId>,
|
||||
) -> ApiResponseVariant {
|
||||
if user.is_some() {
|
||||
schema::insert_gamenight(conn, gamenight_json.into_inner()).await;
|
||||
ApiResponseVariant::Value(json!(ApiResponse::SUCCES))
|
||||
} else {
|
||||
ApiResponseVariant::Status(Status::Unauthorized)
|
||||
match schema::insert_gamenight(conn, gamenight_json.into_inner()).await {
|
||||
Ok(_) => ApiResponseVariant::Value(json!(ApiResponse::SUCCES)),
|
||||
Err(err) => ApiResponseVariant::Value(json!(ApiResponse::error(err.to_string()))),
|
||||
}
|
||||
}
|
||||
|
||||
#[post("/gamenight", rank = 2)]
|
||||
pub async fn gamenight_post_json_unauthorized() -> ApiResponseVariant {
|
||||
ApiResponseVariant::Status(Status::Unauthorized)
|
||||
}
|
||||
|
||||
#[post("/register", format = "application/json", data = "<register_json>")]
|
||||
pub async fn register_post_json(
|
||||
conn: DbConn,
|
||||
|
@ -59,6 +59,7 @@ fn rocket() -> _ {
|
||||
api::gamenights,
|
||||
api::gamenights_unauthorized,
|
||||
api::gamenight_post_json,
|
||||
api::gamenight_post_json_unauthorized,
|
||||
api::register_post_json,
|
||||
api::login_post_json
|
||||
],
|
||||
|
@ -84,14 +84,18 @@ pub async fn get_all_gamenights(conn: DbConn) -> Vec<GameNight> {
|
||||
.await
|
||||
}
|
||||
|
||||
pub async fn insert_gamenight(conn: DbConn, new_gamenight: GameNightNoId) -> () {
|
||||
conn.run(|c| {
|
||||
pub async fn insert_gamenight(conn: DbConn, new_gamenight: GameNightNoId) -> Result<(), DatabaseError> {
|
||||
let insert_result = conn.run(|c| {
|
||||
diesel::insert_into(gamenight::table)
|
||||
.values(new_gamenight)
|
||||
.execute(c)
|
||||
.unwrap()
|
||||
})
|
||||
.await;
|
||||
|
||||
match insert_result {
|
||||
Err(e) => Err(DatabaseError::Query(e.to_string())),
|
||||
_ => Ok(()),
|
||||
}
|
||||
}
|
||||
|
||||
pub async fn insert_user(conn: DbConn, new_user: Register) -> Result<(), DatabaseError> {
|
||||
|
60
frontend/package-lock.json
generated
60
frontend/package-lock.json
generated
@ -17,6 +17,7 @@
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"dotenv-cli": "^5.1.0",
|
||||
"npm-watch": "^0.11.0"
|
||||
}
|
||||
},
|
||||
@ -6441,6 +6442,39 @@
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/dotenv-cli": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/dotenv-cli/-/dotenv-cli-5.1.0.tgz",
|
||||
"integrity": "sha512-NoEZAlKo9WVrG0b3i9mBxdD6INdDuGqdgR74t68t8084QcI077/1MnPerRW1odl+9uULhcdnQp2U0pYVppKHOA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"cross-spawn": "^7.0.3",
|
||||
"dotenv": "^16.0.0",
|
||||
"dotenv-expand": "^8.0.1",
|
||||
"minimist": "^1.2.5"
|
||||
},
|
||||
"bin": {
|
||||
"dotenv": "cli.js"
|
||||
}
|
||||
},
|
||||
"node_modules/dotenv-cli/node_modules/dotenv": {
|
||||
"version": "16.0.0",
|
||||
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.0.tgz",
|
||||
"integrity": "sha512-qD9WU0MPM4SWLPJy/r2Be+2WgQj8plChsyrCNQzW/0WjvcJQiKQJ9mH3ZgB3fxbUUxgc/11ZJ0Fi5KiimWGz2Q==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/dotenv-cli/node_modules/dotenv-expand": {
|
||||
"version": "8.0.3",
|
||||
"resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-8.0.3.tgz",
|
||||
"integrity": "sha512-SErOMvge0ZUyWd5B0NXMQlDkN+8r+HhVUsxgOO7IoPDOdDRD2JjExpN6y3KnFR66jsJMwSn1pqIivhU5rcJiNg==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/dotenv-expand": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
|
||||
@ -21378,6 +21412,32 @@
|
||||
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
|
||||
"integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q=="
|
||||
},
|
||||
"dotenv-cli": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/dotenv-cli/-/dotenv-cli-5.1.0.tgz",
|
||||
"integrity": "sha512-NoEZAlKo9WVrG0b3i9mBxdD6INdDuGqdgR74t68t8084QcI077/1MnPerRW1odl+9uULhcdnQp2U0pYVppKHOA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"cross-spawn": "^7.0.3",
|
||||
"dotenv": "^16.0.0",
|
||||
"dotenv-expand": "^8.0.1",
|
||||
"minimist": "^1.2.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"dotenv": {
|
||||
"version": "16.0.0",
|
||||
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.0.tgz",
|
||||
"integrity": "sha512-qD9WU0MPM4SWLPJy/r2Be+2WgQj8plChsyrCNQzW/0WjvcJQiKQJ9mH3ZgB3fxbUUxgc/11ZJ0Fi5KiimWGz2Q==",
|
||||
"dev": true
|
||||
},
|
||||
"dotenv-expand": {
|
||||
"version": "8.0.3",
|
||||
"resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-8.0.3.tgz",
|
||||
"integrity": "sha512-SErOMvge0ZUyWd5B0NXMQlDkN+8r+HhVUsxgOO7IoPDOdDRD2JjExpN6y3KnFR66jsJMwSn1pqIivhU5rcJiNg==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"dotenv-expand": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
|
||||
|
@ -40,6 +40,7 @@
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"dotenv-cli": "^5.1.0",
|
||||
"npm-watch": "^0.11.0"
|
||||
}
|
||||
}
|
||||
|
@ -3,7 +3,8 @@ import './App.css';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import MenuBar from './components/MenuBar';
|
||||
import Login from './components/Login';
|
||||
import Gamenights from "./components/Gamenights"
|
||||
import Gamenights from './components/Gamenights'
|
||||
import AddGameNight from './components/AddGameNight'
|
||||
|
||||
function App() {
|
||||
|
||||
@ -32,6 +33,33 @@ function App() {
|
||||
});
|
||||
};
|
||||
|
||||
const handleAddGameNight = (input) => {
|
||||
if (token !== null) {
|
||||
const requestOptions = {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: JSON.stringify(input)
|
||||
};
|
||||
|
||||
fetch('api/gamenight', requestOptions)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if(data.result !== "Ok") {
|
||||
setFlashData({
|
||||
type: "Error",
|
||||
message: data.message
|
||||
});
|
||||
} else {
|
||||
setToken(token);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const onLogout = () => {
|
||||
setUser(null);
|
||||
setToken(null);
|
||||
@ -56,7 +84,7 @@ function App() {
|
||||
}
|
||||
});
|
||||
}
|
||||
}, [token]);
|
||||
});
|
||||
Roflin marked this conversation as resolved
Outdated
|
||||
|
||||
if(token === null) {
|
||||
return (
|
||||
@ -66,10 +94,11 @@ function App() {
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div className="App">
|
||||
<>
|
||||
<MenuBar user={user} onLogout={onLogout} />
|
||||
<AddGameNight onChange={handleAddGameNight} />
|
||||
<Gamenights gamenights={gamenights} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
53
frontend/src/components/AddGameNight.jsx
Normal file
53
frontend/src/components/AddGameNight.jsx
Normal file
@ -0,0 +1,53 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
function AddGameNight(props) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const [gameName, setGameName] = useState("");
|
||||
const [date, setDate] = useState(null);
|
||||
|
||||
const handleAddGamenight = (event) => {
|
||||
props.onChange({
|
||||
game: gameName,
|
||||
datetime: date
|
||||
});
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
const handleNameChange = (event) => {
|
||||
setGameName(event.target.value);
|
||||
};
|
||||
|
||||
const handleDateChange = (event) => {
|
||||
setDate(event.target.value);
|
||||
};
|
||||
|
||||
if(expanded) {
|
||||
return (
|
||||
<div className="Add-GameNight">
|
||||
<form onSubmit={handleAddGamenight}>
|
||||
<fieldset>
|
||||
<legend>Gamenight</legend>
|
||||
|
||||
<label for="gamename">Game name:</label>
|
||||
<input id="gamename" name="gamename" type="text"
|
||||
value={gameName}
|
||||
onChange={handleNameChange} />
|
||||
<label for="date">date:</label>
|
||||
<input id="date" name="date" type="date"
|
||||
value={date}
|
||||
onChange={handleDateChange} />
|
||||
|
||||
<input type="submit" value="Submit" />
|
||||
</fieldset>
|
||||
</form>
|
||||
<button onClick={() => {setExpanded(false)}}>Expand</button>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<button onClick={() => {setExpanded(true)}}>Expand</button>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default AddGameNight
|
@ -2,10 +2,14 @@ import React from 'react';
|
||||
|
||||
function Gamenights(props) {
|
||||
|
||||
console.log(props.gamenights);
|
||||
|
||||
let gamenights = props.gamenights.map(g =>
|
||||
(<li>{g.name}</li>)
|
||||
(<li>{g.game}</li>)
|
||||
);
|
||||
|
||||
console.log(gamenights);
|
||||
|
||||
return (
|
||||
<ul>
|
||||
{gamenights}
|
||||
|
@ -6,16 +6,16 @@ function Login(props) {
|
||||
|
||||
const handleUsernameChange = (event) => {
|
||||
setUsername(event.target.value);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePasswordChange = (event) => {
|
||||
setPassword(event.target.value);
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogin = (event) => {
|
||||
props.onChange({ username: this.state.username, password: this.state.password });
|
||||
props.onChange({ username: username, password: password });
|
||||
event.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="Login-Component">
|
||||
|
@ -7,7 +7,7 @@ function MenuBar(props) {
|
||||
<a>Gamenight</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>User</a>
|
||||
<a>User: {props.user}</a>
|
||||
</li>
|
||||
<li>
|
||||
<button onClick={props.onLogout}>Logout</button>
|
||||
|
Loading…
Reference in New Issue
Block a user
You need to pass all dependencies of the effect as a second parameter. Otherwise the effect is run on every re-render.
If you want to run the effect only once, pass
[]
as dependency.