feat: add necessary components and paths to fetch api from a form.

Author: jbey251

lesson_27/JBey/src/components/Button/Button.scss

@@ -0,0 +1,11 @@
+.button {
+  border-radius: 10px;
+  color: white;
+  background-color: #f47d26;
+  padding: 10px 20px;
+  margin-left: auto;
+  font-family: Poppins, sans-serif;
+  font-size: 18px;
+  cursor: pointer;
+  border: none;
+}

lesson_27/JBey/src/components/Button/Button.tsx

@@ -0,0 +1,23 @@
+import './Button.scss';
+
+type ButtonProps = {
+  label: string;
+  onClick?: () => void;
+  type?: 'button' | 'submit' | 'reset';
+  className?: string;
+};
+
+const Button = ({
+  label,
+  onClick,
+  type = 'submit', // ← change default to 'submit'
+  className = '',
+}: ButtonProps) => {
+  return (
+    <button type={type} onClick={onClick} className={`button ${className}`}>
+      {label}
+    </button>
+  );
+};
+
+export default Button;

lesson_27/JBey/src/components/header/Header.tsx

@@ -1,6 +1,7 @@
 import './Header.scss';
 import logoImg from '@/assets/logo.png';
 import * as React from 'react';
+import {Link} from 'react-router-dom';
 
 export const Header: React.FC = () => {
   return (
@@ -12,14 +13,17 @@ export const Header: React.FC = () => {
       </div>
       <ul className="header-top-menu">
         <li>
-          <a href="#">Home</a>
+          <a href="/">Home</a>
         </li>
         <li>
           <a href="#">About</a>
         </li>
         <li>
           <a href="#">Contact</a>
         </li>
+        <li>
+          <Link to="/new-program">New Programs</Link>
+        </li>
       </ul>
       <div className="header-cta">
         <a className="sign-up-button" href="#">

lesson_27/JBey/src/main.tsx

@@ -1,6 +1,9 @@
 import App from './App.tsx';
 import {Home} from './pages/Home/Home.tsx';
+import {NewFormAccepted} from './pages/NewForm/NewForm.tsx';
+import {NewProgram} from './pages/NewProgram/NewProgram.tsx';
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
+import React from 'react';
 import ReactDOM from 'react-dom/client';
 import {RouterProvider, createBrowserRouter} from 'react-router-dom';
 
@@ -17,6 +20,14 @@ const router = createBrowserRouter([
         path: '/',
         element: <Home />,
       },
+      {
+        path: '/new-program',
+        element: <NewProgram />,
+      },
+      {
+        path: `/form-accepted`,
+        element: <NewFormAccepted />,
+      },
     ],
   },
 ]);

lesson_27/JBey/src/pages/Home/components/ProgramList/ProgramList.scss

@@ -8,4 +8,4 @@
   .program {
     min-width: 100%;
   }
-}
+}

lesson_27/JBey/src/pages/Home/components/ProgramList/ProgramList.tsx

@@ -3,46 +3,42 @@ import {useEffect, useState} from 'react';
 
 import {Program} from '../Program';
 
-// Define the shape of my program data
-interface ProgramData {
+type ProgramData = {
   title: string;
   description: string;
-}
+};
 
 export const ProgramList: React.FC = () => {
   const [programs, setPrograms] = useState<ProgramData[]>([]);
-  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    // Replacing this with a real API call
-    fetch('/api/programs')
+    fetch('http://localhost:4000/programs')
       .then(response => {
-        if (!response.ok) {
-          throw new Error('Failed to fetch programs');
+        if (response.ok) {
+          return response.json();
+        } else {
+          return Promise.reject(new Error('Failed to load data'));
         }
-        return response.json();
       })
       .then(data => {
         setPrograms(data);
-        setLoading(false);
       })
       .catch(error => {
-        console.error('Error fetching program data:', error);
-        setLoading(false);
+        console.error("Couldn't load data", error);
       });
   }, []);
 
