From d4d2ded45c2ddcbbc2cfeb192625d172f738f694 Mon Sep 17 00:00:00 2001
From: snaked2018 <ronreciproco123@gmail.com>
Date: Wed, 22 Nov 2023 19:55:17 +0800
Subject: [PATCH] Add activity code s55.

---
 individual/fullstack/s54-s62/src/App.js       |  5 +-
 .../s54-s62/src/components/CourseCard.js      | 62 +++++++++++++++----
 .../fullstack/s54-s62/src/data/courseData.js  | 39 ++++++++++++
 .../fullstack/s54-s62/src/pages/Courses.js    | 21 +++++++
 4 files changed, 112 insertions(+), 15 deletions(-)
 create mode 100644 individual/fullstack/s54-s62/src/data/courseData.js
 create mode 100644 individual/fullstack/s54-s62/src/pages/Courses.js

diff --git a/individual/fullstack/s54-s62/src/App.js b/individual/fullstack/s54-s62/src/App.js
index 9835c36..6c8470c 100644
--- a/individual/fullstack/s54-s62/src/App.js
+++ b/individual/fullstack/s54-s62/src/App.js
@@ -4,7 +4,7 @@ import "./App.css";
 
 // Pages
 import Home from "./pages/Home";
-import CourseCard from "./components/CourseCard";
+import Courses from "./pages/Courses";
 
 function App() {
   return (
@@ -15,9 +15,8 @@ function App() {
       <AppNavBar />
       <Container>
         <Home />
+        <Courses />
       </Container>
-
-      <CourseCard/>
     </>
   );
 }
diff --git a/individual/fullstack/s54-s62/src/components/CourseCard.js b/individual/fullstack/s54-s62/src/components/CourseCard.js
index 4a13e98..e7a1ca3 100644
--- a/individual/fullstack/s54-s62/src/components/CourseCard.js
+++ b/individual/fullstack/s54-s62/src/components/CourseCard.js
@@ -1,16 +1,54 @@
-import { Button, Container } from "react-bootstrap";
+import { Button, Card } from "react-bootstrap";
+import PropTypes from 'prop-types';
+import { useState } from 'react'
+
+export default function CourseCard({ courseProp }) {
+  
+  const { name, description, price } = courseProp;
+
+  // Use the state hook to be able to store state (data) in this component
+  // States are used to keep track of information related to individual component
+  // Syntax:
+  /**
+   * const [ getter, setterFunction ] = useState(initialGetterValue)
+   */
+
+  const [ count, setCount ] = useState(30);
+  const enroll = () => {
+    if (count > 0) {
+      setCount(count - 1);
+    } else {
+      alert('No More Seats');
+    }
+  };
+
+
 
-export default function CourseCard() {
   return (
-    <Container className="courseComponent1">
-        <h1>Sample Course</h1>
-        <p>Description:
-            <p>This is a sample course offering:</p>
-        </p>
-        <p>Price:
-            <p>PhP 40,000</p>
-        </p>
-      <Button>Enroll</Button>
-    </Container>
+    <Card>
+      <Card.Body>
+        <Card.Title>{name}</Card.Title>
+        <Card.Title>Description</Card.Title>
+        <Card.Text>{description}</Card.Text>
+        <Card.Title>Price:</Card.Title>
+        <Card.Text>Php {price}</Card.Text>
+        <Card.Text>Enrollees: {count}</Card.Text>
+        <Button variant="primary" onClick={enroll}>
+          Enroll
+        </Button>
+        </Card.Body>
+    </Card>
   );
 }
+
+// Check if the CourseCard component is getting the correct prop types
+// PropTypes are used for validating information passed to a component.
+CourseCard.propTypes = {
+  // The 'shape' method is used to check if a prop object conforms to a specific "shape"
+  courseProp: PropTypes.shape({
+    // Define the properties and their expected types
+    name: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+    price: PropTypes.number.isRequired
+  }).isRequired // Make sure the entire courseProp object is required
+};
diff --git a/individual/fullstack/s54-s62/src/data/courseData.js b/individual/fullstack/s54-s62/src/data/courseData.js
new file mode 100644
index 0000000..9539178
--- /dev/null
+++ b/individual/fullstack/s54-s62/src/data/courseData.js
@@ -0,0 +1,39 @@
+const coursesData = [
+    {
+        id: "wdc001",
+        name: "PHP - Laravel",
+        description: "Nostrud velit dolor excepteur ullamco consectetur aliquip tempor. Consectetur occaecat laborum exercitation sint reprehenderit irure nulla mollit. Do dolore sint deserunt quis ut sunt ad nulla est consectetur culpa. Est esse dolore nisi consequat nostrud id nostrud sint sint deserunt dolore.",
+        price: 45000,
+        onOffer: true
+    },
+    {
+        id: "wdc002",
+        name: "Python - Django",
+        description: "Eu non commodo et eu ex incididunt minim aliquip anim. Aliquip voluptate ut velit fugiat laborum. Laborum dolore anim pariatur pariatur commodo minim ut officia mollit ad ipsum ex. Laborum veniam cupidatat veniam minim occaecat veniam deserunt nulla irure. Enim elit sint magna incididunt occaecat in dolor amet dolore consectetur ad mollit. Exercitation sunt occaecat labore irure proident consectetur commodo ad anim ea tempor irure.",
+        price: 50000,
+        onOffer: true
+    },
+    {
+        id: "wdc003",
+        name: "Java - Springboot",
+        description: "Proident est adipisicing est deserunt cillum dolore. Fugiat incididunt quis aliquip ut aliquip est mollit officia dolor ea cupidatat velit. Consectetur aute velit aute ipsum quis. Eiusmod dolor exercitation dolor mollit duis velit aliquip dolor proident ex exercitation labore cupidatat. Eu aliquip mollit labore do.",
+        price: 55000,
+        onOffer: true
+    },
+    {
+        id: "wdc003",
+        name: "Java - React",
+        description: "Proident est adipisicing est deserunt cillum dolore. Fugiat incididunt quis aliquip ut aliquip est mollit officia dolor ea cupidatat velit. Consectetur aute velit aute ipsum quis. Eiusmod dolor exercitation dolor mollit duis velit aliquip dolor proident ex exercitation labore cupidatat. Eu aliquip mollit labore do.",
+        price: 55000,
+        onOffer: true
+    },
+    {
+        id: "wdc003",
+        name: "Java - Express",
+        description: "Proident est adipisicing est deserunt cillum dolore. Fugiat incididunt quis aliquip ut aliquip est mollit officia dolor ea cupidatat velit. Consectetur aute velit aute ipsum quis. Eiusmod dolor exercitation dolor mollit duis velit aliquip dolor proident ex exercitation labore cupidatat. Eu aliquip mollit labore do.",
+        price: 55000,
+        onOffer: true
+    }
+]
+
+export default coursesData;
\ No newline at end of file
diff --git a/individual/fullstack/s54-s62/src/pages/Courses.js b/individual/fullstack/s54-s62/src/pages/Courses.js
new file mode 100644
index 0000000..fa54640
--- /dev/null
+++ b/individual/fullstack/s54-s62/src/pages/Courses.js
@@ -0,0 +1,21 @@
+
+import CourseCard from "../components/CourseCard"
+import coursesData from "../data/courseData"
+export default function Courses() {
+   
+    console.log(coursesData);
+    console.log(coursesData[0]);
+
+    const courses = coursesData.map(course => {
+        return (
+            <CourseCard courseProp={course} />
+        )
+    })
+
+    // Component Body
+    return (
+        <>
+            {courses}
+        </>
+    )
+}
\ No newline at end of file