#33 - Display GitHub input when the user is Graduate - Sabella

client/src/pages/Home.css

@@ -1,65 +1,68 @@
 main {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    min-height: 100vh;
-    background-color: #FFFFFF; 
-    font-family: Arial, sans-serif;
-    color: #333333; 
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	min-height: 100vh;
+	background-color: #ffffff;
+	font-family: Arial, sans-serif;
+	color: #333333;
 }
 
 main > div {
-    text-align: center;
-    margin-bottom: 20px;
+	text-align: center;
+	margin-bottom: 20px;
 }
 
 .logo {
-    width: 100px;
-    height: 100px;
-    margin-bottom: 20px;
+	width: 100px;
+	height: 100px;
+	margin-bottom: 20px;
 }
 
 .message {
-    font-size: 24px;
-    font-weight: bold;
-    margin-bottom: 20px;
+	font-size: 24px;
+	font-weight: bold;
+	margin-bottom: 20px;
 }
 
 a {
-    text-decoration: none;
-    color: #EE4434; 
-    font-size: 18px;
-    margin: 0 10px;
-    transition: color 0.3s ease;
+	text-decoration: none;
+	color: #ee4434;
+	font-size: 18px;
+	margin: 0 10px;
+	transition: color 0.3s ease;
 }
 
 a:hover {
-    color: #b4001b; 
+	color: #b4001b;
 }
 
 p > a {
-    font-size: 20px;
-    font-weight: bold;
-    background-color: #EE4434; 
-    color: white;
-    padding: 10px 20px;
-    border-radius: 5px;
-    transition: background-color 0.3s ease, color 0.3s ease;
+	font-size: 20px;
+	font-weight: bold;
+	background-color: #ee4434;
+	color: white;
+	padding: 10px 20px;
+	border-radius: 5px;
+	transition:
+		background-color 0.3s ease,
+		color 0.3s ease;
 }
 
 p > a:hover {
-    background-color: #b4001b;
+	background-color: #b4001b;
 }
 
 .border-color-1 {
-    border-color: #E3E3E3; }
+	border-color: #e3e3e3;
+}
 
 .border-color-2 {
-    border-color: #A9A9A9; 
+	border-color: #a9a9a9;
 }
 
 .error-message {
-    color: #FF0000;
-    font-weight: bold;
+	color: #ff0000;
+	font-weight: bold;
 }

client/src/pages/SignUp.js

@@ -7,6 +7,8 @@ const SignUp = () => {
 	const [password, setPassword] = useState("");
 	const [userType, setUserType] = useState("graduate");
 	const [message, setMessage] = useState("");
+	const [isGraduate, setIsGraduate] = useState(true);
+	const [userGithub, setUserGithub] = useState("");
 
 	const handleSignUp = async (event) => {
 		event.preventDefault();
@@ -18,7 +20,12 @@ const SignUp = () => {
 			headers: {
 				"Content-Type": "application/json",
 			},
-			body: JSON.stringify({ username, passwordHash, userType }),
+			body: JSON.stringify({
+				username,
+				passwordHash,
+				userType,
+				userGithub,
+			}),
 		});
 
 		const result = await response.json();
@@ -30,12 +37,18 @@ const SignUp = () => {
 		} else {
 			setMessage(`Error: ${result.message || result.error}`);
 		}
-        setUsername("");
-        setPassword("");
-        setUserType("graduate");
+		setUsername("");
+		setPassword("");
+		setUserType("graduate");
+		setUserGithub("");
+		setIsGraduate(true);
 	};
 
