From f26fcb6e47551c07c31dc12b3fc8e914a2459055 Mon Sep 17 00:00:00 2001 From: daedalus <44623501+ComfortablyCoding@users.noreply.github.com> Date: Wed, 11 Oct 2023 23:09:46 -0400 Subject: [PATCH] refactor(admin): simplify component structure (#11) * refactor(admin): use non index file for components * chore(admin): remove unused plugin icon * refactor(components): simplify component structure --- .../src/components/Initializer/Initializer.js | 26 ++++++ admin/src/components/Initializer/index.js | 27 +----- .../components/NoteListItem/NoteListItem.js | 61 +++++++++++++ admin/src/components/NoteListItem/index.js | 53 +---------- .../NoteListLayout/NoteListLayout.js | 87 +++++++++++++++++++ .../components/NoteListLayoutContent/index.js | 59 ------------- .../components/NoteListLayoutFooter/index.js | 25 ------ .../components/NoteListLayoutHeader/index.js | 17 ---- admin/src/components/NoteListLayout/index.js | 32 +------ .../index.js => NoteModal/NoteModal.js} | 34 ++++---- admin/src/components/NoteModal/index.js | 1 + admin/src/components/PluginIcon/index.js | 12 --- admin/src/index.js | 2 +- 13 files changed, 197 insertions(+), 239 deletions(-) create mode 100644 admin/src/components/Initializer/Initializer.js create mode 100644 admin/src/components/NoteListItem/NoteListItem.js create mode 100644 admin/src/components/NoteListLayout/NoteListLayout.js delete mode 100644 admin/src/components/NoteListLayout/components/NoteListLayoutContent/index.js delete mode 100644 admin/src/components/NoteListLayout/components/NoteListLayoutFooter/index.js delete mode 100644 admin/src/components/NoteListLayout/components/NoteListLayoutHeader/index.js rename admin/src/components/{NoteCreateModal/index.js => NoteModal/NoteModal.js} (69%) create mode 100644 admin/src/components/NoteModal/index.js delete mode 100644 admin/src/components/PluginIcon/index.js diff --git a/admin/src/components/Initializer/Initializer.js b/admin/src/components/Initializer/Initializer.js new file mode 100644 index 0000000..322df44 --- /dev/null +++ b/admin/src/components/Initializer/Initializer.js @@ -0,0 +1,26 @@ +/** + * + * Initializer + * + */ + +import { useEffect, useRef } from 'react'; +import PropTypes from 'prop-types'; +import { pluginId } from '../../pluginId'; + +const Initializer = ({ setPlugin }) => { + const ref = useRef(); + ref.current = setPlugin; + + useEffect(() => { + ref.current(pluginId); + }, []); + + return null; +}; + +Initializer.propTypes = { + setPlugin: PropTypes.func.isRequired, +}; + +export default Initializer; diff --git a/admin/src/components/Initializer/index.js b/admin/src/components/Initializer/index.js index 322df44..1f86b51 100644 --- a/admin/src/components/Initializer/index.js +++ b/admin/src/components/Initializer/index.js @@ -1,26 +1 @@ -/** - * - * Initializer - * - */ - -import { useEffect, useRef } from 'react'; -import PropTypes from 'prop-types'; -import { pluginId } from '../../pluginId'; - -const Initializer = ({ setPlugin }) => { - const ref = useRef(); - ref.current = setPlugin; - - useEffect(() => { - ref.current(pluginId); - }, []); - - return null; -}; - -Initializer.propTypes = { - setPlugin: PropTypes.func.isRequired, -}; - -export default Initializer; +export { default } from './Initializer'; diff --git a/admin/src/components/NoteListItem/NoteListItem.js b/admin/src/components/NoteListItem/NoteListItem.js new file mode 100644 index 0000000..49b13dd --- /dev/null +++ b/admin/src/components/NoteListItem/NoteListItem.js @@ -0,0 +1,61 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Box, Typography, IconButton, IconButtonGroup, Flex } from '@strapi/design-system'; +import { Trash, Pencil } from '@strapi/icons'; +import { useNote } from '../../hooks/useNote'; + +const NoteListItem = ({ note, setActiveNote, toggleModal }) => { + const { deleteNote } = useNote(); + + const openNoteModel = () => { + setActiveNote({ ...note }); + toggleModal(true); + }; + + const handleNoteDelete = (note) => { + deleteNote({ id: note.id }); + }; + + return ( + + + + {note.attributes.title} + + + + openNoteModel(note)} + label="Edit" + icon={} + /> + handleNoteDelete(note)} + label="Delete" + icon={} + /> + + + + ); +}; + +NoteListItem.propTypes = { + note: PropTypes.object.isRequired, + setActiveNote: PropTypes.func.isRequired, + toggleModal: PropTypes.func.isRequired, +}; + +export default NoteListItem; diff --git a/admin/src/components/NoteListItem/index.js b/admin/src/components/NoteListItem/index.js index 35160c7..0430729 100644 --- a/admin/src/components/NoteListItem/index.js +++ b/admin/src/components/NoteListItem/index.js @@ -1,52 +1 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { Box, Flex, Typography, IconButton, IconButtonGroup } from '@strapi/design-system'; -import { Trash, Pencil } from '@strapi/icons'; -import { useNote } from '../../hooks/useNote'; - -const NoteListItem = ({ note, setActiveNote, toggleModal }) => { - const { deleteNote } = useNote(); - - const openNoteCreateModel = () => { - setActiveNote(note); - toggleModal(); - }; - - const handleNoteDelete = (note) => { - deleteNote({ id: note.id }); - }; - - return ( - - - - - {note.attributes.title} - - - - openNoteCreateModel(note)} - label="Edit" - icon={} - /> - handleNoteDelete(note)} - label="Delete" - icon={} - /> - - - - ); -}; - -NoteListItem.propTypes = { - note: PropTypes.object.isRequired, - setActiveNote: PropTypes.func.isRequired, - toggleModal: PropTypes.func.isRequired, -}; - -export { NoteListItem }; +export { default } from './NoteListItem'; diff --git a/admin/src/components/NoteListLayout/NoteListLayout.js b/admin/src/components/NoteListLayout/NoteListLayout.js new file mode 100644 index 0000000..dba8895 --- /dev/null +++ b/admin/src/components/NoteListLayout/NoteListLayout.js @@ -0,0 +1,87 @@ +import React, { useState, useEffect } from 'react'; +import { useCMEditViewDataManager } from '@strapi/helper-plugin'; +import { Box, Divider, Typography, Button, Stack, Loader } from '@strapi/design-system'; +import { Plus } from '@strapi/icons'; +import { useNote } from '../../hooks/useNote'; +import NoteModal from '../NoteModal'; +import NoteListItem from '../NoteListItem'; + +const NoteListLayout = () => { + const { isCreatingEntry, modifiedData, slug } = useCMEditViewDataManager(); + const { getNotes } = useNote(); + const [isNoteModalVisible, setIsNoteModalVisible] = useState(false); + const [activeNote, setActiveNote] = useState({}); + const [notes, setNotes] = useState([]); + + if (isCreatingEntry) { + return null; + } + + const id = modifiedData.id || false; + if (!id) { + return null; + } + + const entity = { id, slug }; + + const { isLoading, data, isRefetching } = getNotes({ + filters: { + entityId: entity.id, + entitySlug: entity.slug, + }, + sort: { createdAt: 'ASC' }, + }); + + // set initial data to state so its reactive + useEffect(() => { + if (!isLoading && !isRefetching) { + if (data.length) { + setNotes([...data]); + } else { + setNotes([]); + } + } + }, [isLoading, isRefetching]); + + return ( + + + Notes + + + + + {isLoading ? ( + Loading content... + ) : ( + + {!isLoading && + notes.map((note) => ( + + ))} + + )} + + {isNoteModalVisible && ( + + )} + + ); +}; + +export default NoteListLayout; diff --git a/admin/src/components/NoteListLayout/components/NoteListLayoutContent/index.js b/admin/src/components/NoteListLayout/components/NoteListLayoutContent/index.js deleted file mode 100644 index 9d92d92..0000000 --- a/admin/src/components/NoteListLayout/components/NoteListLayoutContent/index.js +++ /dev/null @@ -1,59 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import PropTypes from 'prop-types'; -import { Stack } from '@strapi/design-system'; -import { NoteModalCreate } from '../../../NoteCreateModal'; -import { NoteListItem } from '../../../NoteListItem'; -import { useNote } from '../../../../hooks/useNote'; - -const NoteListLayoutContent = ({ entity }) => { - const { getNotes } = useNote(); - const [isVisible, setIsVisible] = useState(false); - const [activeNote, setActiveNote] = useState({}); - const [notes, setNotes] = useState([]); - const toggleModal = () => setIsVisible((prev) => !prev); - - const { isLoading, data, isRefetching } = getNotes({ - filters: { - entityId: entity.id, - entitySlug: entity.slug, - }, - sort: { createdAt: 'ASC' }, - }); - - // set initial data to state so its reactive - useEffect(() => { - if (!isLoading && !isRefetching) { - if (data.length) { - setNotes([...data]); - } else { - setNotes([]); - } - } - }, [isLoading, isRefetching]); - - return ( - - - {!isLoading && - notes.map((n) => ( - - ))} - - {isVisible && } - - ); -}; - -NoteListLayoutContent.propTypes = { - entity: PropTypes.object.isRequired, -}; - -export { NoteListLayoutContent }; diff --git a/admin/src/components/NoteListLayout/components/NoteListLayoutFooter/index.js b/admin/src/components/NoteListLayout/components/NoteListLayoutFooter/index.js deleted file mode 100644 index 8ddbaf2..0000000 --- a/admin/src/components/NoteListLayout/components/NoteListLayoutFooter/index.js +++ /dev/null @@ -1,25 +0,0 @@ -import React, { useState } from 'react'; -import PropTypes from 'prop-types'; -import { TextButton } from '@strapi/design-system'; -import { Plus } from '@strapi/icons'; -import { NoteModalCreate } from '../../../NoteCreateModal'; -const NoteListLayoutFooter = ({ entity }) => { - const [isVisible, setIsVisible] = useState(false); - - const toggleModal = () => setIsVisible((prev) => !prev); - - return ( - - } onClick={toggleModal}> - Add a note - - {isVisible && } - - ); -}; - -NoteListLayoutFooter.propTypes = { - entity: PropTypes.object.isRequired, -}; - -export { NoteListLayoutFooter }; diff --git a/admin/src/components/NoteListLayout/components/NoteListLayoutHeader/index.js b/admin/src/components/NoteListLayout/components/NoteListLayoutHeader/index.js deleted file mode 100644 index df49f45..0000000 --- a/admin/src/components/NoteListLayout/components/NoteListLayoutHeader/index.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import { Box, Divider, Typography } from '@strapi/design-system'; - -const NoteListLayoutHeader = () => { - return ( - - - Notes - - - - - - ); -}; - -export { NoteListLayoutHeader }; diff --git a/admin/src/components/NoteListLayout/index.js b/admin/src/components/NoteListLayout/index.js index 17f7060..1601992 100644 --- a/admin/src/components/NoteListLayout/index.js +++ b/admin/src/components/NoteListLayout/index.js @@ -1,31 +1 @@ -import React from 'react'; -import { useCMEditViewDataManager } from '@strapi/helper-plugin'; -import { Box } from '@strapi/design-system'; -import { NoteListLayoutHeader } from './components/NoteListLayoutHeader'; -import { NoteListLayoutFooter } from './components/NoteListLayoutFooter'; -import { NoteListLayoutContent } from './components/NoteListLayoutContent'; - -const NoteListLayout = () => { - const { isCreatingEntry, modifiedData, slug } = useCMEditViewDataManager(); - - if (isCreatingEntry) { - return null; - } - - const id = modifiedData.id || false; - if (!id) { - return null; - } - - const entity = { id, slug }; - - return ( - - - - - - ); -}; - -export { NoteListLayout }; +export { default } from './NoteListLayout'; diff --git a/admin/src/components/NoteCreateModal/index.js b/admin/src/components/NoteModal/NoteModal.js similarity index 69% rename from admin/src/components/NoteCreateModal/index.js rename to admin/src/components/NoteModal/NoteModal.js index 5e0ee4b..378816c 100644 --- a/admin/src/components/NoteCreateModal/index.js +++ b/admin/src/components/NoteModal/NoteModal.js @@ -14,16 +14,18 @@ import { import { Check } from '@strapi/icons'; import { useNote } from '../../hooks/useNote'; -const NoteModalCreate = ({ toggleModal, note = {}, entity }) => { - const [values, setValues] = useState(note); +const NoteModal = ({ entity, note = {}, toggleModal }) => { + const [entityNote, setEntityNote] = useState(note); const { createNote, updateNote } = useNote(); + const isExistingNote = entityNote.id; + const handleNoteUpsert = async () => { try { - if (!note.id) { + if (!isExistingNote) { await createNote({ - title: values.attributes.title, - content: values.attributes.content, + title: entityNote.attributes.title, + content: entityNote.attributes.content, entityId: entity.id, entitySlug: entity.slug, }); @@ -31,22 +33,22 @@ const NoteModalCreate = ({ toggleModal, note = {}, entity }) => { await updateNote({ id: note.id, body: { - title: values.attributes.title, - content: values.attributes.content, + title: entityNote.attributes.title, + content: entityNote.attributes.content, }, }); } } catch (error) { console.error(error); } - toggleModal(); + toggleModal(false); }; const updateState = (key, value) => { - setValues({ - ...values, + setEntityNote({ + ...entityNote, attributes: { - ...values.attributes, + ...entityNote.attributes, [key]: value, }, }); @@ -56,7 +58,7 @@ const NoteModalCreate = ({ toggleModal, note = {}, entity }) => { - {values.id ? 'Edit a note' : 'Add a note'} + {isExistingNote ? 'Edit a note' : 'Add a note'} @@ -64,12 +66,12 @@ const NoteModalCreate = ({ toggleModal, note = {}, entity }) => { updateState('title', e.target.value)} - defaultValue={values.id ? values.attributes.title : ''} + defaultValue={isExistingNote ? entityNote.attributes.title : ''} /> @@ -89,10 +91,10 @@ const NoteModalCreate = ({ toggleModal, note = {}, entity }) => { ); }; -NoteModalCreate.propTypes = { +NoteModal.propTypes = { toggleModal: PropTypes.func.isRequired, note: PropTypes.object, entity: PropTypes.object.isRequired, }; -export { NoteModalCreate }; +export default NoteModal; diff --git a/admin/src/components/NoteModal/index.js b/admin/src/components/NoteModal/index.js new file mode 100644 index 0000000..c42327b --- /dev/null +++ b/admin/src/components/NoteModal/index.js @@ -0,0 +1 @@ +export { default } from './NoteModal'; diff --git a/admin/src/components/PluginIcon/index.js b/admin/src/components/PluginIcon/index.js deleted file mode 100644 index a7c98f7..0000000 --- a/admin/src/components/PluginIcon/index.js +++ /dev/null @@ -1,12 +0,0 @@ -/** - * - * PluginIcon - * - */ - -import React from 'react'; -import Puzzle from '@strapi/icons/Puzzle'; - -const PluginIcon = () => ; - -export default PluginIcon; diff --git a/admin/src/index.js b/admin/src/index.js index 70fc686..a6580bd 100644 --- a/admin/src/index.js +++ b/admin/src/index.js @@ -1,7 +1,7 @@ import pluginPkg from '../../package.json'; import { pluginId } from './pluginId'; import Initializer from './components/Initializer'; -import { NoteListLayout } from './components/NoteListLayout'; +import NoteListLayout from './components/NoteListLayout'; const name = pluginPkg.strapi.name;