index.js

import React, { useState } from 'react'
import styled from 'styled-components'
import Modal from '../../atoms/modal'
import CreateBubble from '../../organisms/add-new'
import BubblesContainer from '../../organisms/bubbles'

import { PATH_BUBBLES, POST } from '../../../utility/constants/path'
import { useBubblesApi } from '../../../hooks/useBubblesApi'

export default function HomePage() {
  const [show, setShow] = useState(false)
  const [title, setTitle] = useState()
  const [dueDate, setDueDate] = useState()
  const [tags, setTags] = useState()
  const [message, setMessage] = useState(null)
  const callBubblesApi = useBubblesApi({ imperative: true })

  const handleSubmit = async (e) => {
    e.preventDefault()

    const data = { title, dueDate, tags }
    const { err, msg } = await callBubblesApi({
      payload: data,
      path: PATH_BUBBLES,
      verb: POST
    })

    setMessage(msg)

    if (!err) {
      setTimeout(() => {
        // redirect to home
      }, 1000)
    }
  }

  const openModal = () => {
    setShow(true)
  }

  const closeModal = () => {
    setShow(false)
  }

  return (
    <>
      <section className="center">
        <BubblesContainer />
      </section>
      <Modal show={show} closeModal={closeModal} handleSubmit={handleSubmit}>
        <CreateBubble
          message={message}
          setTitle={setTitle}
          setDueDate={setDueDate}
          setTags={setTags}
        />
      </Modal>
      <StyledAddAction>
        <div className="actions">
          <div className="add-snippet" onClick={openModal}></div>
        </div>
      </StyledAddAction>
    </>
  )
}

const StyledAddAction = styled.div`
  .actions {
    display: grid;
    justify-content: center;
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 100;
    .add-snippet {
      cursor: pointer;
      padding: 18px;
      font-size: large;
      border-radius: 48px;
      color: white;
      width: 18px;
      height: 18px;
      background-image: linear-gradient(white, white),
        linear-gradient(white, white);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 5% 55%, 55% 5%;
      background-color: #dc3545;
    }
  }
`