unigraph-dev · thesophiaxu · Mar 31, 2022 · Mar 31, 2022 · Mar 31, 2022 · Mar 31, 2022
diff --git a/packages/default-packages/unigraph.core/package.json b/packages/default-packages/unigraph.core/package.json
@@ -25,6 +25,10 @@
                 "id": "view",
                 "src": "schemas/view.json"
             },
+            {
+                "id": "settings_page",
+                "src": "schemas/settings_page.json"
+            },
             {
                 "id": "conditional_view",
                 "src": "schemas/conditional_view.json"

diff --git a/packages/default-packages/unigraph.core/schemas/settings_page.json b/packages/default-packages/unigraph.core/schemas/settings_page.json
@@ -0,0 +1,55 @@
+{
+    "dgraph.type": "Type",
+    "_name": "Settings page",
+    "_icon": "%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M6 2C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H12V20H6V4H13V9H18V12H20V8L14 2M18 14C17.87 14 17.76 14.09 17.74 14.21L17.55 15.53C17.25 15.66 16.96 15.82 16.7 16L15.46 15.5C15.35 15.5 15.22 15.5 15.15 15.63L14.15 17.36C14.09 17.47 14.11 17.6 14.21 17.68L15.27 18.5C15.25 18.67 15.24 18.83 15.24 19C15.24 19.17 15.25 19.33 15.27 19.5L14.21 20.32C14.12 20.4 14.09 20.53 14.15 20.64L15.15 22.37C15.21 22.5 15.34 22.5 15.46 22.5L16.7 22C16.96 22.18 17.24 22.35 17.55 22.47L17.74 23.79C17.76 23.91 17.86 24 18 24H20C20.11 24 20.22 23.91 20.24 23.79L20.43 22.47C20.73 22.34 21 22.18 21.27 22L22.5 22.5C22.63 22.5 22.76 22.5 22.83 22.37L23.83 20.64C23.89 20.53 23.86 20.4 23.77 20.32L22.7 19.5C22.72 19.33 22.74 19.17 22.74 19C22.74 18.83 22.73 18.67 22.7 18.5L23.76 17.68C23.85 17.6 23.88 17.47 23.82 17.36L22.82 15.63C22.76 15.5 22.63 15.5 22.5 15.5L21.27 16C21 15.82 20.73 15.65 20.42 15.53L20.23 14.21C20.22 14.09 20.11 14 20 14M19 17.5C19.83 17.5 20.5 18.17 20.5 19C20.5 19.83 19.83 20.5 19 20.5C18.16 20.5 17.5 19.83 17.5 19C17.5 18.17 18.17 17.5 19 17.5Z' /%3E%3C/svg%3E",
+    "_definition": {
+        "type": { "unigraph.id": "$/composer/Object" },
+        "_parameters": {
+            "_indexedBy": { "unigraph.id": "$/primitive/string" }
+        },
+        "_properties": [
+            {
+                "_key": "title",
+                "_definition": {
+                    "type": { "unigraph.id": "$/primitive/string" }
+                },
+                "_indexAs": "name"
+            },
+            {
+                "_key": "subtitle",
+                "_definition": {
+                    "type": { "unigraph.id": "$/primitive/string" }
+                }
+            },
+            {
+                "_key": "page",
+                "_definition": {
+                    "type": { "unigraph.id": "$/schema/view" }
+                }
+            },
+            {
+                "_key": "children",
+                "_definition": {
+                    "type": {
+                        "unigraph.id": "$/composer/Array"
+                    },
+                    "_parameters": {
+                        "_element": {
+                            "type": { "unigraph.id": "$/composer/Union" },
+                            "_parameters": {
+                                "_definitions": [
+                                    {
+                                        "type": { "unigraph.id": "$/schema/subentity" }
+                                    },
+                                    {
+                                        "type": { "unigraph.id": "$/schema/interface/semantic" }
+                                    }
+                                ]
+                            }
+                        }
+                    }
+                }
+            }
+        ]
+    }
+}
diff --git a/packages/default-packages/unigraph.obsidian_sync/entities/settings_page_obsidian_sync.json b/packages/default-packages/unigraph.obsidian_sync/entities/settings_page_obsidian_sync.json
@@ -0,0 +1,10 @@
+{
+    "type": { "unigraph.id": "$/schema/settings_page" },
+    "title": "Obsidian sync settings",
+    "subtitle": "Setup Obsidian sync with Unigraph",
+    "page": {
+        "name": "Obsidian sync settings",
+        "env": "react-explorer",
+        "view": { "unigraph.id": "$./executable/settings-view-obsidian-sync" }
+    }
+}
diff --git a/packages/default-packages/unigraph.obsidian_sync/executables/obsidianSyncSettings.jsx b/packages/default-packages/unigraph.obsidian_sync/executables/obsidianSyncSettings.jsx
@@ -0,0 +1,122 @@
+const [pages, setPages] = React.useState([]);
+const tabContext = React.useContext(TabContext);
+
+const noteQuery = (uid) => `(func: uid(${uid})) {
+    _updatedAt
+    uid
+    _hide
+    <~_value> {
+        type { <unigraph.id> }
+        <unigraph.origin> @filter(NOT eq(_hide, true)) {
+            type { <unigraph.id> }
+            uid
+        }
+    }
+    <unigraph.origin> @filter(NOT eq(_hide, true)) {
+        type { <unigraph.id> }
+        uid
+    }
+    type {
+        uid
+        <unigraph.id>
+    }
+    _value {
+        uid
+        text {
+            uid
+            _value {
+                _value {
+                    <dgraph.type>
+                    uid type { uid <unigraph.id> }
+                    <_value.%>
+                }
+                uid type { uid <unigraph.id> }
+            }
+        }
+        name {
+            <_value.%>
+        }
+        content {
+            uid
+            _value {
+                uid
+                type { uid <unigraph.id> }
+            }
+        }
+        children {
+            uid
+            <_displayAs>
+            <_value[> {
+                uid
+                <_index> { uid <_value.#i> }
+                <_key>
+                <_value> @filter(uid_in(type, $unigraph.id{$/schema/subentity})) {
+                    _hide
+                    _value { uid _hide type {uid <unigraph.id>} }
+                    uid
+                    type { uid <unigraph.id> }
+                }
+                <_value> @filter(uid_in(type, $unigraph.id{$/schema/interface/semantic})) {
+                    _hide
+                    _value { uid type { uid <unigraph.id> } _stub: math(1) _value {
+                        name { <_value.%> }
+                    }}
+                    uid
+                    type { uid <unigraph.id> }
+                }
+            }
+        }
+    }
+}`;
+
+React.useEffect(() => {
+    const subsId = getRandomInt();
+
+    tabContext.subscribeToObject(
+        '$/entity/obsidian_synced_notes',
+        (synced) => {
+            const notes = (synced['_value['] || []).map((el) => el['_value']);
+            setPages(notes);
+        },
+        subsId,
+        {
+            queryFn: `(func: uid(QUERYFN_TEMPLATE)) {
+                uid
+            <_value[> {
+                <_value> {
+                  uid
+                  type { <unigraph.id> }
+                }
+              }
+        }`,
+        },
+    );
+
+    return () => tabContext.unsubscribe(subsId);
+}, []);
+
+return (
+    <div style={{ display: 'flex', flexDirection: 'row' }}>
+        <Typography variant="h4" gutterBottom>
+            Obsidian sync settings
+        </Typography>
+        <Typography variant="h5" gutterBottom>
+            Pages synced with Obsidian
+        </Typography>
+        <DynamicObjectListView
+            items={pages}
+            context={null}
+            subscribeOptions={{
+                queryAsType: '$/schema/note_block',
+                depth: 9,
+                queryFn: noteQuery,
+            }}
+            itemAdder={(uid) => {
+                unigraph.runExecutable('$/executable/update-uid-list', {
+                    uids: [uid],
+                    listUid: '$/entity/obsidian_synced_notes',
+                });
+            }}
+        />
+    </div>
+);
diff --git a/packages/default-packages/unigraph.obsidian_sync/package.json b/packages/default-packages/unigraph.obsidian_sync/package.json
@@ -19,6 +19,27 @@
                 "src": "executables/initializeObsidianSync.js",
                 "editable": true,
                 "name": "Initializes synced notes for Obsidian"
+            },
+            {
+                "id": "settings-view-obsidian-sync",
+                "env": "component/react-jsx",
+                "src": "executables/obsidianSyncSettings.jsx",
+                "editable": true,
+                "imports": [
+                    {
+                        "env": "npm",
+                        "package": "@mui/material",
+                        "import": "Typography",
+                        "as": "Typography"
+                    },
+                    {
+                        "env": "npm",
+                        "package": "@mui/material",
+                        "import": "Button",
+                        "as": "Button"
+                    }
+                ],
+                "name": "Obsidian sync settings view"
             }
         ],
         "entities": [
@@ -29,6 +50,10 @@
             {
                 "id": "obsidian_sync_resource",
                 "src": "entities/obsidian_sync_resource.json"
+            },
+            {
+                "id": "settings_page_obsidian_sync",
+                "src": "entities/settings_page_obsidian_sync.json"
             }
         ]
     }

