@eureca/eureca-ui/src/components/Steps/track-stepper.js

UI component library of Eureca's user and admin apps

import React from 'react';
import PropTypes from 'prop-types';
import { format } from 'date-fns';

import { Typography, Box, useTheme } from '@material-ui/core';

import { IconContext } from 'react-icons';
import { FaCheckCircle, FaRegCheckCircle } from 'react-icons/fa';
import { FiFile, FiChevronRight } from 'react-icons/fi';

import { Flex } from '../Flex';

import { colors } from '../../theme/colors';

const chooseCircle = {
  incomplete: <FaRegCheckCircle />,
  complete: <FaCheckCircle />,
};

const iconStyle = {
  incomplete: {
    color: colors.gray3,
    fontSize: '1.125rem',
  },
  complete: {
    color: colors.green1,
    fontSize: '1.125rem',
  },
  chevron: {
    fontSize: '.75rem',
  },
};

const StepperHeader = ({ status, title, score, onClickTrack }) => {
  const muiTheme = useTheme();

  return (
    <Flex directionRow alignCenter justifySpaceBetween>
      <Flex directionRow alignCenter>
        <IconContext.Provider value={{ style: iconStyle[status] }}>
          {chooseCircle[status]}
        </IconContext.Provider>
        <Box ml={1.5}>
          <Typography variant="subtitle2">{title}</Typography>
        </Box>
      </Flex>
      {status === 'complete' ? (
        <Typography variant="body2">{score ? 'Pontuado' : 'Não pontuado'}</Typography>
      ) : (
        <Flex
          alignCenter
          justifyCenter
          cursorPointer
          width={muiTheme.spacing(3)}
          height={muiTheme.spacing(3)}
          onClick={onClickTrack}
        >
          <FiChevronRight size="1rem" />
        </Flex>
      )}
    </Flex>
  );
};

StepperHeader.propTypes = {
  status: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  score: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
};

const StepperScore = ({ type, score, maxScore, companyName }) => {
  return (
    <Flex directionRow alignCenter data-testid="stepper-score-testid">
      <Box mr={0.5}>
        <Typography variant="h5">{score}</Typography>
      </Box>
      {type === 'fit' ? (
        <Typography variant="subtitle2">{` de compatibilidade com a cultura da ${companyName}`}</Typography>
      ) : (
        <Typography variant="h5" style={{ color: colors.gray3, fontWeight: 400 }}>
          {` / ${maxScore}`}
        </Typography>
      )}
    </Flex>
  );
};

StepperScore.propTypes = {
  type: PropTypes.string.isRequired,
  score: PropTypes.string.isRequired,
  maxScore: PropTypes.string.isRequired,
  companyName: PropTypes.string.isRequired,
};

const textStyle = muiTheme => ({
  fontSize: '0.715rem',
  fontWeight: muiTheme.typography.fontWeightLight,
  lineHeight: '1.285rem',
  minWidth: muiTheme.spacing(11),
  color: colors.green1,
  textAlign: 'center',
});

const ChallengeSent = ({ date, onClick }) => {
  const muiTheme = useTheme();
  const theme = textStyle(muiTheme);

  return (
    <Flex alignCenter justifyCenter>
      <Flex
        justifyCenter
        alignCenter
        width={muiTheme.spacing(4)}
        height={muiTheme.spacing(4)}
        borderRadius="50%"
        bgcolor={colors.green1}
        onClick={onClick}
      >
        <FiFile size="1rem" color={colors.white} />
      </Flex>
      <Typography style={theme}>Desafio enviado</Typography>
      <Typography style={theme}>{date && format(date, 'dd/MM/yyyy')}</Typography>
    </Flex>
  );
};

const StepperContent = ({ type, content }) => {
  const categoryContent = {
    initial: <div style={{ width: '100%' }} />,
    fit: <Typography variant="body2">{content}</Typography>,
    pdf: <Typography variant="body2">{content}</Typography>,
    audio: <Typography variant="body2">{content}</Typography>,
    video: <Typography variant="body2">{content}</Typography>,
  };

  return (
    <Flex directionRow justifySpaceBetween>
      {categoryContent[type]}
    </Flex>
  );
};

StepperContent.propTypes = {
  type: PropTypes.string.isRequired,
  content: PropTypes.string.isRequired,
};

function TrackStepper({ tracks, companyName, onClickFile, onClickTrack }) {
  const muiTheme = useTheme();

  const handleClickModule = () => {
    // history.push(Routes.Submission);
  };

  return (
    <Flex>
      {tracks.flatMap((track, index, array) => (
        <Flex key={`${track.title}-key-${index}`} cursorPointer onClick={handleClickModule}>
          <StepperHeader
            status={track.status}
            title={track.title}
            score={track.score}
            onClickTrack={() => onClickTrack(track.id)}
          />
          <Flex
            directionRow
            left={muiTheme.spacing(1)}
            position="relative"
            style={{
              borderLeft: index + 1 < array.length && `2px dotted ${colors.gray3}`,
            }}
          >
            <Flex width={1}>
              {track.content && (
                <Flex ml={3} mt={3} directionRow justifySpaceBetween>
                  <Flex>
                    <Box mb={2}>
                      <StepperScore
                        type={track.type}
                        score={track.score}
                        maxScore={track.maxScore}
                        companyName={companyName}
                      />
                    </Box>
                    <StepperContent type={track.type} content={track.content} />
                  </Flex>
                  <ChallengeSent date={track.date} onClick={() => onClickFile(track.id)} />
                </Flex>
              )}
              <Box
                id="divider"
                my={3}
                style={{
                  borderBottom: `1px solid ${colors.gray5}`,
                }}
              />
            </Flex>
          </Flex>
        </Flex>
      ))}
    </Flex>
  );
}

TrackStepper.propTypes = {
  tracks: PropTypes.array.isRequired,
  companyName: PropTypes.string.isRequired,
  onClickFile: PropTypes.func,
  onClickTrack: PropTypes.func,
};

TrackStepper.defaultProps = {
  tracks: [
    {
      type: 'initial',
      status: 'incomplete',
      title: '',
      date: null,
      score: '',
      maxScore: '',
      content: '',
    },
  ],
  companyName: '',
  onClickFile: () => {},
  onClickTrack: () => {},
};

export { TrackStepper };