dailp-encoding/website/src/templates/editable-page.tsx at main · NEU-DSG/dailp-encoding · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
import React from "react"
import { Helmet } from "react-helmet"
import { fullWidth, paddedWidth } from "src/style/utils.css"
import Layout from "../layout"

interface Props {
  pageContext?: {
    id: string
  }
  data: any
}

const EditablePage = (props: Props) => (
  <Layout>
    <EditablePageContents {...props} />
  </Layout>
)
export const Page = EditablePage

export const EditablePageContents = (props: Props) => (
  <main className={paddedWidth}>
    <article className={fullWidth}>
      {/* <EditablePageInner {...props} /> */}
    </article>
  </main>
)

//const EditablePageInner = (props: Props) => {
//  const staticData = props.data.dailp.page
/* usePlugin(MarkdownFieldPlugin) */

//  const [data, form] = useGraphQLForm(
//    staticData,
//    Dailp.EditablePageDocument,
//    Dailp.NewPageDocument,
//    {
//      label: "Edit Page",
//      id: props.pageContext?.id,
//      variables: { id: props.pageContext?.id },
//      transformIn: ({ page: { body, ...page } }: any) => ({
//        ...page,
//        body:
//          body &&
//          body.map(({ __typename, ...block }: any) => ({
//            _template: __typename,
//            ...block,
//          })),
//      }),
//      transformOut: ({ body, id, ...page }: any) => ({
//        ...page,
//        _id: id,
//        body:
//          body &&
//          body.map(({ _template, ...block }: any) => ({
//            __typename: _template,
//            ...block,
//          })),
//      }),
//
//      fields: [
//        { name: "id", label: "Path", component: "text" },
//        { name: "title", label: "Title", component: "text" },
//        blocksField({
//          name: "body",
//          label: "Page Sections",
//        }),
//      ],
//    }
//  )
//
//  usePlugin(form)
//
//  return <PageContents page={data && data.body ? data : staticData} />
//}

const PageContents = (props: { page: any }) => (
  <>
    <Helmet title={props.page.title}>
      <meta name="robots" content="noindex" />
    </Helmet>
    <h1>{props.page.title}</h1>
    <BlocksRenderer children={props.page.body} />
  </>
)

const BlocksRenderer = (props: { children: any[] }) => (
  <>
    {props.children &&
      props.children.map((block, i) => (
        <BlockRenderer key={i} children={block} />
      ))}
  </>
)

const BlockRenderer = (props: { children: any }) => {
  const ty = getType(props.children)
  if (ty === "Markdown") {
    /* return <Markdown children={props.children.content} remarkPlugins={[gfm]} /> */
    return null
  } else {
    return null
  }
}

const getType = (obj: any) => {
  const ty = obj.__typename || obj._template
  if (ty.startsWith("Dailp_")) {
    return ty.substring(6)
  } else {
    return ty
  }
}

/* Page body will be JSON, like so:
   [{"type": "Markdown", "body": "..."},
    {"type": "Image", "url": "https://...", "max-height": 200}]
 */