Merge pull request #526 from zeeguu/ui-for-multiple-classes

UI for Multiple Classrooms

src/api/student.js

@@ -18,6 +18,10 @@ Zeeguu_API.prototype.joinCohort = function (inv_code, onSuccess, onError) {
   this._post("join_cohort", qs.stringify(payload), onSuccess, onError);
 };
 
+Zeeguu_API.prototype.leaveCohort = function (cohortID, callback) {
+  this._getPlainText(`leave_cohort/${cohortID}`, callback);
+};
+
 /*
   Gets info about this student, including the cohort he is in.
   Endpoint implementation:  https://github.com/zeeguu/api/blob/master/zeeguu/api/api/student.py

src/api/teacher.js

@@ -48,7 +48,7 @@ Zeeguu_API.prototype.addColleagueToCohort = function (
   cohortID,
   colleagueEmail,
   onSuccess,
-  onError
+  onError,
 ) {
   let payload = {
     cohort_id: cohortID,
@@ -58,7 +58,7 @@ Zeeguu_API.prototype.addColleagueToCohort = function (
     `/add_colleague_to_cohort`,
     queryString.stringify(payload),
     onSuccess,
-    onError
+    onError,
   );
 };
 
@@ -101,7 +101,7 @@ Zeeguu_API.prototype.addArticleToCohort = function (
   articleID,
   cohortID,
   onSuccess,
-  onError
+  onError,
 ) {
   let payload = {
     article_id: articleID,
@@ -111,7 +111,7 @@ Zeeguu_API.prototype.addArticleToCohort = function (
     `add_article_to_cohort`,
     queryString.stringify(payload),
     onSuccess,
-    onError
+    onError,
   );
 };
 /*
@@ -129,7 +129,7 @@ Zeeguu_API.prototype.deleteArticleFromCohort = function (
   articleID,
   cohortID,
   onSuccess,
-  onError
+  onError,
 ) {
   let payload = {
     article_id: articleID,
@@ -139,7 +139,7 @@ Zeeguu_API.prototype.deleteArticleFromCohort = function (
     `delete_article_from_cohort`,
     queryString.stringify(payload),
     onSuccess,
-    onError
+    onError,
   );
 };
 
@@ -164,6 +164,13 @@ Zeeguu_API.prototype.parseArticleFromUrl = function (url, callback, onError) {
   this._post(`parse_url`, `url=${url}`, callback, onError, true);
 };
 
-Zeeguu_API.prototype.removeStudentFromCohort = function (studentID, callback) {
-  this._getPlainText(`remove_user_from_cohort/${studentID}`, callback);
+Zeeguu_API.prototype.removeStudentFromCohort = function (
+  studentID,
+  cohortID,
+  callback,
+) {
+  this._getPlainText(
+    `remove_user_from_cohort/${studentID}/${cohortID}`,
+    callback,
+  );
 };

src/articles/ClassroomArticles.js

@@ -15,9 +15,9 @@ export default function ClassroomArticles({ api }) {
   let originalList = articleList;
 
   useEffect(() => {
-    api.getStudent((student) =>
-      setStudentJoinedCohort(student.cohort_id !== null),
-    ); // eslint-disable-next-line
+    api.getStudent((student) => {
+      setStudentJoinedCohort(student.cohorts.length > 0);
+    }); // eslint-disable-next-line
   }, []);
 
   if (articleList == null) {

src/pages/_pages_shared/FullWidthErrorMsg.sc.js → src/components/FullWidthErrorMsg.sc.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { zeeguuRedTransparent, zeeguuDarkRed } from "../../components/colors";
+import { zeeguuRedTransparent, zeeguuDarkRed } from "./colors";
 
 const FullWidthErrorMsg = styled.div`
   box-sizing: border-box;

src/components/FullWidthListContainer.sc.js

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+const FullWidthListContainer = styled.ul`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+`;
+
+export { FullWidthListContainer };

src/components/FullWidthListItem.js

@@ -0,0 +1,19 @@
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import * as s from "./FullWidthListItem.sc";
+
+export default function FullWidthListItem({
+  children,
+  hasDeleteButton,
+  onButtonClick,
+}) {
+  return (
+    <s.FullWidthListItem>
+      <s.TextContent>{children}</s.TextContent>
+      {hasDeleteButton && (
+        <s.ListButton type="button" onClick={onButtonClick}>
+          <CloseRoundedIcon fontSize="small" sx={{ color: "#808080" }} />
+        </s.ListButton>
+      )}
+    </s.FullWidthListItem>
+  );
+}

src/components/FullWidthListItem.sc.js

@@ -0,0 +1,57 @@
+import styled from "styled-components";
+import { veryDarkGrey } from "./colors";
+
+const FullWidthListItem = styled.li`
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  flex-direction: row;
+  padding: 0.75rem 1rem;
+  border-radius: 0.3rem;
+  color: ${veryDarkGrey};
+  background-color: #f6f6f6;
+  font-weight: 600;
+  margin: 0;
+  flex: 1;
+  overflow-x: break-word;
+
+  opacity: 0;
+  animation: fadeIn 0.15s ease-in forwards 0.15s;
+
+  @keyframes fadeIn {
+    to {
+      opacity: 1;
+    }
+  }
+`;
+
+const TextContent = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  overflow-x: hidden;
+  font-size: 1rem;
+
+  @media (max-width: 576px) {
+    font-size: 0.87rem;
+  }
+`;
+
+const ListButton = styled.button`
+  display: flex;
+  border: inherit;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  border-radius: 0.15rem;
+  background-color: inherit;
+
+  &:hover {
+    background-color: #f6f6f6;
+  }
+`;
+
+export { FullWidthListItem, ListButton, TextContent };

src/components/modal_shared/GoToButton.sc.js

@@ -2,10 +2,7 @@ import { zeeguuDarkOrange } from "../colors";
 import { OrangeRoundButton } from "../allButtons.sc";
 import styled from "styled-components";
 
-//redesigned button for a better focal point and improved
-//readability of the text inside it.
-//TODO: After implementing all the onboarding steps,
-//create style quide for all buttons and refactor / factor them out
+// TODO: Merge with Save button from Preferences
 const GoToButton = styled(OrangeRoundButton)`
   display: flex;
   flex-direction: row;
@@ -15,7 +12,17 @@ const GoToButton = styled(OrangeRoundButton)`
   padding: 0.7em 2em;
   border-radius: 4em;
   font-weight: 600;
-  border-bottom: solid 0.2em ${zeeguuDarkOrange};
+  box-shadow: 0 0.2em ${zeeguuDarkOrange};
+  transition: all ease-in 0.08s;
+  overflow: hidden;
+  white-space: nowrap;
+  margin-bottom: 0.2em;
+
+  &:active {
+    box-shadow: none;
+    transform: translateY(0.2em);
+    transition: all ease-in 0.08s;
+  }
 `;
 
 export { GoToButton };

src/i18n/definitions.js

@@ -45,7 +45,7 @@ let strings = new LocalizedStrings(
       addTexts: "Add Texts",
       delete: "Delete",
       cancel: "Cancel",
-      joinClass: "Join Class",
+      joinClass: "Join Classroom",
       youHaveNotJoinedAClass: "You haven't joined a class yet.",
       titleLearnedWords: "Learned Words",
       tooEasy: "too easy",
@@ -506,21 +506,22 @@ let strings = new LocalizedStrings(
 
       //Settings
       //Settings categories
-      myAccount: "My account",
+      myAccount: "My Account",
       exercises: "Exercises",
       accountManagement: "Account Management",
 
       //Settings main page nav options
       profileDetails: "Profile Details",
       languageSettings: "Language Settings",
-      myCurrentClass: "My Current Class",
+      myClassrooms: "My Classrooms",
       exerciseTypePreferences: "Exercise Type Preferences",
       interests: "Interests",
       deleteAccount: "Delete Account",
 
       nativeLanguage: "Native Language",
       yourCurrentClassIs: "Your current class is: ",
       changeClass: "Change Class",
+      addClass: "Add Class",
       insertNewInviteCode: "Insert new invite code",
       insertInviteCode: "Insert invite code",
       checkIfInviteCodeIsValid:
@@ -621,7 +622,7 @@ let strings = new LocalizedStrings(
       addColleague: "Add Colleague",
 
       //CohortList
-      addClass: "Add Class",
+      addClass: "Add Classroom",
 
       //DeleteCohortWarning
       dangerzone: "Danger Zone!",

src/pages/ResetPasswordStep1.js

@@ -5,7 +5,7 @@ import strings from "../i18n/definitions";
 
 import Form from "./_pages_shared/Form";
 import FormSection from "./_pages_shared/FormSection";
-import FullWidthErrorMsg from "./_pages_shared/FullWidthErrorMsg";
+import FullWidthErrorMsg from "../components/FullWidthErrorMsg";
 import InputField from "../components/InputField";
 import ButtonContainer from "./_pages_shared/ButtonContainer";
 import Button from "./_pages_shared/Button";

src/pages/ResetPasswordStep2.js

@@ -6,7 +6,7 @@ import useFormField from "../hooks/useFormField";
 
 import Form from "./_pages_shared/Form";
 import FormSection from "./_pages_shared/FormSection";
-import FullWidthErrorMsg from "./_pages_shared/FullWidthErrorMsg";
+import FullWidthErrorMsg from "../components/FullWidthErrorMsg";
 import InputField from "../components/InputField";
 import ButtonContainer from "./_pages_shared/ButtonContainer";
 import Button from "./_pages_shared/Button";