Add children in data view

Author: joepio

CHANGELOG.md

@@ -2,7 +2,7 @@
 
 This changelog covers all three packages, as they are (for now) updated as a whole
 
-## UNRELEASED
+## v0.35.0
 
 ### @tomic/browser
 
@@ -28,7 +28,7 @@ This changelog covers all three packages, as they are (for now) updated as a who
 - Add `buildSearchSubject` in `search.ts` which allows you to build full text search queries to send to Atomic-Server.
 - Add `importJSONADString` function, allowing you to import resources from external sources.
 
-## v0.35.0
+## v0.35.0-beta.1
 
 ### @tomic/react
 

data-browser/src/components/ChildrenList.tsx

@@ -0,0 +1,36 @@
+import { useChildren } from '@tomic/react';
+import React from 'react';
+import { FaCaretDown, FaCaretRight } from 'react-icons/fa';
+import { ResourceInline } from '../views/ResourceInline';
+import { Button } from './Button';
+import { Card, CardInsideFull, CardRow } from './Card';
+
+export function Childrenlist({ resource }) {
+  const [show, setShow] = React.useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setShow(!show)}>
+        {show ? <FaCaretDown /> : <FaCaretRight />}
+        {' children'}
+      </Button>
+      {show && <ChildrenList resource={resource} />}
+    </>
+  );
+}
+
+function ChildrenList({ resource }) {
+  const children = useChildren(resource);
+
+  return (
+    <Card>
+      <CardInsideFull>
+        {children.map(s => (
+          <CardRow key={s}>
+            <ResourceInline subject={s} />
+          </CardRow>
+        ))}
+      </CardInsideFull>
+    </Card>
+  );
+}

data-browser/src/routes/DataRoute.tsx

@@ -18,6 +18,7 @@ import { CodeBlock } from '../components/CodeBlock';
 import { Title } from '../components/Title';
 import { Row } from '../components/Row';
 import { ErrorLook } from '../components/ErrorLook';
+import { Childrenlist as ChildrenCard } from '../components/ChildrenList';
 
 /** Renders the data of some Resource */
 function Data(): JSX.Element {
@@ -77,6 +78,7 @@ function Data(): JSX.Element {
         <AtomicLink subject={subject}>{subject}</AtomicLink>
       </PropValRow>
       <AllProps resource={resource} editable columns />
+      <ChildrenCard resource={resource} />
       {resource.getCommitBuilder().hasUnsavedChanges() ? (
         <>
           <h2>⚠️ contains uncommitted changes</h2>

data-browser/src/views/ImporterPage.tsx

@@ -28,6 +28,7 @@ export function ImporterPage({ resource }: ImporterPageProps) {
   const [overwriteOutside, setOverwriteOutside] = useState(false);
   const [parent, setParent] = useCurrentSubject();
   const resourceByS = useResource(parent);
+  const [isImporting, setIsImporting] = useState(false);
 
   resource = resourceByS || resource;
 
@@ -36,13 +37,16 @@ export function ImporterPage({ resource }: ImporterPageProps) {
 
   const handleImport = useCallback(async () => {
     try {
+      setIsImporting(true);
       await importJsonAdString(store, jsonAd, {
         overwriteOutside,
         parent: parent!,
       });
       toast.success('Imported!');
+      setIsImporting(false);
     } catch (e) {
       toast.error(e.message);
+      setIsImporting(false);
     }
   }, [parent, jsonAd, overwriteOutside, store]);
 
@@ -112,7 +116,7 @@ export function ImporterPage({ resource }: ImporterPageProps) {
             disabled={!parent}
             onClick={handleImport}
           >
-            Send JSON
+            {isImporting ? 'Importing...' : 'Send JSON'}
           </Button>
         )}
       </Column>

lib/src/endpoints.ts

@@ -37,6 +37,7 @@ export async function importJsonAdString(
 ) {
   const url = addParams(store.getServerUrl() + urls.endpoints.import, {
     parent: opts.parent,
+    'overwrite-outside': opts.overwriteOutside ? 'true' : 'false',
   });
 
   return resourceToErr(await store.postToServer(url, jsonAdString));