Merge pull request #46 from relaxxpls/master

[1.5.1] bug fixes and minor ui improvements
DevCom-IITB · Dec 28, 2021 · 02f6f51 · 02f6f51
2 parents 1edc365 + 20fcdbd
commit 02f6f51
Show file tree

Hide file tree

Showing 12 changed files with 155 additions and 48 deletions.
diff --git a/src/components/CourseFinder/CourseItem.jsx b/src/components/CourseFinder/CourseItem.jsx
@@ -36,7 +36,16 @@ const HighlightMatches = ({ content }) => {
 }
 
 const CourseItemMain = ({ courseData }) => {
-  const { code, credits, department, title, description, tags } = courseData
+  const {
+    code,
+    credits,
+    department,
+    title,
+    description,
+    tags,
+    favoritedByCount,
+  } = courseData
+
   const departmentList = useSelector(selectDepartments)
   const colorPicker = useColorPicker()
 
@@ -80,7 +89,7 @@ const CourseItemMain = ({ courseData }) => {
             ))}
           </TagsContainer>
 
-          <FavoriteToggle code={code} />
+          <FavoriteToggle code={code} initialCount={favoritedByCount} />
         </RightIcons>
       </SubTitle>
 
@@ -108,10 +117,15 @@ const CourseItemMain = ({ courseData }) => {
 const CourseItemSub = ({ courseData }) => {
   const { isMobile, isMobileS } = useResponsive()
 
-  const { code, title, semester, reviews, resources } = courseData
-
-  const reviewCount = reviews?.length
-  const resourceCount = resources?.length
+  const {
+    code,
+    title,
+    semester,
+    reviewsCount,
+    resourcesCount,
+    reviewRequestersCount,
+    resourceRequestersCount,
+  } = courseData
 
   return (
     <>
@@ -129,14 +143,14 @@ const CourseItemSub = ({ courseData }) => {
             style={{ width: '100%', borderRadius: '0.5rem 0 0 0.5rem' }}
           >
             <ChatAlt size="16" />
-            Reviews {reviewCount > 0 && `(${reviewCount})`}
+            Reviews {reviewsCount > 0 && `(${reviewsCount})`}
           </ButtonSquareLink>
 
           <CourseContentRequestIcon
             code={code}
             type="reviews"
+            initialCount={reviewRequestersCount}
             tooltip="Request reviews"
-            style={{ borderRadius: '0 0.5rem 0.5rem 0' }}
           />
         </FlexGap>
 
@@ -146,14 +160,14 @@ const CourseItemSub = ({ courseData }) => {
             to={`${coursePageUrl(code, title)}#resources`}
           >
             <DocumentText size="16" />
-            Resources {resourceCount > 0 && `(${resourceCount})`}
+            Resources {resourcesCount > 0 && `(${resourcesCount})`}
           </ButtonSquareLink>
 
           <CourseContentRequestIcon
             code={code}
             type="resources"
+            initialCount={resourceRequestersCount}
             tooltip="Request resources"
-            style={{ borderRadius: '0 0.5rem 0.5rem 0' }}
           />
         </FlexGap>
       </div>

diff --git a/src/components/CoursePage/CourseContentRequest.jsx b/src/components/CoursePage/CourseContentRequest.jsx
@@ -2,14 +2,15 @@ import { UserGroup } from '@styled-icons/heroicons-outline'
 import { useState } from 'react'
 import { useSelector } from 'react-redux'
 
-import { ButtonIcon, ButtonSwitch, toast } from 'components/shared'
+import { Badge, ButtonIcon, ButtonSwitch, toast } from 'components/shared'
 import { API } from 'config/api'
 import { selectUserProfile } from 'store/userSlice'
 
-export const useCourseContentRequest = ({ code, type }) => {
+export const useCourseContentRequest = ({ code, type, initialCount }) => {
   const profile = useSelector(selectUserProfile)
 
   const [loading, setLoading] = useState(false)
+  const [count, setCount] = useState(initialCount)
   const [requestStatus, setRequestStatus] = useState(
     profile[`${type}Requested`]?.includes(code) ?? false
   )
@@ -19,8 +20,10 @@ export const useCourseContentRequest = ({ code, type }) => {
       setLoading(true)
       if (requestStatus) {
         await API[type].request.remove({ code })
+        setCount(count - 1)
       } else {
         await API[type].request.add({ code })
+        setCount(count + 1)
       }
 
       setRequestStatus(!requestStatus)
@@ -35,6 +38,7 @@ export const useCourseContentRequest = ({ code, type }) => {
     requestStatus,
     handleRequest,
     loading,
+    count,
   }
 }
 
@@ -59,21 +63,33 @@ export const CourseContentRequestSquare = ({ code, type, ...props }) => {
   )
 }
 
-export const CourseContentRequestIcon = ({ code, type, ...props }) => {
-  const { requestStatus, handleRequest, loading } = useCourseContentRequest({
-    code,
-    type,
-  })
+export const CourseContentRequestIcon = ({
+  code,
+  type,
+  initialCount,
+  ...props
+}) => {
+  const { requestStatus, handleRequest, loading, count } =
+    useCourseContentRequest({ code, type, initialCount })
 
   return (
     <ButtonIcon
       type="primary"
       shape="round"
       size="default"
-      icon={<UserGroup size="16"/>}
+      icon={
+        initialCount ? (
+          <Badge scale={0.625} count={count} overflowCount={9}>
+            <UserGroup size="30" />
+          </Badge>
+        ) : (
+          <UserGroup size="20" />
+        )
+      }
       $active={requestStatus}
       onClick={handleRequest}
       loading={loading}
+      style={{ width: '2.5rem', borderRadius: '0 0.5rem 0.5rem 0' }}
       {...props}
     />
   )

diff --git a/src/components/CoursePage/CoursePageBody.jsx b/src/components/CoursePage/CoursePageBody.jsx
@@ -8,15 +8,23 @@ import { device, fontSize } from 'styles/responsive'
 import CourseWorkload from './CourseWorkload'
 
 const CoursePageBody = ({ courseData }) => {
-  const { code, title, department, credits, description, workload, semester } =
-    courseData
+  const {
+    code,
+    title,
+    department,
+    credits,
+    description,
+    workload,
+    semester,
+    favoritedByCount,
+  } = courseData
 
   return (
     <Container>
       <CourseInfo>
         <h1>{code}</h1>
         <FavoriteContainer>
-          <FavoriteToggle code={code} />
+          <FavoriteToggle code={code} initialCount={favoritedByCount} />
         </FavoriteContainer>
 
         <h2>{title}</h2>

diff --git a/src/components/CourseResource/CourseResourceContainer.jsx b/src/components/CourseResource/CourseResourceContainer.jsx
@@ -3,15 +3,20 @@ import { useEffect, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import styled from 'styled-components/macro'
 
-import { CourseContentRequest } from 'components/CoursePage'
+import {
+  CourseContentRequest,
+  CourseContentRequestIcon,
+} from 'components/CoursePage'
 import { ButtonSquare, LoaderAnimation, toast } from 'components/shared'
 import { API } from 'config/api'
+import { useResponsive } from 'hooks'
 
 import { CourseResourceGrid } from './CourseResourceItem'
 
 const CourseResourceContainer = () => {
   const { code } = useParams()
   const navigate = useNavigate()
+  const { isMobileS } = useResponsive()
 
   const [resources, setResources] = useState([])
   const [loading, setLoading] = useState(false)
@@ -42,11 +47,19 @@ const CourseResourceContainer = () => {
         <h1 style={{ fontSize: '1.25rem' }}>Resources</h1>
 
         <ButtonContainer>
-          <CourseContentRequest
-            code={code}
-            type="resources"
-            style={{ marginRight: '0.75rem' }}
-          />
+          {isMobileS ? (
+            <CourseContentRequestIcon
+              code={code}
+              type="resources"
+              style={{ marginRight: '0.75rem' }}
+            />
+          ) : (
+            <CourseContentRequest
+              code={code}
+              type="resources"
+              style={{ marginRight: '0.75rem' }}
+            />
+          )}
 
           <ButtonSquare
             type="primary"

diff --git a/src/components/CourseReview/CourseReviewItem.jsx b/src/components/CourseReview/CourseReviewItem.jsx
@@ -193,7 +193,14 @@ const CommentHeader = styled.h2`
 `
 
 const CommentText = styled.div`
-  width: 80%;
   color: ${({ theme }) => theme.textColor};
-  font-weight: 400;
+  margin-top: 0.5rem;
+
+  a {
+    color: #239afc;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 `
diff --git a/src/components/CourseReview/Editor.jsx b/src/components/CourseReview/Editor.jsx
@@ -1,4 +1,3 @@
-import { DocumentText } from '@styled-icons/heroicons-outline'
 import { useState } from 'react'
 import ReactQuill from 'react-quill'
 import { useSelector } from 'react-redux'
@@ -44,10 +43,14 @@ const modules = {
 
 const CustomToolbar = ({ templateHandler }) => (
   <Toolbar id="toolbar" style={{ border: 'none' }}>
-    <select className="ql-header" defaultValue="" onChange={(e) => e.persist()}>
+    <select
+      className="ql-header"
+      defaultValue="3"
+      onChange={(e) => e.persist()}
+    >
       <option aria-label="button" value="1" />
       <option aria-label="button" value="2" />
-      <option aria-label="button" selected />
+      <option aria-label="button" value="3" />
     </select>
 
     <button type="button" aria-label="button" className="ql-bold" />
@@ -56,7 +59,7 @@ const CustomToolbar = ({ templateHandler }) => (
 
     {templateHandler && (
       <button type="button" className="ql-loadTemplate">
-        <DocumentText size="24" />
+        Load template
       </button>
     )}
   </Toolbar>
@@ -168,4 +171,9 @@ const Toolbar = styled.div`
   select {
     background: none;
   }
+
+  button.ql-loadTemplate {
+    color: ${({ theme }) => theme.textColor};
+    width: fit-content;
+  }
 `
diff --git a/src/components/Favourites/FavoriteToggle.jsx b/src/components/Favourites/FavoriteToggle.jsx
@@ -2,22 +2,26 @@ import { Bookmark, BookmarkOutline } from '@styled-icons/zondicons'
 import { useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 
-import { ButtonIcon, toast } from 'components/shared'
+import { Badge, ButtonIcon, toast } from 'components/shared'
 import { API } from 'config/api'
 import { selectFavouriteStatus, updateFavourite } from 'store/userSlice'
 
-const FavoriteToggle = ({ code }) => {
+const FavoriteToggle = ({ code, initialCount }) => {
   const dispatch = useDispatch()
   const favourite = useSelector(selectFavouriteStatus(code))
+
   const [loading, setLoading] = useState(false)
+  const [count, setCount] = useState(initialCount)
 
   const handleToggle = async () => {
     try {
       setLoading(true)
       if (favourite) {
         await API.courses.favorite.remove({ code })
+        setCount(count - 1)
       } else {
         await API.courses.favorite.add({ code })
+        setCount(count + 1)
       }
 
       dispatch(updateFavourite(code))
@@ -32,7 +36,11 @@ const FavoriteToggle = ({ code }) => {
     <ButtonIcon
       tooltip="Add to favorites"
       onClick={handleToggle}
-      icon={favourite ? <Bookmark size="25" /> : <BookmarkOutline size="25" />}
+      icon={
+        <Badge scale={0.8} count={count} overflowCount={9}>
+          {favourite ? <Bookmark size="30" /> : <BookmarkOutline size="30" />}
+        </Badge>
+      }
       color="white"
       loading={loading}
     />

diff --git a/src/components/shared/Avatar.jsx b/src/components/shared/Avatar.jsx
@@ -2,28 +2,40 @@ import { User } from '@styled-icons/heroicons-outline'
 import { Avatar } from 'antd'
 import styled from 'styled-components/macro'
 
+import { useResponsive } from 'hooks'
+import { useColorPicker } from 'styles/utils'
+
 const StyledAvatar = styled(Avatar)`
   display: flex;
   align-items: center;
   justify-content: center;
   min-width: ${({ size }) => size};
   min-height: ${({ size }) => size};
-  border: 1px solid ${({ theme }) => theme.textColor};
+  color: ${({ theme }) => theme.darksecondary};
 
   img {
-    width: ${({ size }) => size};
-    height: ${({ size }) => size};
+    width: 100%;
+    height: 100%;
   }
 `
 
-export const UserAvatar = ({ size = '2rem', src, alt = 'Profile picture' }) => {
-  return src ? (
-    <StyledAvatar size={size} src={src} alt={alt} />
-  ) : (
+export const UserAvatar = ({
+  size: initialSize,
+  src,
+  alt = 'Profile picture',
+}) => {
+  const colorPicker = useColorPicker()
+  const { isMobileS } = useResponsive()
+
+  const size = isMobileS ? '1rem' : initialSize ?? '2rem'
+
+  if (src) return <StyledAvatar size={size} src={src} alt={alt} />
+
+  return (
     <StyledAvatar
       size={size}
       icon={<User size={`calc(${size}/1.5)`} />}
-      style={{ backgroundColor: '#87d068' }}
+      style={{ backgroundColor: colorPicker() }}
       alt={alt}
     />
   )

diff --git a/src/components/shared/Badge.jsx b/src/components/shared/Badge.jsx
@@ -0,0 +1,13 @@
+import { Badge } from 'antd'
+import styled from 'styled-components/macro'
+
+const StyledBadge = styled(Badge)`
+  transform: scale(${({ scale }) => scale});
+  color: ${({ theme }) => theme.textColor};
+
+  .ant-badge-count {
+    box-shadow: none;
+  }
+`
+
+export default StyledBadge