@alliance-software-development/asd-content-editabl

Welcome to content-editable-wrapper 👋

This is project was built to be an editable wrapper for all homepages in ASD. It takes care of sending the data for that section to the API, and can also encapsulate an image.

🏠 Homepage

Prerequisites

Node >= 14.0.0
React >= 16.0.0

Install

npm install --save-dev content-editable-wrapper

Usage

import { EditableWrapper } from 'content-editable-wrapper'
import { useState, useEffect } from 'react'
import { getPageData } from 'dispatchable-actions'

const Homepage = () => {
  const [pageData, setPageData] = useState()

  useEffect(() => {
    if(!pageData) return
    const data = getPageData()
    setPageData(data);
  }, [pageData])

  const handleFinishEditing = async (id, newContent) => {
    await axios.post(`my-uri/${id}`, newContent)
  }

  return (
    <>
      {pageData &&
        (<div>
          <EditableWrapper
            data={pageData}
            sectionId="header"
            sectionName="banner_header"
            handleFinishEditing={handleFinishEditing}
           >
            <h1>
              {pageData.content.header}
            </h1>
          </EditableWrapper>

          <EditableWrapper
            data={pageData}
            sectionId="image"
            sectionName="banner_header"
            isImage
            padding="20px"
            handleFinishEditing={handleFinishEditing}
           >
            <img src={pageData.content.image}
            style={{
                width: "200px"
            }}>
          </EditableWrapper>
        </div>
        )}
    </>
  )
}

--- dispatchable-actions.js ---
export const getPageData = () =>  {
    content: {
        header: "This is the end",
        image: "url"
    },
    id: 'data-id'
}