Add activity code s55.

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/>
     </>
   );
 }

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">
+    <Card>
-        <h1>Sample Course</h1>
+      <Card.Body>
-        <p>Description:
+        <Card.Title>{name}</Card.Title>
-            <p>This is a sample course offering:</p>
+        <Card.Title>Description</Card.Title>
-        </p>
+        <Card.Text>{description}</Card.Text>
-        <p>Price:
+        <Card.Title>Price:</Card.Title>
-            <p>PhP 40,000</p>
+        <Card.Text>Php {price}</Card.Text>
-        </p>
+        <Card.Text>Enrollees: {count}</Card.Text>
-      <Button>Enroll</Button>
+        <Button variant="primary" onClick={enroll}>
-    </Container>
+          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
+};

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;

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}
+        </>
+    )
+}