Merge pull request #33 from relaxxpls/master

[v1.2.1] Create home page and major UI Fixes

src/api/api-config.jsx

@@ -99,9 +99,9 @@ export const API = {
 
     favorite: {
       add: async ({ code }) =>
-        APIInstance.put(`/accounts/profile/course/${code}/favorite`),
+        APIInstance.put(`/accounts/profile/courses/${code}/favorite`),
       remove: async ({ code }) =>
-        APIInstance.delete(`/accounts/profile/course/${code}/favorite`),
+        APIInstance.delete(`/accounts/profile/courses/${code}/favorite`),
     },
   },
 
@@ -119,13 +119,11 @@ export const API = {
 
     request: {
       add: async ({ code }) =>
-        APIInstance.put(`/accounts/profile/course/${code}/request/resource`),
+        APIInstance.put(`/accounts/profile/courses/${code}/request/resources`),
       remove: async ({ code }) =>
-        APIInstance.delete(`/accounts/profile/course/${code}/request/resource`),
-    },
-
-    tags: {
-      list: async () => APIInstance.get(`/resources/tags`),
+        APIInstance.delete(
+          `/accounts/profile/courses/${code}/request/resources`
+        ),
     },
   },
 
@@ -139,9 +137,16 @@ export const API = {
 
     request: {
       add: async ({ code }) =>
-        APIInstance.put(`/accounts/profile/course/${code}/request/review`),
+        APIInstance.put(`/accounts/profile/courses/${code}/request/reviews`),
       remove: async ({ code }) =>
-        APIInstance.delete(`/accounts/profile/course/${code}/request/review`),
+        APIInstance.delete(`/accounts/profile/courses/${code}/request/reviews`),
+    },
+
+    vote: {
+      add: async ({ id }) =>
+        APIInstance.put(`/accounts/profile/reviews/${id}/vote`),
+      remove: async ({ id }) =>
+        APIInstance.delete(`/accounts/profile/reviews/${id}/vote`),
     },
   },
 
@@ -155,6 +160,11 @@ export const API = {
     list: async () => APIInstance.get('/semesters'),
   },
 
