From cbe56c3647515c6d82fa613ef8da98f25a7a1419 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Tue, 26 Sep 2023 19:41:20 +0200 Subject: [PATCH] feat(org); Saving of patterns and patterns views --- sites/org/pages/edit/[design]/[id].mjs | 51 ++++++ sites/org/pages/patterns/[id]/index.mjs | 4 +- sites/shared/components/account/en.yaml | 4 + sites/shared/components/account/patterns.mjs | 178 ++++++++++++++----- sites/shared/components/lightbox.mjs | 27 ++- sites/shared/components/pattern/preview.mjs | 29 ++- sites/shared/utils.mjs | 5 + 7 files changed, 249 insertions(+), 49 deletions(-) create mode 100644 sites/org/pages/edit/[design]/[id].mjs diff --git a/sites/org/pages/edit/[design]/[id].mjs b/sites/org/pages/edit/[design]/[id].mjs new file mode 100644 index 00000000000..410f1ecd7b1 --- /dev/null +++ b/sites/org/pages/edit/[design]/[id].mjs @@ -0,0 +1,51 @@ +// Hooks +import { useDesign, collection } from 'shared/hooks/use-design.mjs' +// Dependencies +import { serverSideTranslations } from 'next-i18next/serverSideTranslations' +import { nsMerge } from 'shared/utils.mjs' +// Components +import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs' +import { Workbench, ns as wbNs } from 'shared/components/workbench/new.mjs' +import { WorkbenchLayout } from 'site/components/layouts/workbench.mjs' +import { DynamicOrgDocs as DynamicDocs } from 'site/components/dynamic-org-docs.mjs' + +// Translation namespaces used on this page +const namespaces = nsMerge(wbNs, pageNs) + +const EditDesignPage = ({ page, design, id }) => { + const Design = useDesign(design) + + return ( + + + + ) +} + +export default EditDesignPage + +export async function getStaticProps({ locale, params }) { + return { + props: { + ...(await serverSideTranslations(locale, [params.design, ...namespaces])), + design: params.design, + id: params.id, + page: { + locale, + path: ['new', params.design], + title: '', + }, + }, + } +} + +/* + * getStaticPaths() is used to specify for which routes (think URLs) + * this page should be used to generate the result. + */ +export async function getStaticPaths() { + return { + paths: [], + fallback: 'blocking', + } +} diff --git a/sites/org/pages/patterns/[id]/index.mjs b/sites/org/pages/patterns/[id]/index.mjs index db3051057ee..4c2b08b98d8 100644 --- a/sites/org/pages/patterns/[id]/index.mjs +++ b/sites/org/pages/patterns/[id]/index.mjs @@ -17,7 +17,7 @@ const ns = nsMerge(patternsNs, authNs, pageNs, 'status') * So for these, we run a dynamic import and disable SSR rendering */ const DynamicPattern = dynamic( - () => import('shared/components/account/patterns.mjs').then((mod) => mod.Pattern), + () => import('shared/components/account/patterns.mjs').then((mod) => mod.ShowPattern), { ssr: false } ) @@ -32,7 +32,7 @@ const PatternPage = ({ page, id }) => { return ( - + ) } diff --git a/sites/shared/components/account/en.yaml b/sites/shared/components/account/en.yaml index 0d59b0863d0..06e845d01e9 100644 --- a/sites/shared/components/account/en.yaml +++ b/sites/shared/components/account/en.yaml @@ -307,3 +307,7 @@ examples: Examples noExamples: We currently do not have any examples for this design noExamplesMsg: We rely on the FreeSewing community to submit examples in our showcase posts. +ownPublicPattern: This is the public view on one of your own patterns. For more options, access the private view. +ownPrivatePattern: This is the private view on your pattern. The public view will work for you even when the pattern is private. It will only work for others when the pattern is public. +privateView: Private view +publicView: Public view diff --git a/sites/shared/components/account/patterns.mjs b/sites/shared/components/account/patterns.mjs index 4b7f6e6d132..5856945d8da 100644 --- a/sites/shared/components/account/patterns.mjs +++ b/sites/shared/components/account/patterns.mjs @@ -1,7 +1,13 @@ // Dependencies import { useState, useEffect, useContext } from 'react' import { useTranslation } from 'next-i18next' -import { capitalize, shortDate, cloudflareImageUrl, horFlexClasses } from 'shared/utils.mjs' +import { + capitalize, + shortDate, + cloudflareImageUrl, + horFlexClasses, + patternUrl, +} from 'shared/utils.mjs' import { freeSewingConfig as conf, controlLevels } from 'shared/config/freesewing.config.mjs' // Context import { LoadingStatusContext } from 'shared/context/loading-status-context.mjs' @@ -14,6 +20,7 @@ import { ModalContext } from 'shared/context/modal-context.mjs' // Components import { PageLink, Link, AnchorLink } from 'shared/components/link.mjs' import { BackToAccountButton } from './shared.mjs' +import { Popout } from 'shared/components/popout/index.mjs' import { StringInput, MarkdownInput, @@ -33,6 +40,8 @@ import { CloneIcon, BoolYesIcon, BoolNoIcon, + LockIcon, + PatternIcon, } from 'shared/components/icons.mjs' import { DisplayRow } from './shared.mjs' import { ModalWrapper } from 'shared/components/wrappers/modal.mjs' @@ -40,10 +49,112 @@ import Markdown from 'react-markdown' import Timeago from 'react-timeago' import { TableWrapper } from 'shared/components/wrappers/table.mjs' import { DynamicOrgDocs } from 'site/components/dynamic-org-docs.mjs' +import { PatternReactPreview } from 'shared/components/pattern/preview.mjs' +import { Lightbox } from 'shared/components/lightbox.mjs' export const ns = ['account', 'patterns', 'status'] -export const Pattern = ({ id, publicOnly = false }) => { +export const ShowPattern = ({ id }) => { + // Hooks + const { account, control } = useAccount() + const { setLoadingStatus } = useContext(LoadingStatusContext) + const backend = useBackend() + const { t, i18n } = useTranslation(ns) + + // Context + const { setModal } = useContext(ModalContext) + + // State + const [pattern, setPattern] = useState() + const [isOwn, setIsOwn] = useState(false) + + // Effect + useEffect(() => { + const getPattern = async () => { + setLoadingStatus([true, t('backendLoadingStarted')]) + let result = await backend.getPattern(id) + if (result.success) { + setPattern(result.data.pattern) + setIsOwn(true) + setLoadingStatus([true, 'backendLoadingCompleted', true, true]) + } else { + result = await backend.getPublicPattern(id) + if (result.success) setPattern({ ...result.data, public: true }) + else setLoadingStatus([true, 'backendError', true, false]) + } + } + if (id) getPattern() + }, [id]) + + if (!pattern) return

