appointment component added to main application.

src/components/Application.js

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 
 import "components/Application.scss";
 import DayList from "./DayList";
+import Appointment from "./Appointment/index";
 
 const days = [
   {
@@ -21,6 +22,57 @@ const days = [
   },
 ];
 
+const appointments = [
+  {
+    id: 1,
+    time: "12pm",
+  },
+  {
+    id: 2,
+    time: "1pm",
+    interview: {
+      student: "Lydia Miller-Jones",
+      interviewer: {
+        id: 1,
+        name: "Sylvia Palmer",
+        avatar: "https://i.imgur.com/LpaY82x.png",
+      }
+    }
+  },
+  {
+    id: 3,
+    time: "2pm",
+    interview: {
+      student: "Mild-Mannered Pate",
+      interviewer: {
+        id: 1,
+        name: "Sylvia Palmer",
+        avatar: "https://i.imgur.com/LpaY82x.png",
+      }
+    }
+  },
+  {
+    id: 4,
+    time: "3pm",
+  },
+  {
+    id: 5,
+    time: "4pm",
+    interview: {
+      student: "Creighton The Wanderer",
+      interviewer: {
+        id: 1,
+        name: "Sylvia Palmer",
+        avatar: "https://i.imgur.com/LpaY82x.png",
+      }
+    }
+  },
+  {
+    id: 6,
+    time: "5pm",
+  },
+];
+
 export default function Application(props) {
   const [day, setDay] = useState("");
 
@@ -47,7 +99,13 @@ export default function Application(props) {
         />
       </section>
       <section className="schedule">
-        {/* Replace this with the schedule elements durint the "The Scheduler" activity. */}
+        {appointments.map((appointment) => 
+          <Appointment
+            key={appointment.id}
+            id={appointment.id}
+            {...appointment}
+          />
+        )}
       </section>
     </main>
   );

src/components/Appointment/Form.js

@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+import Button from "components/Button";
+import InterviewerList from "components/InterviewerList";
+
+
+
+export default function Form(props) {
+
+  const [name, setName] = useState(props.name || "");
+  const valueChange = (event) => {
+    return setName(event.target.value);
+  }
+
+  const [interviewer, setInterviewer] = useState(props.interviewer || null);
+
+  const reset = (event) => {
+    setName("");
+    setInterviewer(null);
+  }
+  const cancel = (event) => {
+    reset();
+    props.onCancel()
+  }
+
+  return (
+    <main className="appointment__card appointment__card--create">
+      <section className="appointment__card-left">
+        <form autoComplete="off"
+          onSubmit={event => event.preventDefault()}>
+          <input
+            value={name}
+            className="appointment__create-input text--semi-bold"
+            name="name"
+            type="text"
+            placeholder="Enter Student Name"
+            onChange={valueChange}
+          />
+        </form>
+        <InterviewerList 
+          interviewers={props.interviewers} 
+          value={interviewer} 
+          onChange={setInterviewer} 
+        />
+      </section>
+      <section className="appointment__card-right">
+        <section className="appointment__actions">
+          <Button onClick={cancel} danger>Cancel</Button>
+          <Button onClick={props.onSave} confirm>Save</Button>
+        </section>
+      </section>
+    </main>
+  )
+}

src/components/Appointment/index.js

@@ -1,10 +1,19 @@
 import React from "react";
-
 import "components/Appointment/styles.scss";
+import Header from "components/Appointment/Header";
+import Show from "components/Appointment/Show";
+import Empty from "components/Appointment/Empty";
 
 export default function Appointment(props) {
 
   return (
-    <article className="appointment"></article>
+    <article className="appointment">
+      <Header time={props.time} />
+      {props.interview ? 
+        <Show 
+          student={props.interview.student} 
+          interviewer={props.interview.interviewer} 
+        /> : <Empty />}
+    </article>
   )
 }

src/components/InterviewerList.js

@@ -19,7 +19,7 @@ export default function InterviewerList(props) {
         key={interviewer.id}
         {...interviewer}
         selected={interviewer.id === props.interviewer}
-        setInterviewer={(event) => {props.setInterviewer(interviewer.id)}}
+        setInterviewer={event => props.setInterviewer(interviewer.id)}
       />
     )
   })

src/components/InterviewerListItem.js

@@ -6,9 +6,7 @@ import classNames from "classnames";
 export default function InterviewerListItem(props) {
   let interviewerClass = classNames(
     'interviewers__item',
-    {
-      'interviewers__item--selected': props.selected
-    }
+    {'interviewers__item--selected': props.selected}
   );
 
 

stories/index.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Fragment } from "react";
 
 import { storiesOf } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
@@ -18,6 +18,7 @@ import Show from "components/Appointment/Show";
 import Confirm from "components/Appointment/Confirm";
 import Status from "components/Appointment/Status";
 import Error from "components/Appointment/Error";
+import Form from "components/Appointment/Form";
 
 
 //--------Button Component--------
@@ -110,7 +111,7 @@ storiesOf("InterviewerListItem", module)
       id={interviewer.id}
       name={interviewer.name}
       avatar={interviewer.avatar}
-      setInterviewer={(event) => {action("setInterviewer")(interviewer.id)}}
+      setInterviewer={event => action("setInterviewer")(interviewer.id)}
     />
   ));
 
@@ -148,6 +149,22 @@ storiesOf("Appointment", module)
   })
   .add("Appointment", () => <Appointment />)
   .add("Appointment with Time", () => <Appointment time="12pm" />)
+  .add("Appointment Empty", () => (
+    <Fragment>
+      <Appointment id={1} time="12pm" />
+      <Appointment id="last" time="1pm" />
+    </Fragment>
+  ))
+  .add("Appointment Booked", () => (
+    <Fragment>
+      <Appointment
+        id={1}
+        time="12pm"
+        interview={{ student: "Student", interviewer: {name: "Sylvia Palmer"}}}
+      />
+      <Appointment id="last" time="1pm" />
+    </Fragment>
+  ))
   .add("Header", () => <Header time="12pm" />)
   .add("Empty", () => <Empty onAdd={action("onAdd")} />)
   .add("Show", () => (
@@ -171,4 +188,20 @@ storiesOf("Appointment", module)
       message="Could not delete appointment."
       onClose={action("onClose")}
     />
+  ))
+  .add("Form Edit", () => (
+    <Form
+      name="A name"
+      interviewers={interviewers}
+      interviewer={2}
+      onSave={action("onSave")}
+      onCancel={action("onCancel")}
+    />
+  ))
+  .add("Form Create", () => (
+    <Form
+      interviewers={interviewers}
+      onSave={action("onSave")}
+      onCancel={action("onCancel")}
+    />
   ))