pages

src/components/pages/AboutPage.js

@@ -0,0 +1,10 @@
+import React from "react";
+
+class AboutPage extends React.Component{
+    render(){
+        return <><h2>About</h2>
+        <p>This app uses React.</p></>
+    }
+}
+
+export default AboutPage;

src/components/pages/CoursesPage.js

@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from "react";
+import courseStore from "../../stores/courseStore";
+import CourseList from "../collections/CourseList";
+import { Link } from "react-router-dom";
+import { loadCourses, deleteCourse } from "../../actions/courseActions";
+
+function CoursesPage() {
+  const [courses, setCourses] = useState(courseStore.getCourses());
+
+  useEffect(() => {
+    courseStore.addChangeListener(onChange);
+    if (courses.length === 0) loadCourses();
+    return () => courseStore.removeChangeListener(onChange); // cleanup on unmount
+  }, [courses.length]);
+
+  function onChange() {
+    setCourses(courseStore.getCourses());
+  }
+
+  return (
+    <>
+      <h2>Courses</h2>
+      <Link className="btn btn-primary" to="/course">
+        Add Course
+      </Link>
+      <CourseList courses={courses} deleteCourse={deleteCourse} />
+    </>
+  );
+}
+
+export default CoursesPage;

src/components/pages/HomePage.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+function HomePage(){
+    return (
+        <div className="jumbotron">
+        <h1>Pluralsight Administration</h1>
+        <a href="/about">About</a>
+        <p>React</p>
+        <Link to="about" className="btn btn-primary">
+            About
+        </Link>
+    </div>
+    );
+}
+
+export default HomePage;

src/components/pages/ManageCoursePage.js

@@ -0,0 +1,74 @@
+import React, { useState, useEffect } from "react";
+import CourseForm from "../forms/CourseForm";
+import courseStore from "../../stores/courseStore";
+import { toast } from "react-toastify";
+import * as courseActions from "../../actions/courseActions";
+
+const ManageCoursePage = (props) => {
+  const [errors, setErrors] = useState({});
+  const [courses, setCourses] = useState(courseStore.getCourses());
+  const [course, setCourse] = useState({
+    id: null,
+    slug: "",
+    title: "",
+    authorId: null,
+    category: "",
+  });
+
+  useEffect(() => {
+    courseStore.addChangeListener(onChange);
+    const slug = props.match.params.slug; // from the path `/courses/:slug`
+    if (courses.length === 0) {
+      courseActions.loadCourses();
+    } else if (slug) {
+      setCourse(courseStore.getCourseBySlug(slug));
+    }
+    return () => courseStore.removeChangeListener(onChange);
+  }, [courses.length, props.match.params.slug]);
+
+  function onChange() {
+    setCourses(courseStore.getCourses());
+  }
+
+  function handleChange({ target }) {
+    setCourse({
+      ...course,
+      [target.name]: target.value,
+    });
+  }
+
+  function formIsValid() {
+    const _errors = {};
+
+    if (!course.title) _errors.title = "Title is required";
+    if (!course.authorId) _errors.authorId = "Author ID is required";
+    if (!course.category) _errors.category = "Category is required";
+
+    setErrors(_errors);
+    // Form is valid if the errors object has no properties
+    return Object.keys(_errors).length === 0;
+  }
+
+  function handleSubmit(event) {
+    event.preventDefault();
+    if (!formIsValid()) return;
+    courseActions.saveCourse(course).then(() => {
+      props.history.push("/courses");
+      toast.success("Course saved.");
+    });
+  }
+
+  return (
+    <>
+      <h2>Manage Course</h2>
+      <CourseForm
+        errors={errors}
+        course={course}
+        onChange={handleChange}
+        onSubmit={handleSubmit}
+      />
+    </>
+  );
+};
+
+export default ManageCoursePage;

src/components/pages/NotFoundPage.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+function NotFoundPage(){
+    return(
+        <div>
+            <h2>Page Not Found</h2>
+            <p>
+                <Link to="/">Back to home</Link>
+            </p>
+        </div>
+    );
+}
+
+export default NotFoundPage;