+  // * Stats endpoint
+  stats: {
+    list: async () => APIInstance.get('/stats'),
+  },
+
   // * Developer stats endpoints
   GitHub: {
     getContributors: async () => {

src/components/Contact/ContactContainer.jsx

@@ -1,26 +1,33 @@
+// import { useState } from 'react'
 import styled from 'styled-components/macro'
 
-import { PageHeading, PageTitle } from 'components/shared'
-
-import ContactFormContainer from './ContactFormContainer'
+import { ButtonSquare, InputSquared, TextAreaSquared } from 'components/shared'
 
 const ContactContainer = () => {
+  // const [state, setState] = useState(initalState)
+
+  // const handleInput = (e) => {
+  //   const inputName = e.currentTarget.name
+  //   const value = e.currentTarget.value
+  //   setState((prev) => ({ ...prev, [inputName]: value }))
+  // }
+
   return (
-    <Container>
-      <PageHeading>
-        <PageTitle>Contact us</PageTitle>
-      </PageHeading>
-      <ContactFormContainer />
-    </Container>
+    <ContainerForm>
+      <InputSquared placeholder="Subject" type="text" />
+
+      <TextAreaSquared placeholder="Message" />
+
+      <ButtonSquare type="submit">Send Message</ButtonSquare>
+    </ContainerForm>
   )
 }
 
-export default ContactContainer
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  min-height: calc(100vh - ${({ theme }) => theme.headerHeight});
-  margin: 0 ${({ theme }) => theme.asideWidthRight} 0
-    ${({ theme }) => theme.asideWidthLeft};
+const ContainerForm = styled.form`
+  padding: 1rem;
+  border-radius: 0.5rem;
+  background: ${({ theme }) => theme.secondary};
+  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
 `
+
+export default ContactContainer

src/components/Contact/DeveloperList.jsx

@@ -1,18 +1,16 @@
-import { Avatar, Card, Skeleton } from 'antd'
-import { rgba } from 'polished'
+import { Avatar } from 'antd'
 import { useEffect, useState } from 'react'
 import styled from 'styled-components/macro'
 
 import { API } from 'api'
-import { Aside } from 'components/shared'
+import { Aside, Card, CardSkeleton } from 'components/shared'
 import { toastError } from 'components/toast'
-import { useViewportContext } from 'context/ViewportContext'
-import { breakpoints } from 'styles/responsive'
+import { useResponsive } from 'hooks'
 
 const DeveloperItem = ({ name, avatar, url, contributions }) => {
   return (
     <a key={name} href={url} target="_blank" rel="noreferrer">
-      <StyledCard hoverable>
+      <Card hoverable>
         <Card.Meta
           avatar={<Avatar src={avatar} />}
           title={name}
@@ -23,121 +21,65 @@ const DeveloperItem = ({ name, avatar, url, contributions }) => {
             </>
           }
         />
-      </StyledCard>
+      </Card>
     </a>
   )
 }
 
 const DeveloperSkeleton = () => (
-  <StyledSkeleton avatar active paragraph={{ rows: 1 }} />
+  <CardSkeleton avatar active paragraph={{ rows: 1 }} />
 )
 
 const ContributorList = () => {
+  const { isDesktop } = useResponsive()
+
   const [contributors, setContributors] = useState([])
   const [loading, setLoading] = useState(true)
 
   useEffect(() => {
-    const getContributorsData = async () =>
-      API.GitHub.getContributors()
-        .then((data) =>
-          data.map((item) => ({
-            name: item.login,
-            avatar: item.avatar_url,
-            url: item.html_url,
-            contributions: item.contributions,
-          }))
-        )
-        .then((data) => setContributors(data))
-        .then(() => setLoading(false))
-        .catch((err) => {
-          toastError(err.message)
-          setLoading(false)
-        })
+    const getContributorsData = async () => {
+      try {
+        setLoading(true)
+
+        let response = await API.GitHub.getContributors()
+        response = response.map((item) => ({
+          name: item.login,
+          avatar: item.avatar_url,
+          url: item.html_url,
+          contributions: item.contributions,
+        }))
+
+        setContributors(response)
+      } catch (error) {
+        toastError(error)
+      } finally {
+        setLoading(false)
+      }
+    }
 
-    setLoading(true)
     getContributorsData()
   }, [])
-  const { width } = useViewportContext()
 
   return (
     <Aside
       title="Made with ❤️ by"
-      visible={width >= breakpoints.lg}
+      visible={isDesktop}
       loading={loading}
       loadingComponent={<DeveloperSkeleton />}
     >
-      {contributors.map((item) => (
-        <DeveloperItem key={item.name} {...item} />
-      ))}
+      <DeveloperList>
+        {contributors?.map((item) => (
+          <DeveloperItem key={item.name} {...item} />
+        ))}
+      </DeveloperList>
     </Aside>
   )
 }
 
 export default ContributorList
 
-const StyledCard = styled(Card)`
-  .ant-card-body {
-    margin: 0.75rem 0;
-    border-radius: ${({ theme }) => theme.borderRadius};
-    background-color: ${({ theme }) => rgba(theme.darksecondary, 0.3)};
-  }
-
-  &.ant-card-hoverable {
-    transition: 100ms;
-
-    &:hover {
-      border-radius: ${({ theme }) => theme.borderRadius};
-      background-color: rgba(0, 0, 0, 0.3);
-    }
-  }
-
-  &.ant-card-bordered {
-    border: 0;
-    background-color: transparent;
-  }
-
-  .ant-card-meta {
-    display: flex;
-    align-items: center;
-
-    .ant-card-meta-title {
-      font-size: 1rem;
-      color: ${({ theme }) => theme.textColor};
-    }
-
-    &-description {
-      font-size: 0.875rem;
-      font-weight: 500;
-      color: ${({ theme }) => theme.placeholder};
-
-      b {
-        font-weight: 600;
-        color: ${({ theme }) => theme.logo};
-      }
-    }
-  }
-
-  .ant-avatar {
-    width: 3rem;
-    height: 3rem;
-  }
-`
-
-const StyledSkeleton = styled(Skeleton)`
+const DeveloperList = styled.div`
   display: flex;
-  align-items: center;
-  padding: 0.875rem 1.125rem;
-  margin: 0.75rem 0;
-  border-radius: 0.5rem;
-  background: #1b172866;
-  box-shadow: 0 0 0.5rem rgb(0 0 0 / 20%);
-
-  .ant-skeleton-avatar {
-    width: 3rem;
-    height: 3rem;
-  }
-
-  .ant-skeleton-content .ant-skeleton-title {
-    margin: 0;
-  }
+  flex-direction: column;
+  gap: 0.75rem;
 `

src/components/CourseFinder/CourseContainer.jsx

@@ -1,16 +1,13 @@
 import { useState, useEffect } from 'react'
-import styled from 'styled-components/macro'
 
 import { API } from 'api'
 import { CourseList, CourseSearch } from 'components/CourseFinder'
 import { FilterAside, FilterFloatButton } from 'components/filter'
 import { toastError } from 'components/toast'
-import { useViewportContext } from 'context/ViewportContext'
-import { useQueryString } from 'hooks'
-import { breakpoints } from 'styles/responsive'
+import { useQueryString, useResponsive } from 'hooks'
 
 const CourseFinderContainer = () => {
-  const { width } = useViewportContext()
+  const { isDesktop } = useResponsive()
   const { getQueryString } = useQueryString()
 
   const [showFilter, setShowFilter] = useState(false)
@@ -37,20 +34,22 @@ const CourseFinderContainer = () => {
       page: filter.p,
       department: filter.department,
       is_half_semester: filter.halfsem,
+      is_running: filter.running,
       credits_min: filter.credits_min,
       credits_max: filter.credits_max,
       semester: filter.semester,
+      tags: filter.tags,
     }
 
     fetchCourses(params)
   }, [getQueryString])
 
   return (
-    <Container>
+    <>
       <CourseSearch
         loading={loading}
         setLoading={setLoading}
-        showFilter={width < breakpoints.lg && showFilter}
+        showFilter={!isDesktop && showFilter}
       />
 
       {/* For desktops */}
@@ -67,12 +66,8 @@ const CourseFinderContainer = () => {
         loading={loading}
         setLoading={setLoading}
       />
-    </Container>
+    </>
   )
 }
 
 export default CourseFinderContainer
-
-const Container = styled.div`
-  width: 100%;
-`