adding and getting favorites

src/components/viewAllPage/MobileCategory.tsx

@@ -23,7 +23,7 @@ import { getAssignmentIcon } from "components/services/brickService";
 
 import SpriteIcon from "components/baseComponents/SpriteIcon";
 import { getBrickColor } from "services/brick";
-import { getPublicBricks, getPublishedBricks } from "services/axios/brick";
+import { getFavorites, getPublicBricks, getPublishedBricks } from "services/axios/brick";
 import PhoneTopBrick16x9 from "components/baseComponents/PhoneTopBrick16x9";
 import { getSubjects } from "services/axios/subject";
 import map from "components/map";
@@ -40,6 +40,7 @@ const MobileTheme = React.lazy(() => import("./themes/ViewAllPageMobileTheme"));
 enum Tab {
   MySubjects,
   AllSubjects,
+  Favorites,
   SubjectCategory,
 }
 
@@ -74,10 +75,12 @@ interface BricksListState {
   isViewAll: boolean;
   mySubjects: SubjectWithBricks[];
   subjects: SubjectWithBricks[];
+  favoriteSubjects: SubjectWithBricks[];
   categorySubjects: SubjectWithBricks[];
   shown: boolean;
   activeTab: Tab;
   isLoading: boolean;
+  favorites: Brick[];
   subjectGroup: SubjectGroup | null;
   expandedSubject: SubjectWithBricks | null;
   filterLevels: AcademicLevel[];
@@ -119,7 +122,9 @@ class MobileCategoryPage extends Component<BricksListProps, BricksListState> {
       isViewAll,
       isCore: true,
       mySubjects: [],
+      favoriteSubjects: [],
       subjects: [],
+      favorites: [],
       categorySubjects: [],
       filterLevels: [],
       activeTab: initTab,
@@ -152,7 +157,21 @@ class MobileCategoryPage extends Component<BricksListProps, BricksListState> {
       const mySubjects: SubjectWithBricks[] = [];
       const categorySubjects: SubjectWithBricks[] = [];
 
+      let favorites = [];
+      let favoriteSubjects = [];
+
       if (this.props.user) {
+        favorites = await getFavorites();
+
+        for (let favorite of favorites) {
+          let found = favoriteSubjects.find(s => s.id === favorite.subject.id);
+          if (found) {
+            found.bricks.push(favorite);
+          } else {
+            favoriteSubjects.push({ ...favorite.subject, bricks: [favorite] });
+          }
+        }
+
         for (let ss of this.props.user.subjects) {
           mySubjects.push({ ...ss, bricks: [] });
         }
@@ -185,6 +204,8 @@ class MobileCategoryPage extends Component<BricksListProps, BricksListState> {
         mySubjects: mySubjects.sort((a, b) => b.bricks.length - a.bricks.length),
         categorySubjects: categorySubjects.sort((a, b) => b.bricks.length - a.bricks.length),
         shown: true,
+        favorites,
+        favoriteSubjects,
         isLoading: false,
       });
     } else {
@@ -222,13 +243,19 @@ class MobileCategoryPage extends Component<BricksListProps, BricksListState> {
 
   setMySubjectsTab() {
     if (this.state.activeTab !== Tab.MySubjects) {
-      this.setState({ activeTab: Tab.MySubjects });
+      this.setState({ activeTab: Tab.MySubjects, expandedBrick: null });
     }
   }
 
   setAllSubjectsTab() {
     if (this.state.activeTab !== Tab.AllSubjects) {
-      this.setState({ activeTab: Tab.AllSubjects });
+      this.setState({ activeTab: Tab.AllSubjects, expandedBrick: null });
+    }
+  }
+
+  setFavoritesTab() {
+    if (this.state.activeTab !== Tab.Favorites) {
+      this.setState({ activeTab: Tab.Favorites, expandedBrick: null });
     }
   }
 
@@ -264,9 +291,9 @@ class MobileCategoryPage extends Component<BricksListProps, BricksListState> {
   hideSubject() {
     this.setState({ expandedSubject: null });
   }
-  
+
   toggleCore() {
-    const {mySubjects, subjects } = this.state;
+    const { mySubjects, subjects } = this.state;
     const newCore = !this.state.isCore;
     this.clearBricks(mySubjects);
     this.clearBricks(subjects);
@@ -276,7 +303,23 @@ class MobileCategoryPage extends Component<BricksListProps, BricksListState> {
       this.addBrickBySubject(mySubjects, brick, newCore);
     }
 
-    this.setState({isCore: newCore});
+    this.setState({ isCore: newCore });
+  }
+
+  async reloadFavorites() {
+    if (this.props.user) {
+      const favorites = await getFavorites();
+      const favoriteSubjects = [];
+
+      for (let favorite of favorites) {
+        let found = favoriteSubjects.find(s => s.id === favorite.subject.id);
+        if (found) {
+          found.bricks.push(favorite);
+        } else {
+          favoriteSubjects.push({ ...favorite.subject, bricks: [favorite] });
+        }
+      }
+    }
   }
 
   renderMobileBricks() {
@@ -468,12 +511,61 @@ class MobileCategoryPage extends Component<BricksListProps, BricksListState> {
 
     if (this.state.activeTab === Tab.AllSubjects) {
       subjects = this.state.subjects;
+    } else if (this.state.activeTab === Tab.Favorites) {
+      subjects = this.state.favoriteSubjects;
     }
 
     if (!this.props.user) {
       subjects = this.state.categorySubjects;
     }
 
+    const renderAuthorizedTabs = () => {
+      return (
+        <div className="ss-tabs-scroll">
+          <div className="ss-tabs-container">
+            <div
+              className={`ss-tab-1 ${this.state.activeTab === Tab.MySubjects ? "active" : ""
+                }`}
+              onClick={this.setMySubjectsTab.bind(this)}
+            >
+              <SpriteIcon name="user-custom" />
+              My Subjects
+            </div>
+            <div
+              className={`ss-tab-2 ${this.state.activeTab === Tab.AllSubjects ? "active" : ""
+                }`}
+              onClick={this.setAllSubjectsTab.bind(this)}
+            >
+              All Subjects
+            </div>
+            <div
+              className={`ss-tab-3 ${this.state.activeTab === Tab.Favorites ? "active" : ""
+                }`}
+              onClick={this.setFavoritesTab.bind(this)}
+            >
+              Saved Bricks
+            </div>
+          </div>
+        </div>
+      )
+    }
+
+    const renderAnauthorizedTabs = () => {
+      return (
+        <div className="ss-tabs-container">
+          <div className="ss-tab-1 full active">
+            <SpriteIcon
+              name="arrow-left"
+              onClick={() => this.props.history.push(map.SubjectCategories)}
+            />
+            {this.state.subjectGroup
+              ? SubjectGroupNames[this.state.subjectGroup]
+              : "Subject Category"}
+          </div>
+        </div>
+      );
+    }
+
     return (
       <React.Suspense fallback={<></>}>
         <MobileTheme />
@@ -490,37 +582,7 @@ class MobileCategoryPage extends Component<BricksListProps, BricksListState> {
           <div className="mobile-scroll-bricks phone-top-bricks16x9">
             {this.renderMobileBricks()}
           </div>
-          {this.props.user ? (
-            <div className="ss-tabs-container">
-              <div
-                className={`ss-tab-1 ${this.state.activeTab === Tab.MySubjects ? "active" : ""
-                  }`}
-                onClick={this.setMySubjectsTab.bind(this)}
-              >
-                <SpriteIcon name="user-custom" />
-                My Subjects
-              </div>
-              <div
-                className={`ss-tab-2 ${this.state.activeTab === Tab.AllSubjects ? "active" : ""
-                  }`}
-                onClick={this.setAllSubjectsTab.bind(this)}
-              >
-                All Subjects
-              </div>
-            </div>
-          ) : (
-            <div className="ss-tabs-container">
-              <div className="ss-tab-1 full active">
-                <SpriteIcon
-                  name="arrow-left"
-                  onClick={() => this.props.history.push(map.SubjectCategories)}
-                />
-                {this.state.subjectGroup
-                  ? SubjectGroupNames[this.state.subjectGroup]
-                  : "Subject Category"}
-              </div>
-            </div>
-          )}
+          {this.props.user ? renderAuthorizedTabs() : renderAnauthorizedTabs()}
           <div className="va-level-container">
             {this.renderAcademicLevel(AcademicLevel.First)}
             {this.renderAcademicLevel(AcademicLevel.Second)}
@@ -546,6 +608,7 @@ class MobileCategoryPage extends Component<BricksListProps, BricksListState> {
                 brick={this.state.expandedBrick}
                 history={this.props.history}
                 user={this.props.user}
+                favoriteSaved={() => this.reloadFavorites()}
                 hide={() => this.setState({ expandedBrick: null })}
               />
             )}

src/components/viewAllPage/components/PhoneExpandedBrick.tsx

@@ -8,15 +8,17 @@ import { stripHtml } from "components/build/questionService/ConvertService";
 import { User } from "model/user";
 import map from "components/map";
 import { getAttempts } from "services/axios/attempt";
+import { saveFavorite } from "services/axios/brick";
 
 interface BrickBlockProps {
   brick: Brick;
   user?: User;
   history: any;
   hide(): void;
+  favoriteSaved?(): void;
 }
 
-const PhoneExpandedBrick: React.FC<BrickBlockProps> = ({ brick, history, user }) => {
+const PhoneExpandedBrick: React.FC<BrickBlockProps> = ({ brick, history, user, favoriteSaved }) => {
   const [bestScore, setBestScore] = React.useState(-1);
 
   const getBestScore = async () => {
@@ -42,6 +44,11 @@ const PhoneExpandedBrick: React.FC<BrickBlockProps> = ({ brick, history, user })
     }
   }
 
+  const saveFavorites = () => {
+    saveFavorite(brick.id);
+    favoriteSaved?.();
+  }
+
   // load best score
   useEffect(() => {
     getBestScore();
@@ -62,6 +69,8 @@ const PhoneExpandedBrick: React.FC<BrickBlockProps> = ({ brick, history, user })
     return false;
   }
 
+  console.log(bestScore);
+
   return (
     <div className="va-phone-expanded-brick">
       <div className="va-title-container">
@@ -86,8 +95,13 @@ const PhoneExpandedBrick: React.FC<BrickBlockProps> = ({ brick, history, user })
         </div>
       }
       <div className="va-footer">
+        {bestScore === -1 &&
+        <div className="va-favorites" onClick={saveFavorites}>
+          <div>Saved for later</div>
+          <SpriteIcon name="feather-heart-filled" />
+        </div>}
         <button className="btn va-right-play" onClick={() => {
-          if (user && checkAssignment(brick)) {
+          if (user && checkAssignment(brick)) { 
             history.push(map.postAssignment(brick.id, user.id));
           } else {
             history.push(routes.playBrief(brick));

src/components/viewAllPage/themes/ViewAllPageMobile.scss

@@ -518,13 +518,21 @@
     }
   }
 
+  .ss-tabs-scroll {
+    width: 100%;
+    overflow-x: scroll;
+    overflow-y: hidden;
+  }
+
   .ss-tabs-container {
     background: rgba(0, 28, 88, 0.22);
     $radius: 2vw;
     display: flex;
+    width: 140vw;
 
     .ss-tab-1,
-    .ss-tab-2 {
+    .ss-tab-2,
+    .ss-tab-3 {
       height: 6vh;
       font-size: 6vw;
       width: 49vw;
@@ -570,6 +578,10 @@
     }
 
     .ss-tab-2 {
+      border-top-right-radius: $radius;
+      border-top-left-radius: $radius;
+    }
+    .ss-tab-3 {
       margin-left: 1vw;
       border-top-left-radius: $radius;
     }
@@ -896,15 +908,35 @@
     }
 
     .va-footer {
-      height: 14vw;
-      width: 30vw;
+      height: 13vw;
+      width: calc(100% - 4vw);
       position: absolute;
       bottom: 0;
       right: 4vw;
+      font-family: $font-family-bold;
+      display: flex;
 
-      .va-right-play {
+      .va-favorites {
+        display: flex;
+        align-items: center;
         position: absolute;
         width: 100%;
+        left: 4vw;
+        padding: 1vw 0;
+        border-radius: 1.8vw;
+        font-size: 6vw;
+
+        svg {
+          margin-left: 3vw;
+          color: var(--white);
+          width: 9vw;
+          height: 9vw;
+        }
+      }
+
+      .va-right-play {
+        position: absolute;
+        width: 30vw;
         right: 2vw;
         padding: 1vw 0;
         border-radius: 1.8vw;

src/services/axios/brick.ts

@@ -294,6 +294,23 @@ export const copyBrick = async (brick: Brick, questions: Question[]) => {
   }
 }
 
+export const saveFavorite = async (brickId: number) => {
+  try {
+    await post<any>('/bricks/favorites/add', { brickId});
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export const getFavorites = async () => {
+  try {
+    return await get<any>('/bricks/favorites');
+  } catch {
+    return false;
+  }
+}
+
 export default {
   sendToPublisher
 }