Merge pull request #6 from alecspringel/course-creation

Course creation

client/src/components/common/Button.js

@@ -1,9 +1,15 @@
 import React from "react";
 import styled, { css } from "styled-components";
 import PropTypes from "prop-types";
+import LoadingDots from "./animation/LoadingDots";
 
-const Button = ({ children, ...props }) => {
-  return <Btn {...props}>{children}</Btn>;
+const Button = ({ children, loading, onClick, ...props }) => {
+  const clickHandler = loading ? undefined : onClick;
+  return (
+    <Btn {...props} onClick={clickHandler}>
+      {loading ? <LoadingDots /> : children}
+    </Btn>
+  );
 };
 
 Button.propTypes = {
@@ -13,6 +19,8 @@ Button.propTypes = {
   secondary: PropTypes.bool,
   /* Makes the button width === 100% */
   autoWidth: PropTypes.bool,
+  /* Replaces the button label with a loading indicator and prevents onClick */
+  loading: PropTypes.bool,
 };
 
 export default Button;
@@ -22,8 +30,11 @@ const Btn = styled.button`
   border: none;
   border-radius: 4px;
   padding: 5px 12px;
-  font-size: 14px;
+  font-size: 16px;
   width: ${(props) => props.autoWidth && "100%"};
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
   // If secondary prop === true
   ${(props) =>
@@ -41,7 +52,7 @@ const Btn = styled.button`
     ${(props) =>
     props.primary &&
     css`
-      padding: 7px 12px;
+      padding: 9px 12px;
       border-radius: 3px;
       background-color: #4a86fa;
       color: #fff;

client/src/components/common/Errors.js

@@ -0,0 +1,27 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const Errors = ({ errors, margin }) => {
+  console.log(errors);
+  if (!errors || errors.length < 1) {
+    return null;
+  }
+  return (
+    <div style={{ marginTop: margin || 10 }}>
+      {errors.map((err, index) => (
+        <p className="alert-color" key={index}>
+          {err}
+        </p>
+      ))}
+    </div>
+  );
+};
+
+export default Errors;
+
+Errors.propTypes = {
+  /* Array of strings containing error messages */
+  errors: PropTypes.arrayOf(PropTypes.string),
+  /* Top margin for error div */
+  margin: PropTypes.number,
+};

client/src/components/common/Input.js

@@ -31,7 +31,7 @@ const StyledInput = styled.input`
   border: 1px solid #818181;
   background-color: #fff;
   border-radius: 4px;
-  font-size: 14px;
+  font-size: 16px;
   padding: 7px 9px;
   width: 100%;
 `;

client/src/components/common/InputLabel.js

@@ -8,7 +8,8 @@ const InputLabel = ({ children, margin }) => {
 
 export default InputLabel;
 
-const Label = styled.h5`
-  font-size: 14px;
+const Label = styled.h3`
+  font-size: 16px;
+  font-weight: 500;
   margin: ${(props) => props.margin || "13px 0 7px 0"};
 `;

client/src/components/common/Modal.js

@@ -42,7 +42,7 @@ const Content = styled.div`
   position: relative;
   background-color: #fff;
   margin: 15% auto;
-  padding: 20px;
+  padding: 35px 20px;
   border-radius: 4px;
   box-shadow: 3px 3px 9px #48484830;
   width: ${(props) => props.width || "520px"};

client/src/components/common/SearchBar.js

@@ -14,7 +14,7 @@ const SearchBar = ({ onChange, placeholder }) => {
 export default SearchBar;
 
 const SearchDiv = styled.div`
-  height: 26px;
+  height: 32px;
   align-items: center;
   border-radius: 3px;
   max-width: 360px;
@@ -36,6 +36,7 @@ const TextInput = styled.input`
   background-color: transparent;
   width: 100%;
   padding-left: 11px;
+  font-size: 16px;
 
   &:focus {
     outline: none;

client/src/components/common/Select.js

@@ -23,13 +23,13 @@ const customStyles = {
     ...provided,
     // none of react-select's styles are passed to <Control />
     border: "1px solid #818181",
-    fontSize: 14,
-    height: 33,
-    minHeight: 33,
+    fontSize: 16,
+    height: 35,
+    minHeight: 35,
   }),
   valueContainer: (provided) => ({
     ...provided,
-    height: 33,
+    height: 35,
     padding: "0 4px",
   }),
 
@@ -42,7 +42,7 @@ const customStyles = {
   }),
   indicatorsContainer: (provided, state) => ({
     ...provided,
-    height: "33px",
+    height: "35px",
     padding: "8px",
   }),
 };

client/src/components/common/animation/LoadingDots.js

@@ -0,0 +1,49 @@
+import React from "react";
+import styled from "styled-components";
+
+const LoadingDots = ({ size = 8, color }) => {
+  return (
+    <Wrapper color={color}>
+      <Dot size={size} delay={0} />
+      <Dot size={size} delay={100} />
+      <Dot size={size} delay={200} />
+    </Wrapper>
+  );
+};
+
+export default LoadingDots;
+
+const Wrapper = styled.div`
+  display: flex;
+
+  div {
+    background-color: ${(props) => props.color || "#fff"};
+  }
+`;
+
+const Dot = styled.div`
+  height: ${(props) => props.size + "px"};
+  width: ${(props) => props.size + "px"};
+  border-radius: ${(props) => props.size / 2 + "px"};
+  margin: ${(props) => props.size * 0.3 + "px"};
+
+  @keyframes inout {
+    from {
+      transform: scale(1);
+    }
+
+    50% {
+      transform: scale(1.35);
+    }
+
+    to {
+      transform: scale(1);
+    }
+  }
+
+  animation-name: inout;
+  animation-delay: ${(props) => props.delay + "ms"};
+  animation-iteration-count: infinite;
+  animation-direction: forward;
+  animation-duration: 850ms;
+`;

client/src/components/courses/CreateCourse.js

@@ -1,22 +1,16 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 import Button from "../common/Button";
-import Input from "../common/Input";
-import InputLabel from "../common/InputLabel";
 import Modal from "../common/Modal";
-import Select from "../common/Select";
-
-const INVITE_OPTIONS = [
-  {
-    label: "Share Link / Access Code",
-    value: "code",
-    description:
-      "Anyone with the link or access code can join. Share the link / code below with students.",
-  },
-];
+import CourseConfirmation from "./createCourse/CourseConfirmation";
+import CourseInfo from "./createCourse/CourseInfo";
 
 const CreateCourse = () => {
   const [modalIsShown, toggleModal] = useState(false);
+  // Course is set by the CourseInfo component when instructors create the course
+  // The info is used to share the course link/access code provided by the API
+  const [course, setCourse] = useState(null);
+
   return (
     <>
       <Button
@@ -36,37 +30,17 @@ const CreateCourse = () => {
           width="620px"
           data-testid="join-course-modal"
         >
-          <h4>CREATE A COURSE</h4>
-          <TopSection className="flex-row">
-            <LeftColumn className="flex-col flex-1">
-              <InputLabel>University Name</InputLabel>
-              <Select placeholder="Select your university" options={[]} />
-            </LeftColumn>
-            <RightColumn className="flex-col flex-1">
-              <InputLabel>Course Name</InputLabel>
-              <Input placeholder="ex, CIS 210" />
-            </RightColumn>
-          </TopSection>
-          <HighlightedSection className="flex-row">
-            <LeftColumn className="flex-col flex-1">
-              <InputLabel margin="0 0 7px">Student Access</InputLabel>
-              <Select
-                placeholder={INVITE_OPTIONS[0].label}
-                options={INVITE_OPTIONS}
-              />
-              <InputLabel>Invite Link</InputLabel>
-              <Input placeholder="https://superswag.com/Aji3KlmZ" />
-            </LeftColumn>
-            <RightColumn className="flex-col flex-1">
-              <InputLabel margin="0 0 7px">Description</InputLabel>
-              <p className="p-small">{INVITE_OPTIONS[0].description}</p>
-              <InputLabel>Access Code</InputLabel>
-              <Input placeholder="Aji3KlmZ" />
-            </RightColumn>
-          </HighlightedSection>
-          <Button primary autoWidth style={{ marginTop: 24 }}>
-            + Create Course
-          </Button>
+          {!course ? (
+            <CourseInfo setCourse={setCourse} />
+          ) : (
+            <CourseConfirmation
+              course={course}
+              close={() => {
+                toggleModal(false);
+                setCourse(null);
+              }}
+            />
+          )}
         </Modal>
       )}
     </>
@@ -75,20 +49,4 @@ const CreateCourse = () => {
 
 export default CreateCourse;
 
-const LeftColumn = styled.div`
-  margin-right: 5px;
-`;
-
-const RightColumn = styled.div`
-  margin-left: 5px;
-`;
-
-const TopSection = styled.div`
-  padding: 0 15px;
-`;
-
-const HighlightedSection = styled.div`
-  background-color: #f8f8f8;
-  margin-top: 15px;
-  padding: 15px;
-`;
+const AnimationSlider = styled.div``;

client/src/components/courses/JoinCourse.js

@@ -19,12 +19,12 @@ const JoinCourse = () => {
           width="420px"
           data-testid="join-course-modal"
         >
-          <h4>SEARCH FOR A COURSE</h4>
+          <h3>SEARCH FOR A COURSE</h3>
           <InputLabel>University</InputLabel>
           <Input placeholder="University Name" />
           <InputLabel>Course Name</InputLabel>
           <Input placeholder="ex, CIS 210" />
-          <h4 style={{ marginTop: 30 }}>OR JOIN BY ACCESS CODE</h4>
+          <h3 style={{ marginTop: 30 }}>OR JOIN BY ACCESS CODE</h3>
           <InputLabel>Access Code</InputLabel>
           <Input placeholder="ex, AcK21k" />
           <Button primary autoWidth style={{ marginTop: 24 }}>

client/src/components/courses/TopContent.js

@@ -15,6 +15,6 @@ const TopContent = () => {
 
 export default TopContent;
 
-const Title = styled.h4`
+const Title = styled.h3`
   margin-right: 15px;
 `;