hooks#useColorPicker JavaScript Examples

CourseWorkload = ({ workload }) => {
  const colorPicker = useColorPicker()

  const workloadItems = [
    { title: 'Lecture', value: workload.lecture },
    { title: 'Tutorial', value: workload.tutorial },
    { title: 'Lab', value: workload.selfstudy },
    { title: 'Practical', value: workload.practical },
  ].map((item) => {
    const num = parseInt(item.value, 10)
    return { ...item, value: Number.isNaN(num) ? 0 : num }
  })

  const totalWorkload = workloadItems.reduce((acc, item) => acc + item.value, 0)

  if (totalWorkload === 0)
    return <Title style={{ opacity: 0.8 }}>Workload not found</Title>

  return (
    <Container>
      <Title>Workload</Title>
      <WorkloadContainer>
        {workloadItems.map(({ title, value }, idx) => (
          <CourseWorkloadItem
            key={title}
            title={title}
            value={value}
            color={colorPicker(hash(idx))}
            style={{ marginLeft: idx > 0 ? '0' : 'initial' }}
          />
        ))}
      </WorkloadContainer>
    </Container>
  )
}

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}
    />
  )
}

CourseItemMain = ({ courseData }) => {
  const colorPicker = useColorPicker()
  const {
    code,
    credits,
    department,
    title,
    description,
    tags,
    favoritedByCount,
  } = courseData

  const creditColorPicker = (_credits) => {
    if (_credits >= 10) return colorPicker(0)
    if (_credits >= 8) return colorPicker(1)
    if (_credits >= 6) return colorPicker(2)
    if (_credits >= 4) return colorPicker(3)
    if (_credits >= 2) return colorPicker(4)
    return colorPicker(5)
  }

  return (
    <>
      <SubTitle>
        <DepartmentContainer
          style={{ color: colorPicker(hash(department.name)) }}
        >
          {department.name}
        </DepartmentContainer>

        <RightIcons>
          <TagsContainer>
            {credits > 0 && (
              <Tag style={{ color: creditColorPicker(credits) }}>
                {credits} credit{credits > 1 ? 's' : ''}
              </Tag>
            )}

            {tags.map((tag) => (
              <Tag key={tag} style={{ color: colorPicker(hash(tag)) }}>
                {tag}
              </Tag>
            ))}
          </TagsContainer>

          <FavoriteToggle code={code} initialCount={favoritedByCount} />
        </RightIcons>
      </SubTitle>

      <TitleContainer to={coursePageUrl(code, title)}>
        <h1>
          <HighlightMatches content={code} />
        </h1>

        <h2>
          <HighlightMatches content={title} />
        </h2>
      </TitleContainer>

      <Typography.Paragraph
        ellipsis={{ rows: 3, expandable: true, symbol: 'show more' }}
        style={{ marginTop: '0.75rem', marginBottom: 0 }}
      >
        {description?.length ? description : 'No description available'}
      </Typography.Paragraph>
    </>
  )
}

TimetableCourseItem = ({ data }) => {
  const { id, course: code, lectureSlots, tutorialSlots } = data

  const title = useSelector(selectCourseTitle(code))
  const colorPicker = useColorPicker()

  const handleClickInfo = useCallback(() => {
    window.location.href = coursePageUrl(code, title)
  }, [code, title])

  const TimetableCourseLectureItem = useCallback(
    ({ gridCol, gridRow, slotName, isTutorial }) => (
      <GridItem row={gridRow} col={gridCol}>
        <Tooltip title={title}>
          <Item color={colorPicker(hash(id))}>
            <h3 style={{ paddingRight: '1rem' }}>
              {code} {isTutorial && ' | Tut'}
              <ButtonIcon
                size="small"
                onClick={handleClickInfo}
                icon={<ExternalLink size="16" />}
                color="#000000"
                style={{
                  position: 'absolute',
                  top: '0.25rem',
                  right: '0.25rem',
                }}
              />
            </h3>

            <span>
              {gridRow.start.title} - {gridRow.end.title} | {slotName}
            </span>
          </Item>
        </Tooltip>
      </GridItem>
    ),
    [code, id, title, colorPicker, handleClickInfo]
  )

  if (lectureSlots?.length === 0) return null

  const courseSlots = lectureSlots
    .map((slot) => ({ slot, grid: slots[slot], isTutorial: false }))
    .concat(
      tutorialSlots.map((slot) => ({
        slot,
        grid: slots[slot],
        isTutorial: true,
      }))
    )

  return courseSlots?.map(({ slot, grid, isTutorial }, idx) => (
    <TimetableCourseLectureItem
      key={String(idx)}
      gridCol={cols[grid.col - 1]}
      gridRow={{ start: rows[grid.row.start], end: rows[grid.row.end] }}
      slotName={slot}
      isTutorial={isTutorial}
    />
  ))
}

CourseResourceItem = ({ content: initialContent }) => {
  const colorPicker = useColorPicker()
  const { id } = useSelector(selectUserProfile)
  const isOwner = id === initialContent.uploadedBy.id

  const [editModalVisible, setEditModalVisible] = useState(false)
  const [content, setContent] = useState(initialContent)

  const handleDownload = () => {
    window.open(content.file, '_blank', 'noopener,noreferrer')
  }

  const handleEdit = async (payload) => {
    try {
      await API.resources.update({ id: content.id, payload })
      setContent({ ...content, ...payload })
      setEditModalVisible(false)
    } catch (error) {
      toast({ status: 'error', content: error })
    }
  }

  return (
    <>
      <GridItem>
        <img
          src={content.thumbnail || placeholderImg}
          alt={content.title}
          style={{ width: '100%', height: '100%' }}
        />

        <ItemInfo>
          <ResourceTitle>{content.title}</ResourceTitle>
          <ResourceDescription>
            {content.description || 'Description not available'}
          </ResourceDescription>

          <Row>
            <ButtonIcon
              size="default"
              icon={<Download size="20" />}
              onClick={handleDownload}
              hoverstyle={{ background: 'rgba(0, 0, 0, 0.3)' }}
            />

            {isOwner && (
              <ButtonIcon
                size="default"
                icon={<PencilAlt size="20" />}
                onClick={() => setEditModalVisible(true)}
                hoverstyle={{ background: 'rgba(0, 0, 0, 0.3)' }}
              />
            )}

            <Popover
              content={
                <PopoverContent>
                  <UserAvatar
                    size="2rem"
                    src={content?.uploadedBy.profilePicture}
                    alt="Profile picture"
                  />

                  <PopoverHeading>
                    <h3>
                      Uploaded by: <b>{content?.uploadedBy.name}</b>
                    </h3>
                    <h3>
                      Author: <b>{content?.author || 'Not available'}</b>
                    </h3>
                    <span>
                      Uploaded <Timestamp time={content?.timestamp} />
                    </span>
                    {content?.tags.map((tag) => (
                      <Tag key={tag} style={{ color: colorPicker(hash(tag)) }}>
                        {tag}
                      </Tag>
                    ))}
                  </PopoverHeading>
                </PopoverContent>
              }
              title="Information"
              trigger="click"
            >
              <ButtonIcon
                size="default"
                icon={<InformationCircle size="20" />}
                hoverstyle={{ background: 'rgba(0, 0, 0, 0.3)' }}
              />
            </Popover>
          </Row>
        </ItemInfo>
      </GridItem>

      <CourseResourceItemEditModal
        visible={editModalVisible}
        onEdit={handleEdit}
        onCancel={() => setEditModalVisible(false)}
        initialValues={content}
      />
    </>
  )
}