collections

src/components/collections/CourseList.js

@@ -0,0 +1,40 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Link } from 'react-router-dom';
+
+function CourseList(props){
+    return (
+        <table className="table">
+            <thead>
+                <tr>
+                    <th>Title</th>
+                    <th>Author ID</th>
+                    <th>Category</th>
+                </tr>
+            </thead>
+            <tbody>
+                { props.courses.map( course =>{
+                    return <tr key={course.id}>
+                        <td>
+                            <Link to={"/course/" + course.slug}>{course.title}</Link>
+                        </td>
+                        <td>{course.authorId}</td>
+                        <td>{course.category}</td>
+                    </tr>
+                })}
+            </tbody>
+        </table>
+    )
+}
+CourseList.propTypes = {
+    course: PropTypes.arrayOf(
+        PropTypes.shape({
+            id: PropTypes.number.isRequired,
+            title: PropTypes.string.isRequired,
+            authorId: PropTypes.number.isRequired,
+            category: PropTypes.string.isRequired
+        })
+    )
+};
+
+export default CourseList;

src/components/collections/UserList.js

@@ -0,0 +1,55 @@
+import React from "react";
+import PropTypes from "prop-types";
+import TableCellCheckbox from "../common/TableCellCheckbox";
+//import { Link } from "react-router-dom";
+
+function UserList(props) {
+  return (
+    <table className="table">
+      <thead>
+        <tr>
+          <th>First Name</th>
+          <th>Last Name</th>
+          <th>Username</th>
+          <th>Password</th>
+          <th>Email</th>
+          <th>Is Active</th>
+        </tr>
+      </thead>
+      <tbody>
+        {props.users.map((user) => {
+          return (
+            <tr key={user.id}>
+              <td>{user.firstname}</td>
+              <td>{user.lastname}</td>
+              <td>{user.username}</td>
+              <td>{user.password}</td>
+              <td>{user.email}</td>
+              <TableCellCheckbox
+                id={user.id}
+                name={user.firstname}
+                checked={user.isactive}
+                onChange={user.onChange}
+              />
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+}
+UserList.propTypes = {
+  user: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      firstname: PropTypes.string.isRequired,
+      lastname: PropTypes.string.isRequired,
+      username: PropTypes.string.isRequired,
+      password: PropTypes.string.isRequired,
+      email: PropTypes.string.isRequired,
+      isactive: PropTypes.bool.isRequired,
+    })
+  ),
+};
+
+export default UserList;