wip(org): Work on platform pages

sites/org/pages/account/[platform].mjs

@@ -0,0 +1,90 @@
+// Dependencies
+import dynamic from 'next/dynamic'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { nsMerge, capitalize } from 'shared/utils.mjs'
+import { freeSewingConfig } from 'shared/config/freesewing.config.mjs'
+import { siteConfig } from 'site/site.config.mjs'
+// Hooks
+import { useTranslation } from 'next-i18next'
+// Components
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
+import { ns as githubNs } from 'shared/components/account/github.mjs'
+
+// Translation namespaces used on this page
+const ns = nsMerge(githubNs, authNs, pageNs)
+
+/*
+ * Some things should never generated as SSR
+ * So for these, we run a dynamic import and disable SSR rendering
+ */
+const DynamicAuthWrapper = dynamic(
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  { ssr: false }
+)
+
+const DynamicPlatform = dynamic(
+  () => import('shared/components/account/platform.mjs').then((mod) => mod.PlatformSettings),
+  { ssr: false }
+)
+
+/*
+ * Each page MUST be wrapped in the PageWrapper component.
+ * You also MUST spread props.page into this wrapper component
+ * when path and locale come from static props (as here)
+ * or set them manually.
+ */
+const AccountPage = ({ page, platform }) => {
+  const { t } = useTranslation(ns)
+
+  return (
+    <PageWrapper {...page} title={capitalize(platform)}>
+      <DynamicAuthWrapper>
+        <DynamicPlatform platform={platform} />
+      </DynamicAuthWrapper>
+    </PageWrapper>
+  )
+}
+
+export default AccountPage
+
+export async function getStaticProps({ locale, params }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ns)),
+      platform: params.platform,
+      page: {
+        locale,
+        path: ['account', params.platform],
+      },
+    },
+  }
+}
+
+/*
+ * getStaticPaths() is used to specify for which routes (think URLs)
+ * this page should be used to generate the result.
+ *
+ * On this page, it is returning a truncated list of routes (think URLs) for all
+ * the mdx blog (markdown) content.
+ * That list comes from prebuild/blog-paths.mjs, which is built in the prebuild step
+ * and contains paths, titles, imageUrls, and intro for all blog posts.
+ *
+ * the fallback: 'blocking' property means that
+ * any pages that haven't been pre-generated
+ * will generate and cache the first time someone visits them
+ *
+ * To learn more, see: https://nextjs.org/docs/basic-features/data-fetching
+ */
+export const getStaticPaths = async () => {
+  const paths = []
+  for (const platform of Object.keys(freeSewingConfig.account.fields.identities).filter(
+    (key) => key !== 'github'
+  )) {
+    for (const locale of siteConfig.languages) {
+      paths.push({ params: { platform }, locale })
+    }
+  }
+
+  return { paths, fallback: false }
+}

sites/org/pages/account/github.mjs

@@ -1,13 +1,16 @@
 // Dependencies
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { nsMerge } from 'shared/utils.mjs'
+// Hooks
+import { useTranslation } from 'next-i18next'
 // Components
 import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
 import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
 import { ns as githubNs } from 'shared/components/account/github.mjs'
 
 // Translation namespaces used on this page
-const namespaces = [...new Set([...githubNs, ...authNs, ...pageNs])]
+const ns = nsMerge(githubNs, authNs, pageNs)
 
 /*
  * Some things should never generated as SSR
@@ -29,20 +32,24 @@ const DynamicGithub = dynamic(
  * when path and locale come from static props (as here)
  * or set them manually.
  */
-const AccountPage = ({ page }) => (
+const AccountPage = ({ page }) => {
-  <PageWrapper {...page}>
+  const { t } = useTranslation(ns)
-    <DynamicAuthWrapper>
+
-      <DynamicGithub title />
+  return (
-    </DynamicAuthWrapper>
+    <PageWrapper {...page} title="GitHub">
-  </PageWrapper>
+      <DynamicAuthWrapper>
-)
+        <DynamicGithub title />
+      </DynamicAuthWrapper>
+    </PageWrapper>
+  )
+}
 
 export default AccountPage
 
 export async function getStaticProps({ locale }) {
   return {
     props: {
-      ...(await serverSideTranslations(locale, namespaces)),
+      ...(await serverSideTranslations(locale, ns)),
       page: {
         locale,
         path: ['account', 'github'],

sites/shared/components/account/en.yaml

@@ -207,3 +207,6 @@ generateANewThing: "Generate a new { thing }"
 
 website: Website
 linkedIdentities: Linked Identities
+
+platformTitle: Who are you on { platform }?
+platformWhy: We do not use this data in any way. This is only here so FreeSewing users can connect the dots across platforms.

sites/shared/components/account/links.mjs

@@ -212,7 +212,7 @@ export const AccountLinks = () => {
         <div className="">
           <h4 className="my-2">{t('linkedIdentities')}</h4>
           {Object.keys(conf.account.fields.identities).map((item) => (
-            <AccountLink href={`/account/identities/${item}`} title={t(item)}>
+            <AccountLink href={`/account/${item}`} title={t(item)}>
               <div className="flex flex-row items-center gap-3 font-medium">
                 {itemIcons[item]}
                 {t(item)}

sites/shared/components/account/platform.mjs

@@ -0,0 +1,57 @@
+// Dependencies
+import { useState, useContext } from 'react'
+import { useTranslation } from 'next-i18next'
+// Hooks
+import { useAccount } from 'shared/hooks/use-account.mjs'
+import { useBackend } from 'shared/hooks/use-backend.mjs'
+import { useLoadingStatus } from 'shared/hooks/use-loading-status.mjs'
+// Components
+import { BackToAccountButton } from './shared.mjs'
+import { SaveSettingsButton } from 'shared/components/buttons/save-settings-button.mjs'
+import { Popout } from 'shared/components/popout/index.mjs'
+
+export const ns = ['account', 'status']
+
+export const PlatformSettings = ({ platform }) => {
+  // Hooks
+  const { account, setAccount, token } = useAccount()
+  const backend = useBackend(token)
+  const { t } = useTranslation(ns)
+  const { setLoadingStatus, LoadingStatus } = useLoadingStatus()
+
+  // State
+  const [platformId, setPlatformId] = useState(account.data[platform] || '')
+
+  // Helper method to save changes
+  const save = async () => {
+    setLoadingStatus([true, 'processingUpdate'])
+    const data = { data: {} }
+    data.data[platform] = platformId
+    const result = await backend.updateAccount(data)
+    if (result.success) {
+      setAccount(result.data.account)
+      setLoadingStatus([true, 'settingsSaved', true, true])
+    } else setLoadingStatus([true, 'backendError', true, false])
+  }
+
+  return (
+    <div className="max-w-xl">
+      <LoadingStatus />
+      <h2 className="text-4xl">{t('account:platformTitle', { platform: platform })}</h2>
+      <div className="flex flex-row items-center mb-4">
+        <input
+          value={platformId}
+          onChange={(evt) => setPlatformId(evt.target.value)}
+          className="input w-full input-bordered flex flex-row"
+          type="text"
+          placeholder={account[platform]}
+        />
+      </div>
+      <SaveSettingsButton btnProps={{ onClick: save }} />
+      <BackToAccountButton />
+      <Popout note>
+        <p className="text-sm font-bold">{t('platformWhy')}</p>
+      </Popout>
+    </div>
+  )
+}