linked-data-browser 0.0.1 → 0.0.3

package/README.md

@@ -1,3 +1,3 @@
 # Linked Data Browser (LDB)
 
-This codebase is for a data browser UI for Solid servers.
+This codebase is for a data browser UI for Solid servers.

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/infra/hosts

@@ -0,0 +1,2 @@
+[web]
+34.66.140.216 ansible_user=jackson

package/infra/hosts.example

@@ -0,0 +1,2 @@
+[web]
+your-server-ip ansible_user=ubuntu

package/infra/nginx.conf.j2

@@ -0,0 +1,12 @@
+server {
+  listen 80;
+  server_name {{ domain }};
+  location / {
+    proxy_pass http://localhost:3000;
+    proxy_http_version 1.1;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection 'upgrade';
+    proxy_set_header Host $host;
+    proxy_cache_bypass $http_upgrade;
+  }
+}

package/infra/playbook.yml

@@ -0,0 +1,77 @@
+- name: Deploy Node Git Server
+  hosts: web
+  become: yes
+
+  vars:
+    docker_image: "jaxoncreed/integration-pod:latest"
+
+  vars_files:
+    - secrets.yml
+
+  tasks:
+    - name: Install required packages
+      apt:
+        name:
+          - docker.io
+          - docker-compose
+          - nginx
+          - certbot
+          - python3-certbot-nginx
+        update_cache: yes
+
+    - name: Enable Docker service
+      systemd:
+        name: docker
+        enabled: yes
+        state: started
+
+    - name: Log in to Docker Hub
+      docker_login:
+        registry_url: https://index.docker.io/v1/
+        username: "{{ dockerhub_username }}"
+        password: "{{ dockerhub_password }}"
+
+    - name: Pull Docker image
+      docker_image:
+        name: "{{ docker_image }}"
+        source: pull
+
+    - name: Run container
+      docker_container:
+        name: server
+        image: "{{ docker_image }}"
+        state: started
+        restart_policy: always
+        ports:
+          - "3000:3000"
+
+    - name: Set up NGINX config
+      template:
+        src: nginx.conf.j2
+        dest: /etc/nginx/sites-available/server
+      notify:
+        - Reload nginx
+
+    - name: Enable site
+      file:
+        src: /etc/nginx/sites-available/server
+        dest: /etc/nginx/sites-enabled/server
+        state: link
+        force: true
+
+    - name: Remove default site
+      file:
+        path: /etc/nginx/sites-enabled/default
+        state: absent
+
+    - name: Obtain SSL cert
+      command: >
+        certbot --nginx -d {{ domain }} --non-interactive --agree-tos -m {{ email }}
+      args:
+        creates: "/etc/letsencrypt/live/{{ domain }}"
+
+  handlers:
+    - name: Reload nginx
+      service:
+        name: nginx
+        state: reloaded

package/infra/secrets.yml

@@ -0,0 +1,11 @@
+$ANSIBLE_VAULT;1.1;AES256
+66363662346539366434346433653035333336306162626463336363356639346663336438313331
+3066616236343234333865626233313230396661333865300a623962646230303839643136333039
+66323262396437616333613434303932343462366266323732633439356362373566313062313037
+6337366430376162340a323464316363366439663531373661343339303662633239343762643234
+32353164633332623839353562633932303162323535316665633936623638326234353035663638
+62303032393362623438303064653336343766663737353066656131386436613539353262343562
+61336563346561373762633839396163636530316239616561303338353135373137333235366332
+31383865393732366165393538333839623065336161336335353334393365323965363136333231
+62623635376134316366653630653037343133323566373335323430646362303031383036336139
+6266383137663536623064346636626436623333613566366233

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.1",
+  "version": "0.0.3",
   "scripts": {
     "dev:ios": "expo start -c --ios",
     "dev:web": "concurrently \"npm run solid-server\" \"expo start -c --web\"",
@@ -17,10 +17,10 @@
     "build": "npm run build:standalone && npm run build:server"
   },
   "dependencies": {
-    "@inrupt/solid-client-authn-browser": "^2.5.0",
-    "@ldo/connected-solid": "^1.0.0-alpha.26",
-    "@ldo/ldo": "^1.0.0-alpha.21",
-    "@ldo/solid-react": "^1.0.0-alpha.26",
+    "@inrupt/solid-client-authn-browser": "^3.0.0",
+    "@ldo/connected-solid": "^1.0.0-alpha.27",
+    "@ldo/ldo": "^1.0.0-alpha.27",
+    "@ldo/solid-react": "^1.0.0-alpha.27",
     "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-dropdown-menu": "^2.1.15",

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();