linked-data-browser 0.0.2 → 0.0.4

package/resourceViews/Profile/ProfileKnows.tsx

@@ -0,0 +1,65 @@
+import { Input } from '../../components/ui/input';
+import React, { FunctionComponent, useCallback, useState } from 'react';
+import { Plus } from '../../lib/icons/Plus';
+import { SolidProfileShape } from '.ldo/profile.typings';
+import { AgentInformation } from '../../components/sharing/agentPermissions/AgentInformation';
+import { View } from 'react-native';
+import { useChangeSetData } from '@ldo/react';
+import { SolidLeaf } from '@ldo/connected-solid';
+import { Button } from '../../components/ui/button';
+import { Trash } from '../../lib/icons/Trash';
+
+export interface ProfileKnowsProps {
+  resource: SolidLeaf;
+  profile: SolidProfileShape;
+  setProfile: useChangeSetData<SolidProfileShape, any>;
+}
+
+export const ProfileKnows: FunctionComponent<ProfileKnowsProps> = ({
+  resource,
+  profile,
+  setProfile,
+}) => {
+  console.log(profile.knows?.size);
+
+  const [newContact, setNewContact] = useState('');
+  const addNewContact = useCallback(() => {
+    setProfile(resource, (cProfile) => {
+      cProfile.knows?.add({ '@id': newContact });
+    });
+    setNewContact('');
+  }, [newContact, resource, setProfile]);
+
+  return (
+    <View className="gap-4">
+      <Input
+        placeholder="https://example.pod/john/profile/card#me"
+        label="New Contact WebId"
+        buttonRight={{
+          iconRight: <Plus />,
+          onPress: addNewContact,
+          variant: 'secondary',
+        }}
+        value={newContact}
+        onChangeText={setNewContact}
+        onSubmitEditing={addNewContact}
+      />
+      {profile.knows?.map((friend) => (
+        <AgentInformation
+          webId={friend['@id']}
+          accessoryRight={
+            <Button
+              variant="ghost"
+              iconRight={<Trash />}
+              onPress={() => {
+                setProfile(resource, (cProfile) => {
+                  cProfile.knows?.delete(friend);
+                });
+              }}
+            />
+          }
+        />
+      ))}
+    </View>
+  );
+};

package/resourceViews/Profile/ProfileView.tsx

@@ -0,0 +1,59 @@
+import { ScrollView, View } from 'react-native';
+import { Text } from '../../components/ui/text';
+import React, { FunctionComponent } from 'react';
+import { Input } from '../../components/ui/input';
+import { Separator } from '../../components/ui/separator';
+import { ProfileKnows } from './ProfileKnows';
+import { useViewContext } from 'components/useViewContext';
+import { SolidProfileShapeShapeType } from '.ldo/profile.shapeTypes';
+import { useChangeSubject, useResource } from '@ldo/solid-react';
+import { Button } from '../../components/ui/button';
+import { SolidLeaf } from '@ldo/connected-solid';
+
+export const ProfileView: FunctionComponent = () => {
+  const { targetUri } = useViewContext();
+
+  const profileResource = useResource(targetUri);
+  const [profile, setProfile, commitProfile, transactionDataset] =
+    useChangeSubject(SolidProfileShapeShapeType, targetUri);
+
+  if (
+    !targetUri ||
+    !profileResource ||
+    !profile ||
+    profileResource.type === 'InvalidIdentifierResource'
+  )
+    return <></>;
+
+  return (
+    <ScrollView contentContainerClassName="flex-row justify-center p-4">
+      <View className="max-w-[600px] flex-1 padding gap-4">
+        <Text variant="h1">Profile</Text>
+        <Input
+          placeholder="John Doe"
+          label="Name"
+          value={profile?.fn}
+          onChangeText={(text) => {
+            setProfile(profileResource, (cProfile) => {
+              cProfile!.fn = text;
+            });
+          }}
+        />
+        <Separator />
+        <Text variant="h2">Contacts</Text>
+        <ProfileKnows
+          profile={profile}
+          setProfile={setProfile}
+          resource={profileResource as SolidLeaf}
+        />
+        <Button
+          disabled={!transactionDataset.hasChanges()}
+          text="Update Profile"
+          className="self-end"
+          onPress={commitProfile}
+          isLoading={profileResource.isLoading()}
+        />
+      </View>
+    </ScrollView>
+  );
+};

package/resourceViews/RawCode/RawCodeView.tsx

@@ -5,21 +5,30 @@ import React, {
   useEffect,
   useState,
 } from 'react';
-import { useTargetResource } from '../../components/TargetResourceProvider';
 import { RawCodeEditor } from './RawCodeEditor';
 import { View } from 'react-native';
 import { Button } from '../../components/ui/button';
 import { Text } from '../../components/ui/text';
 import { Notifier } from 'react-native-notifier';
