95 solution submission user instructions

client/src/pages/PostSolution.tsx

@@ -1,9 +1,9 @@
-import { useState, useEffect, ChangeEvent, FormEvent } from "react";
+import React, { useState, ChangeEvent, FormEvent } from "react";
 import { useParams } from "react-router-dom";
 import { Col, Container, Form, Row } from "react-bootstrap";
 import Button from "../components/Button.tsx";
 import { useNavigate } from "react-router-dom";
-import { UserData } from "../types/UserData.ts";
+import ReactMarkdown from "react-markdown";
 
 type PostSolutionState = {
   title: string;
@@ -21,6 +21,7 @@ const PostSolution = () => {
       diagram: null,
     },
   );
+  const [showPreview, setShowPreview] = useState(false);
 
   const handleChange = (
     e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
@@ -44,14 +45,11 @@ const PostSolution = () => {
 
   const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    // TODO: Form validation
     const data = new FormData();
     data.append("challengeId", `${challengeId}`);
-
     data.append("title", postSolutionState.title);
-
     data.append("description", postSolutionState.description);
-    data.append("diagram", postSolutionState.diagram);
+    data.append("diagram", postSolutionState.diagram!);
 
     fetch(`/api/solutions`, {
       method: "POST",
@@ -66,42 +64,100 @@ const PostSolution = () => {
       });
   };
 
+  const togglePreview = () => {
+    setShowPreview(!showPreview);
+  };
+
   return (
     <Container>
       <Row className={"my-5 justify-content-center"}>
-        <Col md={6} className={"bg-gray-200 rounded py-5 px-md-5"}>
+        <Col md={8} className={"bg-gray-200 rounded py-5 px-md-5"}>
           <h1>Submit Your Solution!</h1>
+          <p>
+            The solution retrospective helps you think about your project and share it with the community. Answer the questions below to talk about your project, what you learned, and where you need support. Clear details help others understand and give useful feedback.
+          </p>
           <Form onSubmit={handleSubmit}>
             <Form.Group className="mb-3" controlId="title">
-              <Form.Label>Title</Form.Label>
+              <Form.Label>Solution Title</Form.Label>
               <Form.Control
                 type="text"
                 name="title"
                 value={postSolutionState.title}
                 onChange={handleChange}
                 required
+                placeholder="Enter a concise, descriptive title"
               />
             </Form.Group>
             <Form.Group className="mb-3" controlId="description">
-              <Form.Label>Description</Form.Label>
+              <Form.Label>Solution Description</Form.Label>
+              <p>Provide a brief overview of your design pattern implementation. Include:</p>
+              <ul>
+                <li>The specific design pattern you used</li>
+                <li>The problem it solves</li>
+                <li>Key components of your implementation</li>
+                <li>How it adheres to design pattern principles</li>
+              </ul>
+              <div>
+                <Button variant="secondary" onClick={togglePreview}>
+                  {showPreview ? "Edit" : "Preview"}
+                </Button>
+              </div>
+              {showPreview ? (
+                <div className="preview">
+                  <ReactMarkdown>{postSolutionState.description}</ReactMarkdown>
+                </div>
+              ) : (
+                <Form.Control
+                  as="textarea"
+                  name="description"
+                  value={postSolutionState.description}
+                  onChange={handleChange}
+                  rows={6}
+                  required
+                  placeholder="Provide a brief overview of your design pattern implementation"
+                />
+              )}
+            </Form.Group>
+
+            <Form.Group className="mb-3" controlId="diagram">
+              <Form.Label>Solution Diagram</Form.Label>
+              <Form.Control
+                type="file"
+                name="diagram"
+                onChange={handleFileChange}
+                accept="image/*"
+              />
+              <Form.Text className="text-muted">
+                Upload a diagram illustrating the structure and relationships of your design pattern implementation. Use UML or a similar notation.
+              </Form.Text>
+            </Form.Group>
+
+            <Form.Group className="mb-3" controlId="proud">
+              <Form.Label>
+                What are you most proud of, and what would you do differently next time?
+              </Form.Label>
               <Form.Control
                 as="textarea"
-                name="description"
-                value={postSolutionState.description}
+                name="proud"
                 onChange={handleChange}
                 rows={4}
                 required
               />
             </Form.Group>
-            <Form.Group className="mb-3" controlId="diagram">
-              <Form.Label>Diagram</Form.Label>
+
+            <Form.Group className="mb-3" controlId="challenges">
+              <Form.Label>
+                What challenges did you encounter, and how did you overcome them?
+              </Form.Label>
               <Form.Control
-                type="file"
-                name="diagram"
-                onChange={handleFileChange}
-                accept="image/*"
+                as="textarea"
+                name="challenges"
+                onChange={handleChange}
+                rows={4}
+                required
               />
             </Form.Group>
+
             <Button variant="primary" type="submit">
               Submit
             </Button>

client/src/pages/Solution.tsx

@@ -5,7 +5,7 @@ import { SolutionData } from "../types/SolutionData.ts";
 import { CommentData } from "../types/CommentData.ts";
 import Button from "../components/Button.tsx";
 import Comment from "../components/Comment.tsx";
-import useCheckRole from "../hooks/useCheckRole.tsx"; // Make sure the path is correct
+import useCheckRole from "../hooks/useCheckRole.tsx"; 
 import dayjs from "dayjs";
 
 function loadSolution(id, setter, setForbidden) {