linked-data-browser 0.0.2 → 0.0.3

package/components/nav/DialogProvider.tsx

@@ -15,9 +15,10 @@ import {
   DialogDescription,
   DialogClose,
 } from '../ui/dialog';
-import { TextInput, View } from 'react-native';
+import { View } from 'react-native';
 import { Button } from '../ui/button';
 import { Text } from '../ui/text';
+import { Input } from '../ui/input';
 
 type DialogOptions =
   | { type: 'confirm'; title: string; message?: string }
@@ -112,7 +113,7 @@ export const DialogProvider: React.FC<{ children: React.ReactNode }> = ({
 
           {options?.type === 'prompt' && (
             <View className="my-2">
-              <TextInput
+              <Input
                 value={inputValue}
                 onChangeText={setInputValue}
                 placeholder="Enter text..."

package/components/nav/Layout.tsx

@@ -16,6 +16,7 @@ import { Header } from './header/Header';
 import { View } from 'react-native';
 import { useValidView, ValidViewProvider } from './useValidView';
 import { DialogProvider } from './DialogProvider';
+import { useSolidAuth } from '@ldo/solid-react';
 
 export const ValidViewContext = createContext<{
   validViews: ResourceViewConfig[];
@@ -25,6 +26,12 @@ export const ValidViewContext = createContext<{
 }>({});
 
 export const Layout: FunctionComponent = () => {
+  const { ranInitialAuthCheck } = useSolidAuth();
+
+  if (!ranInitialAuthCheck) {
+    return <></>;
+  }
+
   return (
     <DialogProvider>
       <ValidViewProvider>

package/components/nav/header/AvatarMenu.tsx

@@ -1,62 +1,86 @@
+import {
+  useLdo,
+  useResource,
+  useSolidAuth,
+  useSubject,
+} from '@ldo/solid-react';
 import React from 'react';
-
 import { FunctionComponent } from 'react';
-import { StyleSheet } from 'react-native';
+import { View } from 'react-native';
+import { SolidProfileShapeShapeType } from '../../../.ldo/profile.shapeTypes';
+import { Avatar, AvatarFallback, AvatarImage } from '../../ui/avatar';
+import { Text } from '../../ui/text';
+import { Button } from '../../ui/button';
+import { ThemeToggleMenu } from './ThemeToggleMenu';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../../ui/dropdown-menu';
+import { User } from '../../../lib/icons/User';
+import { LogOut } from '../../../lib/icons/LogOut';
+import { useTargetResource } from '../../TargetResourceProvider';
 
 export const AvatarMenu: FunctionComponent = () => {
-  return <></>;
-  // const [menuVisible, setMenuVisible] = useState(false);
-  // const { session, logout } = useSolidAuth();
-  // // TODO: Use WebId Resource to render a skeleton loader
-  // const webIdResource = useResource(session.webId);
-  // const profile = useSubject(SolidProfileShapeShapeType, session.webId);
-  // const renderAvatar = () => (
-  //   <TouchableWithoutFeedback onPress={() => setMenuVisible(true)}>
-  //     <Avatar
-  //       source={{ uri: 'https://api.lorem.space/image/face?w=150&h=150' }}
-  //     />
-  //   </TouchableWithoutFeedback>
-  // );
-  // return (
-  //   <Popover
-  //     anchor={renderAvatar}
-  //     visible={menuVisible}
-  //     placement="bottom end"
-  //     onBackdropPress={() => setMenuVisible(false)}
-  //     style={styles.popover}
-  //   >
-  //     <Layout>
-  //       <View style={styles.profileHeader}>
-  //         <Avatar
-  //           size="giant"
-  //           source={{ uri: 'https://api.lorem.space/image/face?w=150&h=150' }}
-  //         />
-  //         <View style={styles.profileText}>
-  //           <Text category="h6">{profile?.fn || ''}</Text>
-  //           <Button size="tiny">Edit your profile</Button>
-  //         </View>
-  //       </View>
-  //       <Divider />
-  //       <ThemeToggleMenu />
-  //       <Divider />
-  //       <MenuItem
-  //         onPress={logout}
-  //         title="Log Out"
-  //         accessoryLeft={(props) => <Icon {...props} name="log-out" />}
-  //       />
-  //     </Layout>
-  //   </Popover>
-  // );
-};
+  const { dataset } = useLdo();
+  const { session, logout } = useSolidAuth();
+  // TODO: Use WebId Resource to render a skeleton loader
+  const webIdResource = useResource(session.webId);
+  const profile = useSubject(SolidProfileShapeShapeType, session.webId);
+  const { navigateTo } = useTargetResource();
+
+  if (!session.webId) return <></>;
 
-const styles = StyleSheet.create({
-  popover: { width: 300, overflow: 'hidden', borderRadius: 12 },
-  profileHeader: { padding: 8, flexDirection: 'row', alignItems: 'center' },
-  profileText: {
-    marginLeft: 8,
-    justifyContent: 'space-around',
-    alignSelf: 'stretch',
-    alignItems: 'flex-start',
-    flex: 1,
-  },
-});
+  console.log(profile?.['@id']);
+  console.log(profile?.hasPhoto?.['@id']);
+  console.log(webIdResource?.isLoading());
+  console.log(dataset.toString());
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button key="setMemu" variant="ghost" className="w-10">
+          <Avatar alt={profile?.fn ? `${profile.fn}'s Avatar` : ''}>
+            <AvatarImage source={{ uri: profile?.hasPhoto?.['@id'] }} />
+            <AvatarFallback>
+              <Text>
+                <User />
+              </Text>
+            </AvatarFallback>
+          </Avatar>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-64 native:w-72 mr-2 mt-2">
+        <View className="p-2 flex-row items-center">
+          <Avatar
+            alt={profile?.fn ? `${profile.fn}'s Avatar` : ''}
+            className="w-20 h-20"
+          >
+            <AvatarImage source={{ uri: profile?.hasPhoto?.['@id'] }} />
+            <AvatarFallback>
+              <Text>
+                <User />
+              </Text>
+            </AvatarFallback>
+          </Avatar>
+          <View className="ml-2">
+            <Text>{profile?.fn || ''}</Text>
+            <Button size="sm" onPress={() => navigateTo(session.webId ?? '')}>
+              <Text>Edit your profile</Text>
+            </Button>
+          </View>
+        </View>
+        <DropdownMenuSeparator />
+        <ThemeToggleMenu />
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onPress={logout}>
+          <Text className="flex flex-row gap-1 items-center">
+            <LogOut /> Log Out
+          </Text>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};

package/lib/icons/LogOut.tsx

@@ -0,0 +1,4 @@
+import { LogOut } from 'lucide-react-native';
+import { iconWithClassName } from './iconWithClassName';
+iconWithClassName(LogOut);
+export { LogOut };

package/lib/icons/User.tsx

@@ -0,0 +1,4 @@
+import { User } from 'lucide-react-native';
+import { iconWithClassName } from './iconWithClassName';
+iconWithClassName(User);
+export { User };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "linked-data-browser",
   "main": "index.js",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "scripts": {
     "dev:ios": "expo start -c --ios",
     "dev:web": "concurrently \"npm run solid-server\" \"expo start -c --web\"",

package/resourceViews/RawCode/RawCodeView.tsx

@@ -16,6 +16,7 @@ export const RawCodeView: FunctionComponent = () => {
   const { targetUri } = useTargetResource();
   const { fetch } = useSolidAuth();
   const [content, setContent] = useState<string>('');
+  const [contentType, setContentType] = useState<string>('');
 
   // Independently fetch the target resource, so we have the raw turtle
   const fetchContent = useCallback(async () => {
@@ -27,12 +28,16 @@ export const RawCodeView: FunctionComponent = () => {
       });
     }
     setContent(await response.text());
+    setContentType(response.headers.get('content-type') ?? '');
   }, [fetch, targetUri]);
 
   const submitChanges = useCallback(async () => {
     if (!targetUri) return;
     const response = await fetch(targetUri, {
       method: 'put',
+      headers: {
+        'content-type': contentType,
+      },
       body: content,
     });
     if (response.status !== 205) {
@@ -44,7 +49,7 @@ export const RawCodeView: FunctionComponent = () => {
       title: `Document Saved`,
     });
     await fetchContent();
-  }, [content, fetch, fetchContent, targetUri]);
+  }, [content, contentType, fetch, fetchContent, targetUri]);
 
   useEffect(() => {
     fetchContent();