+import { useViewContext } from '../../components/useViewContext';
+import { LoadingBar } from '../../components/common/LoadingBar';
+import { Save } from "../../lib/icons/Save";
 
 export const RawCodeView: FunctionComponent = () => {
-  const { targetUri } = useTargetResource();
   const { fetch } = useSolidAuth();
   const [content, setContent] = useState<string>('');
+  const [contentType, setContentType] = useState<string>('');
+  const [didEdit, setDidEdit] = useState(false);
+  const { curViewConfig, targetResource } = useViewContext();
+  const [isFetching, setIsFetching] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+
+  const targetUri = targetResource?.uri;
 
   // Independently fetch the target resource, so we have the raw turtle
   const fetchContent = useCallback(async () => {
-    if (!targetUri) return;
+    if (!targetUri || curViewConfig.name !== 'rawCode') return;
+    setIsFetching(true);
     const response = await fetch(targetUri);
     if (response.status !== 200) {
       Notifier.showNotification({
@@ -27,24 +36,35 @@ export const RawCodeView: FunctionComponent = () => {
       });
     }
     setContent(await response.text());
-  }, [fetch, targetUri]);
+    setIsFetching(false);
+    setDidEdit(false);
+    setContentType(response.headers.get('content-type') ?? '');
+  }, [curViewConfig.name, fetch, targetUri]);
 
   const submitChanges = useCallback(async () => {
     if (!targetUri) return;
+    setIsSaving(true);
     const response = await fetch(targetUri, {
       method: 'put',
+      headers: {
+        'content-type': contentType,
+      },
       body: content,
     });
     if (response.status !== 205) {
       Notifier.showNotification({
         title: `Could save document. Recieved ${response.status}`,
       });
+      setIsSaving(false);
+      return;
     }
     Notifier.showNotification({
       title: `Document Saved`,
     });
     await fetchContent();
-  }, [content, fetch, fetchContent, targetUri]);
+    setIsSaving(false);
+    setDidEdit(false);
+  }, [content, contentType, fetch, fetchContent, targetUri]);
 
   useEffect(() => {
     fetchContent();
@@ -52,16 +72,22 @@ export const RawCodeView: FunctionComponent = () => {
 
   return (
     <View className="flex-1 relative">
+      <LoadingBar isLoading={isFetching || isSaving} />
       <RawCodeEditor
         value={content}
-        onChange={(value) => setContent(value ?? '')}
+        onChange={(value) => {
+          setDidEdit(true);
+          setContent(value ?? '');
+        }}
       />
       <Button
         className="absolute bottom-2 right-2 z-10"
         onPress={submitChanges}
-      >
-        <Text>Save Changes</Text>
-      </Button>
+        text="Save Changes"
+        iconLeft={<Save />}
+        isLoading={isSaving}
+        disabled={!didEdit || isSaving}
+      />
     </View>
   );
 };

package/test-server/server-config.json

@@ -1,6 +1,6 @@
 {
   "@context": [
-    "https://linkedsoftwaredependencies.org/bundles/npm/@solid/community-server/^7.0.0/components/context.jsonld"
+    "https://linkedsoftwaredependencies.org/bundles/npm/@solid/community-server/^8.0.0/components/context.jsonld"
   ],
   "import": [
     "css:config/app/init/default.json",

package/components/nav/useValidView.tsx

@@ -1,51 +0,0 @@
-import createContainer from 'constate';
-import React, { useEffect, useMemo, useState } from 'react';
-import { useDataBrowserConfig } from '../DataBrowser';
-import { useTargetResource } from '../TargetResourceProvider';
-import { ResourceViewConfig } from '../ResourceView';
-import { EyeOff } from '../../lib/icons/EyeOff';
-import { ErrorMessageResourceView } from './utilityResourceViews/ErrorMessageResourceView';
-
-export const [ValidViewProvider, useValidView] = createContainer(() => {
-  const { targetUri, targetResource } = useTargetResource();
-  const { views } = useDataBrowserConfig();
-
-  const validViews = useMemo(() => {
-    const noValidView: ResourceViewConfig = {
-      name: 'noValid',
-      displayName: 'No Valid View',
-      displayIcon: EyeOff,
-      view: () => (
-        <ErrorMessageResourceView
-          icon={EyeOff}
-          message="No Views are available to display this resource."
-        />
-      ),
-      canDisplay: () => false,
-    };
-    if (
-      !targetResource ||
-      !targetUri ||
-      targetResource.type === 'InvalidIdentifierResouce'
-    ) {
-      return [noValidView];
-    }
-    const potentialViews = views.filter((view) =>
-      view.canDisplay(targetUri, targetResource),
-    );
-    return potentialViews.length > 0 ? potentialViews : [noValidView];
-  }, [targetResource, targetUri, views]);
-
-  const [curViewConfig, setCurViewConfig] = useState<ResourceViewConfig>(
-    validViews[0],
-  );
-  useEffect(() => {
-    setCurViewConfig(validViews[0]);
-  }, [targetUri, validViews]);
-
-  return {
-    validViews,
-    curViewConfig,
-    setCurViewConfig,
-  };
-});