-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* fixed the profile page and added user data to solution card * added recent solutions and created at solution timestamp * finished updating the homepage * minor comment cleanup
- Loading branch information
Showing
16 changed files
with
330 additions
and
151 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 |
|---|---|---|
| @@ -1,73 +1,97 @@ | ||
| import { Col, Container, Row, Stack } from "react-bootstrap"; | ||
| import { useState, useEffect } from "react"; | ||
| import Button from "../components/Button.tsx"; | ||
| import SolutionCard, { | ||
| SolutionCardProps, | ||
| } from "../components/SolutionCard.tsx"; | ||
| import SolutionCard from "../components/SolutionCard.tsx"; | ||
| import { ArrowUpRightSquare } from "react-bootstrap-icons"; | ||
| import ChallengeCard from "../components/ChallengeCard.tsx"; | ||
| import { ChallengeDifficulties } from "../types/challengeDifficulties.ts"; | ||
| import { SolutionData } from "../types/SolutionData.ts"; | ||
| import { ChallengeDetailsShort } from "../types/ChallengeDetailsShort.ts"; | ||
|
|
||
| const DEMO_SOLUTION_CARDS: SolutionCardProps[] = Array(5).fill({ | ||
| title: "Example Challenge 1: Airport Management System", | ||
| description: | ||
| "Some quick example text to build on the card title and make up the bulk of the card's content.", | ||
| imgSrc: | ||
| "https://images.unsplash.com/photo-1596496181871-9681eacf9764?q=80&w=2086&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", | ||
| href: "/home", | ||
| }); | ||
|
|
||
| const DEMO_CHALLENGE_CARDS: ChallengeDetailsShort[] = Array(3).fill({ | ||
| title: "Demo Challenge Card", | ||
| generalDescription: | ||
| "In this demo challenge you will be demoing our platform. From creating UML diagrams to submitting" + | ||
| " and getting review, we provide you all you need to become a Software Architecture monster!", | ||
| id: 0, | ||
| difficulty: ChallengeDifficulties.MEDIUM, | ||
| }); | ||
|
|
||
| function Home() { | ||
| // TODO: fetch the solutions | ||
| return ( | ||
| <section> | ||
| {/* Recent Solutions */} | ||
| <Container className={"mt-5"}> | ||
| <h2 className={"mb-3"}>Recent Solutions</h2> | ||
| <Row sm={1} lg={3} className={"gx-4 gy-4"}> | ||
| {DEMO_SOLUTION_CARDS.map((solutionCardProps) => ( | ||
| <Col key={solutionCardProps.href}> | ||
| <SolutionCard {...solutionCardProps} /> | ||
| </Col> | ||
| ))} | ||
| </Row> | ||
| {/* See more solutions button */} | ||
| <Button variant={"outline-primary"} className={"mt-3"} href={"/home"}> | ||
| See More <ArrowUpRightSquare style={{ marginLeft: "0.5rem" }} /> | ||
| </Button> | ||
| </Container> | ||
| const [solutions, setSolutions] = useState<SolutionData[]>([]); | ||
| const [challenges, setChallenges] = useState<ChallengeDetailsShort[]>([]); | ||
|
|
||
| //fetch the recent solutions | ||
| useEffect(() => { | ||
| fetch("/api/solutions/recent/3") | ||
| .then((resp) => resp.json() as Promise<SolutionData[]>) | ||
| .then((data: SolutionData[]) => { | ||
| setSolutions(data); | ||
| }) | ||
| .catch((err) => { | ||
| console.error(err); | ||
| }); | ||
| }, []); | ||
|
|
||
| //fetch the suggested challenges | ||
| useEffect(() => { | ||
| fetch("/api/challenges/suggested") | ||
| .then((resp) => resp.json() as Promise<ChallengeDetailsShort[]>) | ||
| .then((data: ChallengeDetailsShort[]) => { | ||
| setChallenges(data); | ||
| }) | ||
| .catch((err) => { | ||
| console.error(err); | ||
| }); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <section> | ||
| {/* Recent Solutions */} | ||
| <Container className={"mt-5"}> | ||
| <h2 className={"mb-3"}>Recent Solutions</h2> | ||
| <Row sm={1} lg={3} className={"gx-4 gy-4"}> | ||
| {solutions.map((solution: SolutionData) => { | ||
| return ( | ||
| <Col key={solution.title}> | ||
| <SolutionCard | ||
| imgSrc={solution.diagram} | ||
| title={solution.title} | ||
| id={solution.id.toString()} | ||
| description={solution.description} | ||
| author={solution.User.username} | ||
| createdAt={solution.createdAt} | ||
| /> | ||
| </Col> | ||
| ); | ||
| })} | ||
| </Row> | ||
| {/* See more solutions button */} | ||
| <Button variant={"outline-primary"} className={"mt-3"} href={"/solutions"}> | ||
| See More <ArrowUpRightSquare style={{ marginLeft: "0.5rem" }} /> | ||
| </Button> | ||
| </Container> | ||
|
|
||
| {/* Suggested Challenges */} | ||
| <Container className={"mt-5"}> | ||
| <Stack | ||
| direction={"horizontal"} | ||
| className={"justify-content-between mb-3"} | ||
| > | ||
| <h2>Suggested Challenges</h2> | ||
| {/* See more challenges button */} | ||
| <Button variant={"outline-primary"} href={"/home"}> | ||
| See More <ArrowUpRightSquare style={{ marginLeft: "0.5rem" }} /> | ||
| </Button> | ||
| </Stack> | ||
| <Row sm={1} lg={3} className={"gx-4 gy-4"}> | ||
| {DEMO_CHALLENGE_CARDS.map((challengeCardProps) => ( | ||
| <Col key={challengeCardProps.id}> | ||
| <ChallengeCard {...challengeCardProps} /> | ||
| </Col> | ||
| ))} | ||
| </Row> | ||
| </Container> | ||
| </section> | ||
| ); | ||
| {/* Suggested Challenges */} | ||
| <Container className={"my-5"}> | ||
| <Stack | ||
| direction={"horizontal"} | ||
| className={"justify-content-between mb-3"} | ||
| > | ||
| <h2>Suggested Challenges</h2> | ||
| {/* See more challenges button */} | ||
| <Button variant={"outline-primary"} href={"/challenges"}> | ||
| See More <ArrowUpRightSquare style={{ marginLeft: "0.5rem" }} /> | ||
| </Button> | ||
| </Stack> | ||
| <Row sm={1} lg={3} className={"gx-4 gy-4"}> | ||
| {challenges.map((challenge: ChallengeDetailsShort) => { | ||
| return ( | ||
| <Col key={challenge.id}> | ||
| <ChallengeCard | ||
| title={challenge.title} | ||
| difficulty={challenge.difficulty} | ||
| generalDescription={challenge.generalDescription} | ||
| id={challenge.id} | ||
| /> | ||
| </Col> | ||
| ); | ||
| })} | ||
| </Row> | ||
| </Container> | ||
| </section> | ||
| ); | ||
| } | ||
|
|
||
| export default Home; |
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.