-
+	function handleOption(e) {
+		const optionValue = e.target.value;
+		setUserType(optionValue);
+		setIsGraduate(optionValue === "graduate");
+	}
 
 	return (
 		<div className="signUpCard">
@@ -64,19 +77,27 @@ const SignUp = () => {
 				<br />
 
 				<label htmlFor="userType">User Type:</label>
-				<select
-					id="userType"
-					value={userType}
-					onChange={(e) => setUserType(e.target.value)}
-					required
-				>
+				<select id="userType" value={userType} onChange={handleOption} required>
 					<option value="graduate">Graduate</option>
 					<option value="mentor">Mentor</option>
 					<option value="recruiter">Recruiter</option>
 				</select>
+				{isGraduate && (
+					<>
+						<label htmlFor="github">Github Account:</label>
+						<input
+							type="text"
+							id="github"
+							value={userGithub}
+							onChange={(e) => setUserGithub(e.target.value)}
+							required
+						/>
+						<br />
+						<br />
+					</>
+				)}
 				<br />
 				<br />
-
 				<button type="submit">Sign Up</button>
 			</form>
 			{message && <div id="message">{message}</div>}

server/api.js

@@ -13,11 +13,8 @@ router.get("/", (_, res) => {
 	res.json({ message: "Hello, world!" });
 });
 
-
-
-
-router.post("/users",  async (req, res) => {
-	const { username, passwordHash, userType } = req.body;
+router.post("/users", async (req, res) => {
+	const { username, passwordHash, userType, userGithub } = req.body;
 
 	if (!username) {
 		return res.status(422).json({ message: "Username field is required" });
@@ -31,50 +28,58 @@ router.post("/users",  async (req, res) => {
 
 	try {
 		const result = await db.query(
-			"INSERT INTO users (username, password_hash, user_type) VALUES ($1, $2, $3) RETURNING id",
+			"INSERT INTO users (username, password_hash, user_type) VALUES ($1, $2, $3) RETURNING id ",
 			[username, passwordHash, userType]
 		);
 
 		const newUserID = result.rows[0].id;
+
+		if (userType === "graduate" && userGithub) {
+			await db.query(
+				"INSERT INTO portfolios (user_id, github_username) VALUES ($1, $2)",
+				[newUserID, userGithub]
+			);
+		}
+
 		res.status(200).json({ success: true, data: { id: newUserID } });
 	} catch (error) {
-
 		if (error.code === "23505") {
 			return res
 				.status(409)
 				.json({ success: false, error: "Username already exists" });
-}
-		res
-			.status(500)
-			.json({ success: false, error: "Failed to create a new User into database" });
+		}
+		res.status(500).json({
+			success: false,
+			error: "Failed to create a new User into database",
+		});
 	}
 });
 
-
-router.get("/users/:id", roleBasedAuth("graduate", "mentor", "recruiter"), async (req, res) => {
-	const userId = req.params.id;
-	try {
-		const result = await db.query("SELECT * FROM users WHERE id = $1", [
-			userId,
-		]);
-
-		if (result.rows.length === 0) {
-			return res
-				.status(404)
-				.json({ success: false, message: "User not found" });
-		}
-
-		res.status(200).json({ success: true, data: result.rows[0] });
-	} catch (error) {
-		res
-			.status(500)
-			.json({
+router.get(
+	"/users/:id",
+	roleBasedAuth("graduate", "mentor", "recruiter"),
+	async (req, res) => {
+		const userId = req.params.id;
+		try {
+			const result = await db.query("SELECT * FROM users WHERE id = $1", [
+				userId,
+			]);
+
+			if (result.rows.length === 0) {
+				return res
+					.status(404)
+					.json({ success: false, message: "User not found" });
+			}
+
+			res.status(200).json({ success: true, data: result.rows[0] });
+		} catch (error) {
+			res.status(500).json({
 				success: false,
 				error: "Failed to fetch User from the database",
 			});
+		}
 	}
-});
-
+);
 
 router.delete("/users/:id", async (req, res) => {
 	const userId = req.params.id;
@@ -93,12 +98,10 @@ router.delete("/users/:id", async (req, res) => {
 
 		res.status(200).json({ success: true, data: { id: result.rows[0].id } });
 	} catch (error) {
-		res
-			.status(500)
-			.json({
-				success: false,
-				error: "Failed to delete User from the database",
-			});
+		res.status(500).json({
+			success: false,
+			error: "Failed to delete User from the database",
+		});
 	}
 });
 
@@ -112,11 +115,9 @@ router.post("/sign-in", async (req, res) => {
 	}
 
 	try {
-		const result = await db.query(
-			"SELECT * FROM users WHERE username = $1",
-			[username]
-		);
-
+		const result = await db.query("SELECT * FROM users WHERE username = $1", [
+			username,
+		]);
 
 		if (result.rows.length === 0) {
 			return res
@@ -139,7 +140,7 @@ router.post("/sign-in", async (req, res) => {
 		);
 
 		user.token = token;
-		res.status(200).json({ success: true, data: { "user": user } });
+		res.status(200).json({ success: true, data: { user: user } });
 	} catch (error) {
 		res.status(500).json({ success: false, error: "Failed to log in" });
 	}