hooks#useResponsive JavaScript Examples

The following examples show how to use hooks#useResponsive. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: CourseSearch.jsx    From ResoBin with MIT License 6 votes vote down vote up 
CourseSearch = ({ loading, setLoading }) => {
  const { isDesktop } = useResponsive()
  const { deleteQueryString, getQueryString, setQueryString } = useQueryString()
  const showFilter = useSelector(selectIsDropdownActive)

  const [search, setSearch] = useState(getQueryString('q'))

  const handleSearch = (event) => {
    setLoading(true)
    setSearch(event.target.value)

    setQueryString('q', event.target.value)
    deleteQueryString('p')
  }

  return (
    <>
      <SearchContainer>
        <CourseFinderFilterDropdown
          showFilter={showFilter && isDesktop}
          setLoading={setLoading}
        />
        {showFilter && isDesktop && <Overlay />}

        <StyledInput
          size="large"
          placeholder="Course code, name or description"
          allowClear
          maxLength={100}
          onChange={handleSearch}
          value={search}
          prefix={<StyledIcon Icon={loading ? LoadingOutlined : Search} />}
        />
      </SearchContainer>

      <CourseFinderFilterFloatButton />
    </>
  )
}
Example #2
Source File: CourseFinderFilterFloatButton.jsx    From ResoBin with MIT License 6 votes vote down vote up 
FilterFloatButton = () => {
  const [Icon, setIcon] = useState(Filter)
  const { isDesktop } = useResponsive()
  const isDropdownActive = useSelector(selectIsDropdownActive)
  const dispatch = useDispatch()

  // ? show or hide dropdown filters state
  const toggleFilter = () => dispatch(setDropdown(!isDropdownActive))

  // ? dropdown disabled on wide screens
  useEffect(() => {
    if (isDesktop) {
      dispatch(setDropdown(false))
      setIcon(null)
    } else {
      setIcon(isDropdownActive ? X : Filter)
    }
  }, [isDropdownActive, isDesktop, dispatch])

  return (
    Icon && (
      <IconContainer onClick={toggleFilter}>
        <Icon size="1.5rem" />
      </IconContainer>
    )
  )
}
Example #3
Source File: CoursePageBreadcrumbs.jsx    From ResoBin with MIT License 6 votes vote down vote up 
CoursePageBreadcrumbs = ({ courseTitle }) => {
  const { isMobileS } = useResponsive()
  if (isMobileS) return null

  return (
    <StyledBreadcrumb separator={<StyledIcon Icon={ChevronRight} />}>
      <Breadcrumb.Item>
        <Link to="/">
          <StyledIcon Icon={Home} />
          <span>Home</span>
        </Link>
      </Breadcrumb.Item>

      <Breadcrumb.Item>
        <Link to="/courses">
          <StyledIcon Icon={BookOpen} />
          <span>Courses</span>
        </Link>
      </Breadcrumb.Item>

      <Breadcrumb.Item>
        <span>{courseTitle}</span>
      </Breadcrumb.Item>
    </StyledBreadcrumb>
  )
}
Example #4
Source File: Header.jsx    From ResoBin with MIT License 6 votes vote down vote up 
Header = () => {
  const latestSemester = useSelector(selectCurrentSemester)
  const { isMobile } = useResponsive(device.tablet)

  return (
    <Container>
      <LogoContainer to="/">
        <ResoBinLogo width="32" alt="logo" />
      </LogoContainer>

      {!isMobile && latestSemester && (
        <>
          <TextContainer to="/">
            <ResoBinText size="1.5rem" />
          </TextContainer>

          <Term>
            <span>{latestSemester.season} sem</span>

            <Divider dashed margin="2px 0" style={{ borderColor: '#ffffff' }} />

            <span>AY {displayYear(latestSemester)}</span>
          </Term>
        </>
      )}
    </Container>
  )
}
Example #5
Source File: Avatar.jsx    From ResoBin with MIT License 6 votes vote down vote up 
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={{ background: colorPicker() }}
      alt={alt}
    />
  )
}
Example #6
Source File: CardSplit.jsx    From ResoBin with MIT License 6 votes vote down vote up 
CardSplit = ({ main, sub, subWidth }) => {
  const { isMobile } = useResponsive()

  return (
    <Container>
      <MainContainer>{main}</MainContainer>

      {isMobile && (
        <Divider
          style={{ width: '100%', gridArea: 'divider' }}
          margin="1rem 0"
        />
      )}

      <SubContainer subWidth={subWidth}>{sub}</SubContainer>
    </Container>
  )
}
Example #7
Source File: CourseItem.jsx    From ResoBin with MIT License 5 votes vote down vote up 
CourseItemSub = ({ courseData }) => {
  const { isMobile, isMobileS } = useResponsive()

  const {
    code,
    title,
    semester,
    reviewsCount,
    resourcesCount,
    reviewRequestersCount,
    resourceRequestersCount,
  } = courseData

  return (
    <>
      <TimetableSelector semester={semester} />

      {(isMobileS || !isMobile) && <Divider margin="0.75rem 0" />}
      {isMobile && !isMobileS && (
        <Divider style={{ width: '1px' }} type="vertical" />
      )}

      <div>
        <FlexGap style={{ marginBottom: '0.75rem' }}>
          <ButtonSquareLink
            to={`${coursePageUrl(code, title)}#reviews`}
            style={{ width: '100%', borderRadius: '0.5rem 0 0 0.5rem' }}
          >
            <ChatAlt size="16" />
            Reviews {reviewsCount > 0 && `(${reviewsCount})`}
          </ButtonSquareLink>

          <CourseContentRequestIcon
            code={code}
            type="reviews"
            initialCount={reviewRequestersCount}
            tooltip="Request reviews"
          />
        </FlexGap>

        <FlexGap>
          <ButtonSquareLink
            style={{ width: '100%', borderRadius: '0.5rem 0 0 0.5rem' }}
            to={`${coursePageUrl(code, title)}#resources`}
          >
            <DocumentText size="16" />
            Resources {resourcesCount > 0 && `(${resourcesCount})`}
          </ButtonSquareLink>

          <CourseContentRequestIcon
            code={code}
            type="resources"
            initialCount={resourceRequestersCount}
            tooltip="Request resources"
          />
        </FlexGap>
      </div>
    </>
  )
}
Example #8
Source File: CourseResourceContainer.jsx    From ResoBin with MIT License 5 votes vote down vote up 
CourseResourceContainer = () => {
  const { code } = useParams()
  const navigate = useNavigate()
  const { isMobileS } = useResponsive()

  const [resources, setResources] = useState([])
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    const fetchResources = async () => {
      try {
        setLoading(true)
        const response = await API.courses.listResources({ code })
        setResources(response)
      } catch (error) {
        toast({ status: 'error', content: error })
      } finally {
        setLoading(false)
      }
    }

    fetchResources()
  }, [code])

  const redirectContribute = () => navigate(`/contribute?course=${code}`)

  if (loading) return <LoaderAnimation />

  return (
    <>
      <Header>
        <h1 style={{ fontSize: '1.25rem' }}>Resources</h1>

        <ButtonContainer>
          {isMobileS ? (
            <CourseContentRequestIcon
              code={code}
              type="resources"
              style={{ marginRight: '0.75rem' }}
            />
          ) : (
            <CourseContentRequest
              code={code}
              type="resources"
              style={{ marginRight: '0.75rem' }}
            />
          )}

          <ButtonSquare
            type="primary"
            onClick={redirectContribute}
            icon={<CloudUpload size="16" />}
          >
            Upload
          </ButtonSquare>
        </ButtonContainer>
      </Header>

      {resources.length ? (
        <CourseResourceGrid items={resources} />
      ) : (
        <span style={{ fontSize: '0.875rem' }}>No resources found</span>
      )}
    </>
  )
}
Example #9
Source File: Menu.jsx    From ResoBin with MIT License 5 votes vote down vote up 
Menu = () => {
  // ? mobile devices horizontal menu & desktops vertical menu
  const profile = useSelector(selectUserProfile)
  const { isMobile } = useResponsive()
  const iconSize = isMobile ? '1.5rem' : '1.125rem'

  return (
    <Container>
      <MenuItem title="Home" icon={Home} iconSize={iconSize} to="/" />
      <MenuItem
        title="Timetable"
        icon={Calendar}
        iconSize={iconSize}
        to="/timetable"
      />
      <MenuItem
        title="Courses"
        icon={BookOpen}
        iconSize={iconSize}
        to="/courses"
      />

      {!isMobile && <Divider margin="1rem 0" />}
      {!isMobile && (
        <ProfileImgItem
          title={profile?.name?.split(' ')?.[0]}
          src={profile?.profilePicture}
        />
      )}

      <MenuItem
        title="Contribute"
        icon={CloudUpload}
        iconSize={iconSize}
        to="/contribute"
      />

      <MenuItem
        title="Favourites"
        icon={Bookmark}
        iconSize={iconSize}
        to="/favourites"
      />
      {!isMobile && profile.user.isStaff && (
        <MenuItem
          title="Admin"
          icon={ShieldCheck}
          iconSize={iconSize}
          to="/admin"
          target="_blank"
        />
      )}
      <MenuItem
        title="Settings"
        icon={Cog}
        iconSize={iconSize}
        to="/settings"
      />

      {!isMobile && <Divider margin="1rem 0" />}
      {!isMobile && (
        <MenuItem
          title="Contact"
          icon={ContactSupport}
          iconSize={iconSize}
          to="/contact"
        />
      )}
    </Container>
  )
}
Example #10
Source File: Aside.jsx    From ResoBin with MIT License 5 votes vote down vote up 
Aside = (params) => {
  const { isDesktop } = useResponsive()

  return <AsideContainer {...params} visible={isDesktop} />
}