-  if (loading) {
-    return <p>Loading programs...</p>;
-  }
-
   return (
-    <ul className="programs">
-      {programs.map((program, index) => (
-        <Program key={index} title={program.title}>
-          <p>{program.description}</p>
-        </Program>
-      ))}
-    </ul>
+    <>
+      <ul className="programs">
+        {programs.map((program, index) => (
+          <li key={index} className="program">
+            <Program title={program.title}>
+              <p>{program.description}</p>
+            </Program>
+          </li>
+        ))}
+      </ul>
+    </>
   );
 };

lesson_27/JBey/src/pages/NewForm/NewForm.scss

@@ -0,0 +1,34 @@
+// NewForm.scss
+
+.container {
+  max-width: 800px;
+  margin: 40px auto;
+  padding: 20px;
+  background-color: #f9f9f9;
+  border: 1px solid #ddd;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.card {
+  padding: 20px;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+h2 {
+  font-size: 24px;
+  margin-bottom: 10px;
+}
+
+p {
+  font-size: 18px;
+  margin-bottom: 20px;
+}
+
+.button {
+  margin-top: 20px;
+}
+
+/* Add any other styles you want to customize */

lesson_27/JBey/src/pages/NewForm/NewForm.tsx

@@ -0,0 +1,18 @@
+import './NewForm.scss';
+import {Link} from 'react-router-dom';
+
+import Button from '@/components/Button/Button';
+
+export const NewFormAccepted = () => {
+  return (
+    <div className="container">
+      <div className="card">
+        <h2>Form Submitted!</h2>
+        <p>Your form submission has been sent successfully.</p>
+        <Link to="/">
+          <Button label="Back to Home" />
+        </Link>
+      </div>
+    </div>
+  );
+};

lesson_27/JBey/src/pages/NewProgram/NewProgram.scss

@@ -0,0 +1,62 @@
+.container {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 40px;
+  background-color: #f5f5f5;
+
+  .card {
+    background-color: white;
+    padding: 40px;
+    border-radius: 12px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+    width: 100%;
+    max-width: 600px;
+    flex-direction: column;
+
+    h1 {
+      color: rgb(68, 68, 68);
+      font-weight: 900;
+      font-size: 36px;
+      font-family: Montserrat, sans-serif;
+    }
+
+    .form {
+      width: 100%;
+      max-width: 600px;
+      margin: 0 auto;
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+
+      label {
+        display: flex;
+        flex-direction: column;
+        font-weight: 700;
+        font-family: Poppins, sans-serif;
+        font-size: 22px;
+        color: rgb(68, 68, 68);
+        text-align: left;
+      }
+
+      input,
+      textarea {
+        background-color: rgba(0, 0, 0, 0.04);
+        color: rgb(60, 60, 60);
+        padding: 12px 16px;
+        font-size: 14px;
+        border: none;
+        border-radius: 4px;
+        font-family: Poppins;
+        text-transform: uppercase;
+        margin-top: 8px;
+      }
+
+      textarea {
+        min-height: 120px;
+        resize: vertical;
+      }
+    }
+  }
+}

lesson_27/JBey/src/pages/NewProgram/NewProgram.tsx

@@ -0,0 +1,68 @@
+import './NewProgram.scss';
+import {useState} from 'react';
+import {useNavigate} from 'react-router-dom';
+
+import Button from '@/components/Button/Button';
+
+export const NewProgram = () => {
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    console.log('Submitting form...');
+    const newProgram = {title, description};
+
+    try {
+      const response = await fetch('http://localhost:4000/programs', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(newProgram),
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to add program');
+      }
+
+      console.log('Submitted:', {title, description});
+      setTitle('');
+      setDescription('');
+      navigate('/form-accepted');
+    } catch (error) {
+      console.error('Error adding program:', error);
+    }
+  };
+
+  return (
+    <div className="container">
+      <div className="card">
+        <h1>Add a new program:</h1>
+        <form onSubmit={handleSubmit} className="form">
+          <label>
+            Title:
+            <input
+              id="title"
+              type="text"
+              value={title}
+              onChange={e => setTitle(e.target.value)}
+              required
+            />
+          </label>
+          <label>
+            Description:
+            <textarea
+              id="content"
+              value={description}
+              onChange={e => setDescription(e.target.value)}
+              required
+            />
+          </label>
+          <Button label="Submit" type="submit" />
+        </form>
+      </div>
+    </div>
+  );
+};