Organisms

Samodzielne komponenty takie jak listy, modale i nawigacja.

SaveModal.js

import React, { useState, useContext, useEffect } from 'react';
import { StyledTitle, Wrapper, Content, SaveButton } from './SaveModal.styles';
import { Button } from 'components/atoms/Button/Button';
import { ReactComponent as CloseIcon } from 'assets/icons/delete.svg';
import { DatePicker } from 'react-date-time-picker-popup';
import TimePicker from 'react-times';
import { PlaylistContext } from 'providers/PlaylistProvider';
import './css/calendar.css';
import './css/time.css';

const SaveModal = ({ handleClose }) => {
  const [day, setDay] = useState(new Date());
  const [expiration, setExpiration] = useState({ hour: '02', minute: '00' });
  const { savePlaylist, isPlaylistUpdated, updatedPlaylist } = useContext(PlaylistContext);

  const closeEvents = () => {
    handleClose();
    setTimeout(() => {
      savePlaylist(day, expiration);
    }, 200);
  };

  useEffect(() => {
    if (isPlaylistUpdated) {
      setDay(updatedPlaylist.day);
      setExpiration(updatedPlaylist.expiration);
    }
    // eslint-disable-next-line
  }, []);

  return (
    <Wrapper>
      <StyledTitle>
        {!isPlaylistUpdated ? <p>Zapisz playliste</p> : <p>Zapisz zmiany</p>}
        <Button onClick={handleClose}>
          <CloseIcon />
        </Button>
      </StyledTitle>
      <Content>
        <p>Wybierz datę</p>
        <DatePicker
          lang="pl"
          selectedDay={day}
          setSelectedDay={setDay}
          timeSelector={true}
          minuteInterval={10}
          BGColor={'#1B7290'}
        />
        <p>Wybierz po jakim czasie playlista wygaśnie</p>
        <TimePicker theme="classic" time={expiration.hour + expiration.minute} onTimeChange={setExpiration} />
        <SaveButton onClick={closeEvents}>ZAPISZ</SaveButton>
      </Content>
    </Wrapper>
  );
};

export default SaveModal;

SaveModal.styles.js

import styled from 'styled-components';
import { Title } from 'components/atoms/Title/Title';
import { Button } from 'components/atoms/Button/Button';

export const StyledTitle = styled(Title)`
  margin: 0;

  Button {
    margin-right: 3px;
    width: 39px;
    height: 39px;

    svg {
      width: 30px;
      height: 30px;
    }
  }
`;

export const Wrapper = styled.div`
  width: 650px;
  height: 830px;
`;

export const Content = styled.div`
  padding: 0 20px;
  height: calc(100% - 45px);
  overflow: scroll;
`;

export const SaveButton = styled(Button)`
  width: 80px;
  height: 40px;
  position: absolute;
  bottom: 20px;
  right: 20px;
  font-size: ${({ theme }) => theme.fontSize.m};
  font-weight: bold;
  box-shadow: -2px 4px 10px rgba(0, 0, 0, 0.25);
`;