{"size": 2260, "ext": "js", "max_stars_repo_path": "backend/src/screens/Snippets/index.js", "max_stars_repo_name": "fontesrp/amplemarket_challenge", "max_stars_repo_stars_event_min_datetime": "2021-04-09T23:52:55.000Z", "max_stars_repo_stars_event_max_datetime": "2021-04-09T23:52:55.000Z", "max_issues_repo_path": "backend/src/screens/Snippets/index.js", "max_issues_repo_name": "fontesrp/amplemarket_challenge", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "backend/src/screens/Snippets/index.js", "max_forks_repo_name": "fontesrp/amplemarket_challenge", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 28.6075949367, "max_line_length": 92, "alphanum_fraction": 0.6221238938}
import React, { useCallback, useEffect, useMemo, useState } from 'react'

import api from 'src/api'
import { TemplatesControlContext, TemplatesDataContext } from 'src/context/TemplatesContext'
import integration from 'src/integration'

import Footer from './Footer'
import List from './List'
import { Main } from './styles'

const Snippets = () => {
  const [templates, setTemplates] = useState({ isLoading: true })

  const { enable: editingEnable, id: editingId, keepEditBody: editingKeepEditBody } =
    templates?.editing || {}

  const { page: currentPage } = templates?.paging || {}

  const fetchTemplates = useCallback(
    (page = currentPage) => {
      const updateTemplates = newProps =>
        setTemplates(prevTemplates => ({ ...(prevTemplates || {}), ...newProps }))

      updateTemplates({ isLoading: true })

      return api.templates
        .getAll({ page })
        .then(res => {
          const { items, paging } = res.data || {}
          updateTemplates({ items, paging })
        })
        .catch(() => updateTemplates({ items: null, paging: null }))
        .finally(() => updateTemplates({ isLoading: false }))
    },
    [currentPage]
  )

  const setEditing = useCallback(
    ({ enable, id, keepEditBody }) =>
      setTemplates(prevTemplates => ({
        ...(prevTemplates || {}),
        editing: { enable, id, keepEditBody }
      })),
    []
  )

  const tamplatesControl = useMemo(() => ({ fetchTemplates, setEditing }), [
    fetchTemplates,
    setEditing
  ])

  useEffect(() => {
    if (!editingEnable || !editingId || editingKeepEditBody) {
      integration.sendToParent({ type: 'EDIT_TEMPLATE_FINISH' })
      return
    }

    api.templates.getById({ id: editingId }).then(res =>
      integration.sendToParent({
        data: { body: res.data.body, id: editingId, page: currentPage },
        type: 'EDIT_TEMPLATE'
      })
    )
  }, [currentPage, editingEnable, editingId, editingKeepEditBody])

  return (
    <TemplatesControlContext.Provider value={tamplatesControl}>
      <TemplatesDataContext.Provider value={templates}>
        <Main>
          <List />
          <Footer />
        </Main>
      </TemplatesDataContext.Provider>
    </TemplatesControlContext.Provider>
  )
}

export default Snippets