diff --git a/packages/default-packages/unigraph.reddit/entities/reddit_post_view.json b/packages/default-packages/unigraph.reddit/entities/reddit_post_view.json
@@ -0,0 +1,6 @@
+{
+    "type": { "unigraph.id": "$/schema/object_view" },
+    "name": "Reddit post view",
+    "item_type": { "unigraph.id": "$/schema/reddit_post" },
+    "view": { "unigraph.id": "$./executable/reddit-post-view" }
+}
diff --git a/packages/default-packages/unigraph.reddit/entities/settingsPageReddit.json b/packages/default-packages/unigraph.reddit/entities/settingsPageReddit.json
@@ -0,0 +1,10 @@
+{
+    "type": { "unigraph.id": "$/schema/settings_page" },
+    "title": "Reddit settings",
+    "subtitle": "Connect your Reddit account to Unigraph",
+    "page": {
+        "name": "Reddit settings",
+        "env": "react-explorer",
+        "view": { "unigraph.id": "$./executable/settings-view-reddit" }
+    }
+}
diff --git a/packages/default-packages/unigraph.reddit/executables/redditPostView.jsx b/packages/default-packages/unigraph.reddit/executables/redditPostView.jsx
@@ -0,0 +1,119 @@
+const { data, callbacks, inline } = params;
+const [innerExpanded, setInnerExpanded] = React.useState(false);
+const hide = data.get('thumbnail').as('primitive') === 'self' && data.get('selftext').as('primitive') === '';
+
+const getThumbnail = (url) => {
+    if (url === 'image') {
+        return (
+            <Avatar variant="rounded">
+                <Image />
+            </Avatar>
+        );
+    }
+    if (url === 'default') {
+        return (
+            <Avatar variant="rounded">
+                <Link />
+            </Avatar>
+        );
+    }
+    if (url === 'self') {
+        return (
+            <Avatar variant="rounded">
+                <Chat />
+            </Avatar>
+        );
+    }
+    return <Avatar variant="rounded" src={url} />;
+};
+
+return (
+    <div style={{ display: 'flex' }}>
+        <div
+            style={{
+                alignSelf: 'baseline',
+                marginRight: '16px',
+                marginTop: '8px',
+            }}
+        >
+            <Badge
+                overlap="circular"
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'right',
+                }}
+                badgeContent={
+                    <Avatar
+                        style={{ height: '16px', width: '16px' }}
+                        alt="Reddit"
+                        src="https://www.redditstatic.com/desktop2x/img/favicon/apple-icon-57x57.png"
+                    />
+                }
+            >
+                {getThumbnail(data.get('thumbnail').as('primitive'))}
+            </Badge>
+        </div>
+
+        <div>
+            <Typography variant="body1" style={{ marginRight: '8px' }}>
+                {data.get('name').as('primitive')}
+            </Typography>
+            <div style={{ display: 'flex', color: 'gray' }}>
+                {innerExpanded ? (
+                    <RemoveCircle
+                        onClick={() => {
+                            setInnerExpanded(!innerExpanded);
+                        }}
+                        style={{
+                            alignSelf: 'center',
+                            marginRight: '8px',
+                            display: hide ? 'none' : '',
+                        }}
+                    />
+                ) : (
+                    <AddCircle
+                        onClick={() => {
+                            setInnerExpanded(!innerExpanded);
+                        }}
+                        style={{
+                            alignSelf: 'center',
+                            marginRight: '8px',
+                            display: hide ? 'none' : '',
+                        }}
+                    />
+                )}
+                <div>
+                    <Typography variant="body2">
+                        Submitted
+                        {Sugar.Date.relative(new Date(data._updatedAt || data._timestamp._updatedAt))} to r/
+                        {data.get('subreddit/name').as('primitive')}
+                    </Typography>
+                    <div
+                        style={{
+                            color: 'gray',
+                            textDecoration: 'underline',
+                            cursor: 'pointer',
+                        }}
+                        onClick={() => {
+                            if (callbacks?.removeFromContext && callbacks?.removeOnEnter) callbacks.removeFromContext();
+                            window.open(data.get('permalink').as('primitive'), '_blank');
+                        }}
+                    >
+                        Comment
+                    </div>
+                </div>
+            </div>
+            {innerExpanded ? (
+                <div>
+                    {data.get('selftext').as('primitive').length ? (
+                        <AutoDynamicView object={new UnigraphObject(data.get('selftext')._value._value)} />
+                    ) : (
+                        <img src={data.get('url').as('primitive')} style={{ maxWidth: '100%' }} alt="" />
+                    )}
+                </div>
+            ) : (
+                []
+            )}
+        </div>
+    </div>
+);