loading

+ + return ( + <> +
+
+ + + +
+
+ {pattern.name} + {pattern.id} + + + + + + + + + | + {shortDate(i18n.language, pattern.createdAt, false)} + + + + | + {shortDate(i18n.language, pattern.updatedAt, false)} + + + {pattern.public ? : } + + + + + + + + {t('clonePattern')} + + {isOwn ? ( + <> + +

{t('account:ownPublicPattern')}

+ + {t('account:privateView')} + + + + ) : null} +
+
+

{t('account:notes')}

+ {isOwn ? 'is own' : 'is not own'} + {pattern.notes} + + ) +} + +export const Pattern = ({ id }) => { // Hooks const { account, control } = useAccount() const { setLoadingStatus } = useContext(LoadingStatusContext) @@ -80,27 +191,8 @@ export const Pattern = ({ id, publicOnly = false }) => { setLoadingStatus([true, 'backendLoadingCompleted', true, true]) } else setLoadingStatus([true, 'backendError', true, false]) } - const getPublicPattern = async () => { - setLoadingStatus([true, t('backendLoadingStarted')]) - const result = await backend.getPublicPattern(id) - if (result.success) { - setPattern({ - ...result.data, - public: true, - }) - setName(result.data.name) - setImage(result.data.image) - setIsPublic(true) - setNotes(result.data.notes) - setLoadingStatus([true, 'backendLoadingCompleted', true, true]) - } else setLoadingStatus([true, 'backendError', true, false]) - } - if (id) { - if (publicOnly) getPublicPattern() - else getPattern() - } - console.log(' in useeffect') - }, [id, publicOnly]) + if (id) getPattern() + }, [id]) const save = async () => { setLoadingStatus([true, 'gatheringInfo']) @@ -108,8 +200,8 @@ export const Pattern = ({ id, publicOnly = false }) => { const data = {} if (name || name !== pattern.name) data.name = name if (image || image !== pattern.image) data.img = image - if ([true, false].includes(isPublic) && isPublic !== pattern.public) data.public = isPublic if (notes || notes !== pattern.notes) data.notes = notes + if ([true, false].includes(isPublic) && isPublic !== pattern.public) data.public = isPublic setLoadingStatus([true, 'savingPattern']) const result = await backend.updatePattern(pattern.id, data) if (result.success) { @@ -159,23 +251,7 @@ export const Pattern = ({ id, publicOnly = false }) => { {t('showImage')} - {pattern.userId === account.id && publicOnly && ( - - {t('updatePattern')} - - )} - {account.username && ( - - {t('clonePattern')} - - )} - {!publicOnly && ( + {pattern.userId === account.id && ( <> {edit ? ( <> @@ -194,11 +270,22 @@ export const Pattern = ({ id, publicOnly = false }) => { ) : ( <> {t('updatePattern')} + + {t('clonePattern')} + ) } + +//