Add safeguards for future Resource addition (#55)

When adding a new Resource correctly (see comments in the resources.ts file)
the type system demands an entry for every components that does
type-based pattern matching on the Resource discriminated union members

Inspiration:
https://medium.com/@fillopeter/pattern-matching-with-typescript-done-right-94049ddd671c#809c

Limitations:
- the solution  doesn't check for excessive declarations / code handling
 a non-existing resource
- casting, casting everywhere, but we'll deal with this later
- two additional sets with Resource addition (aside from actually adding
the Resource)

I'm accepting the tradeof as adding Resources shouldn't be that common
and there is a comment in place to facilitate doing that correctly.
To the best of my knowledge this is the best that could be done

It actually allowed to simplify many mechanisms either directly (moving
the statically reflected type properties to the core domain) or
indirectly (I've realised that initial Formik fields can be simply the
resource object itself).

As a side note: I'm having second thoughts about choosing TypeScript for
this, as it clearly lacks the expressive power to implement such
features properly

Author: allgreed

src/App.tsx

@@ -1,4 +1,5 @@
-import { Text, Resource } from "./core/resources";
+// TODO: how to limit importing scope?
+import { Resource, Link, Text } from "./core/resources";
 import { Tree, makeTree, TreeNode, NodeID, serializeTree, deserializeTree } from "./core/tree";
 
 import ResourceEditor from "./ResourceEditor";
@@ -26,7 +27,8 @@ export default class App extends Component<{
     {
         super(props);
 
-        const ourTree = makeTree({content: "korzen", is_done: false});
+        // TODO: get rid of the casting
+        const ourTree = makeTree({__typename: "Text", content: "korzen", is_done: false} as Text);
 
         this.state= {
             chosenNode: ourTree.root.id,
@@ -181,28 +183,17 @@ function displayTree(t: Tree<Resource>, chosenNode: NodeID): ReactTreeGraphNode
 {
     function _displayTree(t: TreeNode<Resource>): ReactTreeGraphNode
     {
-        const resource_to_display = t.data;
-
-        let fuj;
-        // TODO: make this properly extendiable - maybe delegate?
-        if ("address" in resource_to_display)
-        {
-            fuj = resource_to_display.address;
-        }
-        else
-        {
-            fuj = (resource_to_display as Text).content;
-        }
-
         const selected = t.id === chosenNode ? {className: "selected"} : {}
+
         const result: ReactTreeGraphNode = {
-            name: fuj,
+            name: displayResource(t.data),
             id: t.id,
             children: [],
             textProps: selected,
             circleProps: selected,
         }
 
+        // terminate recursion
         if (t.children.length !== 0)
         {
             result.children = t.children.map(_displayTree)
@@ -213,3 +204,13 @@ function displayTree(t: Tree<Resource>, chosenNode: NodeID): ReactTreeGraphNode
 
     return _displayTree(t.root);
 }
+
+
+// TODO: get rid of the casting
+function displayResource(r: Resource): string
+{
+    return {
+        "Link": (r as unknown as Link).address,
+        "Text": (r as Text).content,
+    }[r.__typename];
+}

src/ResourceAdder.tsx

@@ -1,4 +1,5 @@
-import { Resource } from "./core/resources";
+// TODO: how to limit importing scope?
+import { Resource, ResourceTypeString, ResourceTypeStringValues, Link, Text } from "./core/resources";
 
 import React, { FunctionComponent } from "react";
 import { Formik, Form, Field } from "formik";
@@ -7,15 +8,12 @@ import { Formik, Form, Field } from "formik";
 import "./ResourceAdder.css";
 
 
-// TODO: is is possible to reflect this from Resource union given proper typenames on interfaces?
-type TypeString = "Link" | "Text";
-
 const ResourceAdder: React.FunctionComponent<{
     onAdd: (resource: Resource) => void,
 }> = (props) =>
     <Formik
         initialValues={{
-            typestring: "Link"
+            typestring: ResourceTypeStringValues[0]
         }}
         onSubmit={(values, _) => 
         {
@@ -30,22 +28,23 @@ const ResourceAdder: React.FunctionComponent<{
         }
         <Form translate="yes"> 
             <Field name="typestring" component="select">
-                <option value="Link">Link</option>
-                <option value="Text">Text</option>
+                {
+                    ResourceTypeStringValues
+                        .map(t => <option value={t}>{t}</option>)
+                }
             </Field>
-
             <button type="submit"> Dodaj </button>
         </Form>
     </Formik>
 
 export default ResourceAdder;
 
 
-// TODO: make this a field on a resource
-function default_for_typestring(t: TypeString): Resource
+// TODO: get rid of the casting
+function default_for_typestring(t: ResourceTypeString): Resource
 {
     return {
-        "Link": { address: "", is_done: false },
-        "Text": { content: "", is_done: false },
+        "Link": { __typename: "Link", address: "", is_done: false } as Link,
+        "Text": { __typename: "Text", content: "", is_done: false } as Text,
     }[t];
 }

src/ResourceEditor.tsx

@@ -16,13 +16,15 @@ const ResourceEditor: React.FunctionComponent<{
 }> = (props) =>
     <Formik
         initialValues={
-            initial_fields_for_resource(props.resource)
+            props.resource
         }
         onSubmit={(values, actions) =>
         {
             const resource = {
                 ...values,
-                is_done: false,
+                // TODO: remove this after #35
+                is_done: props.resource.is_done,
+                __typename: props.resource.__typename,
             };
 
             props.onEditonCommit(resource as any);
@@ -43,45 +45,18 @@ const ResourceEditor: React.FunctionComponent<{
 export default ResourceEditor;
 
 
-// TODO: use reflection instead of hardcode
 // TODO: is the filedset a good idea here?
+// TODO: dry-ify this a bit
 function resource_to_fields(r: Resource): Array<JSX.Element>
 {
-    return [
-        {
-            property: "address",
-            jsx: <fieldset>
-                <label className="file-uploader-label">address</label>
-                <Field name="address" />
-            </fieldset>
-        },
-        {
-            property: "content",
-            jsx: <fieldset>
-                <label className="file-uploader-label">content</label>
-                <Field name="content" />
-            </fieldset>
-        },
-    ]
-        .filter(x => x.property in r)
-        .map(x => x.jsx)
-    ;
-}
-
-// TODO: use reflection instead of hardcode
-// TODO: return type will actually be a Resource 0.o
-function initial_fields_for_resource(r: Resource): object
-{
-    return [
-        "address",
-        "content",
-    ]
-        .filter(x => x in r)
-        .reduce((obj, prop) =>
-        {
-            // TODO: do something about the types
-            (obj as any)[prop] = (r as any)[prop];
-            return obj;
-        }, {})
-    ;
+    return {
+        "Link": [<fieldset>
+            <label className="file-uploader-label">address</label>
+            <Field name="address" />
+        </fieldset>],
+        "Text": [<fieldset>
+            <label className="file-uploader-label">content</label>
+            <Field name="content" />
+        </fieldset>],
+    }[r.__typename];
 }

src/core/resources.ts

@@ -1,16 +1,28 @@
 export interface Link {
+    __typename: "Link";
     address: string;
     is_done: boolean;
 }
 
 export interface Text {
+    __typename: "Text";
     content: string;
     is_done: boolean;
-    // TODO: this is an enum, not a boolean
+    // TODO: is_done => status ; boolean => enum
 }
+// when adding a new Resource please remember to add it to Resource union
+// and ResourceTypeStringValues array
 
 // TODO: add a null resource - for the root
 
+
 export type Resource = Link | Text;
+export type ResourceTypeString = Resource["__typename"];
+
+export const ResourceTypeStringValues: Array<ResourceTypeString> = [
+    "Link",
+    "Text",
+];
+
 
 export default {};