initial-frontend-work #2
@ -31,6 +31,8 @@ struct ApiResponse {
 | 
				
			|||||||
    message: Option<Cow<'static, str>>,
 | 
					    message: Option<Cow<'static, str>>,
 | 
				
			||||||
    #[serde(skip_serializing_if = "Option::is_none")]
 | 
					    #[serde(skip_serializing_if = "Option::is_none")]
 | 
				
			||||||
    jwt: Option<Cow<'static, str>>,
 | 
					    jwt: Option<Cow<'static, str>>,
 | 
				
			||||||
 | 
					    #[serde(skip_serializing_if = "Option::is_none")]
 | 
				
			||||||
 | 
					    gamenights: Option<Vec<schema::GameNight>>,
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
impl ApiResponse {
 | 
					impl ApiResponse {
 | 
				
			||||||
@ -41,6 +43,7 @@ impl ApiResponse {
 | 
				
			|||||||
        result: Self::SUCCES_RESULT,
 | 
					        result: Self::SUCCES_RESULT,
 | 
				
			||||||
        message: None,
 | 
					        message: None,
 | 
				
			||||||
        jwt: None,
 | 
					        jwt: None,
 | 
				
			||||||
 | 
					        gamenights: None,
 | 
				
			||||||
    };
 | 
					    };
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    fn error(message: String) -> Self {
 | 
					    fn error(message: String) -> Self {
 | 
				
			||||||
@ -48,6 +51,7 @@ impl ApiResponse {
 | 
				
			|||||||
            result: Self::FAILURE_RESULT,
 | 
					            result: Self::FAILURE_RESULT,
 | 
				
			||||||
            message: Some(Cow::Owned(message)),
 | 
					            message: Some(Cow::Owned(message)),
 | 
				
			||||||
            jwt: None,
 | 
					            jwt: None,
 | 
				
			||||||
 | 
					            gamenights: None,
 | 
				
			||||||
        }
 | 
					        }
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@ -56,6 +60,16 @@ impl ApiResponse {
 | 
				
			|||||||
            result: Self::SUCCES_RESULT,
 | 
					            result: Self::SUCCES_RESULT,
 | 
				
			||||||
            message: None,
 | 
					            message: None,
 | 
				
			||||||
            jwt: Some(Cow::Owned(jwt)),
 | 
					            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")]
 | 
					#[get("/gamenights")]
 | 
				
			||||||
pub async fn gamenights(conn: DbConn, _user: schema::User) -> ApiResponseVariant {
 | 
					pub async fn gamenights(conn: DbConn, _user: schema::User) -> ApiResponseVariant {
 | 
				
			||||||
    let gamenights = schema::get_all_gamenights(conn).await;
 | 
					    let gamenights = schema::get_all_gamenights(conn).await;
 | 
				
			||||||
    ApiResponseVariant::Value(json!(gamenights))
 | 
					    ApiResponseVariant::Value(json!(ApiResponse::gamenight_response(gamenights)))
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
#[get("/gamenights", rank = 2)]
 | 
					#[get("/gamenights", rank = 2)]
 | 
				
			||||||
@ -117,17 +131,20 @@ pub async fn gamenights_unauthorized() -> ApiResponseVariant {
 | 
				
			|||||||
#[post("/gamenight", format = "application/json", data = "<gamenight_json>")]
 | 
					#[post("/gamenight", format = "application/json", data = "<gamenight_json>")]
 | 
				
			||||||
pub async fn gamenight_post_json(
 | 
					pub async fn gamenight_post_json(
 | 
				
			||||||
    conn: DbConn,
 | 
					    conn: DbConn,
 | 
				
			||||||
    user: Option<schema::User>,
 | 
					    _user: schema::User,
 | 
				
			||||||
    gamenight_json: Json<schema::GameNightNoId>,
 | 
					    gamenight_json: Json<schema::GameNightNoId>,
 | 
				
			||||||
) -> ApiResponseVariant {
 | 
					) -> ApiResponseVariant {
 | 
				
			||||||
    if user.is_some() {
 | 
					    match schema::insert_gamenight(conn, gamenight_json.into_inner()).await {
 | 
				
			||||||
        schema::insert_gamenight(conn, gamenight_json.into_inner()).await;
 | 
					        Ok(_) => ApiResponseVariant::Value(json!(ApiResponse::SUCCES)),
 | 
				
			||||||
        ApiResponseVariant::Value(json!(ApiResponse::SUCCES))
 | 
					        Err(err) => ApiResponseVariant::Value(json!(ApiResponse::error(err.to_string()))),
 | 
				
			||||||
    } else {
 | 
					 | 
				
			||||||
        ApiResponseVariant::Status(Status::Unauthorized)
 | 
					 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					#[post("/gamenight", rank = 2)]
 | 
				
			||||||
 | 
					pub async fn gamenight_post_json_unauthorized() -> ApiResponseVariant {
 | 
				
			||||||
 | 
					    ApiResponseVariant::Status(Status::Unauthorized)
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
#[post("/register", format = "application/json", data = "<register_json>")]
 | 
					#[post("/register", format = "application/json", data = "<register_json>")]
 | 
				
			||||||
pub async fn register_post_json(
 | 
					pub async fn register_post_json(
 | 
				
			||||||
    conn: DbConn,
 | 
					    conn: DbConn,
 | 
				
			||||||
 | 
				
			|||||||
@ -59,6 +59,7 @@ fn rocket() -> _ {
 | 
				
			|||||||
                api::gamenights,
 | 
					                api::gamenights,
 | 
				
			||||||
                api::gamenights_unauthorized,
 | 
					                api::gamenights_unauthorized,
 | 
				
			||||||
                api::gamenight_post_json,
 | 
					                api::gamenight_post_json,
 | 
				
			||||||
 | 
					                api::gamenight_post_json_unauthorized,
 | 
				
			||||||
                api::register_post_json,
 | 
					                api::register_post_json,
 | 
				
			||||||
                api::login_post_json
 | 
					                api::login_post_json
 | 
				
			||||||
            ],
 | 
					            ],
 | 
				
			||||||
 | 
				
			|||||||
@ -84,14 +84,18 @@ pub async fn get_all_gamenights(conn: DbConn) -> Vec<GameNight> {
 | 
				
			|||||||
        .await
 | 
					        .await
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
pub async fn insert_gamenight(conn: DbConn, new_gamenight: GameNightNoId) -> () {
 | 
					pub async fn insert_gamenight(conn: DbConn, new_gamenight: GameNightNoId) -> Result<(), DatabaseError> {
 | 
				
			||||||
    conn.run(|c| {
 | 
					    let insert_result = conn.run(|c| {
 | 
				
			||||||
        diesel::insert_into(gamenight::table)
 | 
					        diesel::insert_into(gamenight::table)
 | 
				
			||||||
            .values(new_gamenight)
 | 
					            .values(new_gamenight)
 | 
				
			||||||
            .execute(c)
 | 
					            .execute(c)
 | 
				
			||||||
            .unwrap()
 | 
					 | 
				
			||||||
    })
 | 
					    })
 | 
				
			||||||
    .await;
 | 
					    .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> {
 | 
					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"
 | 
					        "web-vitals": "^2.1.4"
 | 
				
			||||||
      },
 | 
					      },
 | 
				
			||||||
      "devDependencies": {
 | 
					      "devDependencies": {
 | 
				
			||||||
 | 
					        "dotenv-cli": "^5.1.0",
 | 
				
			||||||
        "npm-watch": "^0.11.0"
 | 
					        "npm-watch": "^0.11.0"
 | 
				
			||||||
      }
 | 
					      }
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
@ -6441,6 +6442,39 @@
 | 
				
			|||||||
        "node": ">=10"
 | 
					        "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": {
 | 
					    "node_modules/dotenv-expand": {
 | 
				
			||||||
      "version": "5.1.0",
 | 
					      "version": "5.1.0",
 | 
				
			||||||
      "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
 | 
					      "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",
 | 
					      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
 | 
				
			||||||
      "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q=="
 | 
					      "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": {
 | 
					    "dotenv-expand": {
 | 
				
			||||||
      "version": "5.1.0",
 | 
					      "version": "5.1.0",
 | 
				
			||||||
      "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
 | 
					      "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
 | 
				
			||||||
 | 
				
			|||||||
@ -40,6 +40,7 @@
 | 
				
			|||||||
    ]
 | 
					    ]
 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
  "devDependencies": {
 | 
					  "devDependencies": {
 | 
				
			||||||
 | 
					    "dotenv-cli": "^5.1.0",
 | 
				
			||||||
    "npm-watch": "^0.11.0"
 | 
					    "npm-watch": "^0.11.0"
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
				
			|||||||
@ -3,7 +3,8 @@ import './App.css';
 | 
				
			|||||||
import React, { useState, useEffect } from 'react';
 | 
					import React, { useState, useEffect } from 'react';
 | 
				
			||||||
import MenuBar from './components/MenuBar';
 | 
					import MenuBar from './components/MenuBar';
 | 
				
			||||||
import Login from './components/Login';
 | 
					import Login from './components/Login';
 | 
				
			||||||
import Gamenights from "./components/Gamenights"
 | 
					import Gamenights from './components/Gamenights'
 | 
				
			||||||
 | 
					import AddGameNight from './components/AddGameNight'
 | 
				
			||||||
 | 
					
 | 
				
			||||||
function App() {
 | 
					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 = () => {
 | 
					  const onLogout = () => {
 | 
				
			||||||
    setUser(null);
 | 
					    setUser(null);
 | 
				
			||||||
    setToken(null);
 | 
					    setToken(null);
 | 
				
			||||||
@ -56,7 +84,7 @@ function App() {
 | 
				
			|||||||
          }
 | 
					          }
 | 
				
			||||||
        });
 | 
					        });
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
  }, [token]);
 | 
					  });
 | 
				
			||||||
| 
							
							
								
									
	
	
	
	
	
	
	
	 
					
					Roflin marked this conversation as resolved
					
						
						
							Outdated
						
					
				 
				 | 
					|||||||
 | 
					
 | 
				
			||||||
  if(token === null) {
 | 
					  if(token === null) {
 | 
				
			||||||
    return (
 | 
					    return (
 | 
				
			||||||
@ -66,10 +94,11 @@ function App() {
 | 
				
			|||||||
    );
 | 
					    );
 | 
				
			||||||
  } else {
 | 
					  } else {
 | 
				
			||||||
    return (
 | 
					    return (
 | 
				
			||||||
      <div className="App">
 | 
					      <>
 | 
				
			||||||
        <MenuBar user={user} onLogout={onLogout} />
 | 
					        <MenuBar user={user} onLogout={onLogout} />
 | 
				
			||||||
 | 
					        <AddGameNight onChange={handleAddGameNight} />
 | 
				
			||||||
        <Gamenights gamenights={gamenights} />
 | 
					        <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) {
 | 
					function Gamenights(props) {
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  console.log(props.gamenights);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  let gamenights = props.gamenights.map(g => 
 | 
					  let gamenights = props.gamenights.map(g => 
 | 
				
			||||||
    (<li>{g.name}</li>)
 | 
					    (<li>{g.game}</li>)
 | 
				
			||||||
  );
 | 
					  );
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  console.log(gamenights);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  return (
 | 
					  return (
 | 
				
			||||||
    <ul>
 | 
					    <ul>
 | 
				
			||||||
      {gamenights}
 | 
					      {gamenights}
 | 
				
			||||||
 | 
				
			|||||||
@ -6,16 +6,16 @@ function Login(props) {
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
  const handleUsernameChange = (event) => {
 | 
					  const handleUsernameChange = (event) => {
 | 
				
			||||||
    setUsername(event.target.value);
 | 
					    setUsername(event.target.value);
 | 
				
			||||||
  }
 | 
					  };
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  const handlePasswordChange = (event) => {
 | 
					  const handlePasswordChange = (event) => {
 | 
				
			||||||
    setPassword(event.target.value);
 | 
					    setPassword(event.target.value);
 | 
				
			||||||
  }
 | 
					  };
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  const handleLogin = (event) => {
 | 
					  const handleLogin = (event) => {
 | 
				
			||||||
    props.onChange({ username: this.state.username, password: this.state.password });
 | 
					    props.onChange({ username: username, password: password });
 | 
				
			||||||
    event.preventDefault();
 | 
					    event.preventDefault();
 | 
				
			||||||
  }
 | 
					  };
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  return (
 | 
					  return (
 | 
				
			||||||
    <div className="Login-Component">
 | 
					    <div className="Login-Component">
 | 
				
			||||||
 | 
				
			|||||||
@ -7,7 +7,7 @@ function MenuBar(props) {
 | 
				
			|||||||
        <a>Gamenight</a>
 | 
					        <a>Gamenight</a>
 | 
				
			||||||
      </li>
 | 
					      </li>
 | 
				
			||||||
      <li>
 | 
					      <li>
 | 
				
			||||||
        <a>User</a>
 | 
					        <a>User: {props.user}</a>
 | 
				
			||||||
      </li>
 | 
					      </li>
 | 
				
			||||||
      <li>
 | 
					      <li>
 | 
				
			||||||
        <button onClick={props.onLogout}>Logout</button>
 | 
					        <button onClick={props.onLogout}>Logout</button>
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
	
			
			x
			
			
		
	
		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.