](https://nlnet.nl/)
+[
](https://nlnet.nl/)
+
+## Liscense
+MIT
\ No newline at end of file
diff --git a/packages/demo-react/craco.config.js b/packages/demo-react/craco.config.js
new file mode 100644
index 0000000..6ab610a
--- /dev/null
+++ b/packages/demo-react/craco.config.js
@@ -0,0 +1,28 @@
+// this file overrides the default CRA configurations (webpack, eslint, babel, etc)
+// Ingnore because config scripts can't use the import variable
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
+
+module.exports = {
+ webpack: {
+ configure: (config) => {
+ // Remove ModuleScopePlugin which throws when we try to import something
+ // outside of src/.
+ config.resolve.plugins.pop();
+
+ // Resolve the path aliases.
+ config.resolve.plugins.push(new TsconfigPathsPlugin());
+
+ // Let Babel compile outside of src/.
+ const oneOfRule = config.module.rules.find((rule) => rule.oneOf);
+ const tsRule = oneOfRule.oneOf.find((rule) =>
+ rule.test.toString().includes("ts|tsx"),
+ );
+
+ tsRule.include = undefined;
+ tsRule.exclude = /node_modules/;
+
+ return config;
+ },
+ },
+};
diff --git a/packages/demo-react/package.json b/packages/demo-react/package.json
new file mode 100644
index 0000000..3eaec63
--- /dev/null
+++ b/packages/demo-react/package.json
@@ -0,0 +1,50 @@
+{
+ "name": "@ldo/demo-react",
+ "version": "0.0.1-alpha.19",
+ "dependencies": {
+ "@inrupt/solid-client-authn-browser": "^2.0.0",
+ "@ldo/solid-react": "^0.0.1-alpha.19",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-router-dom": "^6.15.0",
+ "react-scripts": "5.0.1",
+ "uuid": "^9.0.1"
+ },
+ "scripts": {
+ "start": "craco start",
+ "build": "craco build",
+ "eject": "react-scripts eject",
+ "lint": "eslint src/** --fix --no-error-on-unmatched-pattern",
+ "build:ldo": "ldo build --input src/.shapes --output src/.ldo"
+ },
+ "eslintConfig": {
+ "extends": [
+ "react-app",
+ "react-app/jest"
+ ]
+ },
+ "browserslist": {
+ "production": [
+ ">0.2%",
+ "not dead",
+ "not op_mini all"
+ ],
+ "development": [
+ "last 1 firefox version",
+ "last 1 chrome version",
+ "last 1 safari version"
+ ]
+ },
+ "devDependencies": {
+ "@craco/craco": "^7.1.0",
+ "@ldo/cli": "^0.0.1-alpha.19",
+ "@types/jsonld": "^1.5.9",
+ "@types/react": "^18.2.21",
+ "@types/shexj": "^2.1.4",
+ "tsconfig-paths-webpack-plugin": "^4.1.0"
+ },
+ "gitHead": "4548985c0de9b0ec83cf5ee93f2d7c1ca2c1b8d8",
+ "publishConfig": {
+ "access": "public"
+ }
+}
diff --git a/packages/demo-react/public/index.html b/packages/demo-react/public/index.html
new file mode 100644
index 0000000..127f789
--- /dev/null
+++ b/packages/demo-react/public/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+
+
+
+
+ {/* Get the user's webId from session.webId */}
+
+ );
+ }
+ return ;
+};
+
+const Profile: FunctionComponent = () => {
+ const { session } = useSolidAuth();
+ const resource = useResource(session.webId);
+ const profile = useSubject(SolidProfileShapeShapeType, session.webId);
+
+ const onNameChange = useCallback(async (e) => {
+ // Ensure that the
+ if (!profile || !resource) return;
+ const cProfile = changeData(profile, resource);
+ cProfile.name = e.target.value;
+ await commitData(cProfile);
+ }, []);
+
+ return ;
+};
+
+export default App;
diff --git a/packages/demo-react/src/Header.tsx b/packages/demo-react/src/Header.tsx
new file mode 100644
index 0000000..49f751d
--- /dev/null
+++ b/packages/demo-react/src/Header.tsx
@@ -0,0 +1,54 @@
+import { useState } from "react";
+import type { FunctionComponent } from "react";
+import React from "react";
+import { useResource, useSolidAuth, useSubject } from "@ldo/solid-react";
+import { SolidProfileShapeShapeType } from "./.ldo/solidProfile.shapeTypes";
+import { Link } from "react-router-dom";
+
+const DEFAULT_ISSUER = "https://solidweb.me";
+
+export const LoggedInHeader: FunctionComponent<{ webId: string }> = ({
+ webId,
+}) => {
+ const webIdResource = useResource(webId);
+ const profile = useSubject(SolidProfileShapeShapeType, webId);
+ const { logout } = useSolidAuth();
+ return (
+ <>
+
+ Logged in as {webId}. Welcome{" "}
+ {webIdResource.isReading() ? "LOADING NAME" : profile.fn}
+
+
+
+ );
+};
+
+export const Header: FunctionComponent = () => {
+ const [issuer, setIssuer] = useState(DEFAULT_ISSUER);
+ const { login, signUp, session } = useSolidAuth();
+ return (
+ Logged in as {session.webId}
+ {/* Use the logout function to log out */} + +
+ {session.isLoggedIn ? (
+
+ + Blog + {" "} + Profile +
+
+
+
+ {session.isLoggedIn ?
+
+ );
+};
+
+const router = createBrowserRouter([
+ {
+ element: +
Loading
; + } + returnLoading...
; + } + if (mainContainer.isDoingInitialFetch()) { + returnLoading Blob
; + } + + return ( +
+
+ {mainContainer.children().map((child) => ( +
+
+
+ ))}
+
+ );
+};
diff --git a/packages/demo-react/src/blog/MakePost.tsx b/packages/demo-react/src/blog/MakePost.tsx
new file mode 100644
index 0000000..f782b95
--- /dev/null
+++ b/packages/demo-react/src/blog/MakePost.tsx
@@ -0,0 +1,92 @@
+import React, { useCallback, useState, useRef } from "react";
+import type { FunctionComponent, FormEvent } from "react";
+import type { Container, Leaf, LeafUri } from "@ldo/solid";
+import { v4 } from "uuid";
+import { useLdo, useSolidAuth } from "@ldo/solid-react";
+import { PostShShapeType } from "../.ldo/post.shapeTypes";
+
+export const MakePost: FunctionComponent<{ mainContainer: Container }> = ({
+ mainContainer,
+}) => {
+ const [message, setMessage] = useState("");
+ const [selectedFile, setSelectedFile] = useState
+
+ + {mainContainer.children().map((child) => ( +
+
Loading Post...
; + } else if (mediaResource.status.isError) { + returnError: {mediaResource.status.message}
; + } else if (mediaResource.isAbsent()) { + returnPost does not exist.
; + } + + return ( +
+ {post.publisher?.["@id"] &&
+ );
+};
diff --git a/packages/demo-react/src/post/PostPage.tsx b/packages/demo-react/src/post/PostPage.tsx
new file mode 100644
index 0000000..bc5e144
--- /dev/null
+++ b/packages/demo-react/src/post/PostPage.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import type { FunctionComponent } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { Post } from "./Post";
+
+export const PostPage: FunctionComponent = () => {
+ const navigate = useNavigate();
+ const { uri } = useParams();
+
+ return (
+ navigate(`/media/${encodeURIComponent(uri)}`)}
+ style={{ cursor: "pointer" }}
+ >
+ {post.articleBody && ![]({post.image["@id"]})
}
+
+
+ {post.articleBody}
} + {post.image &&
+
+ {uri ?
+ );
+};
diff --git a/packages/demo-react/src/post/PostedBy.tsx b/packages/demo-react/src/post/PostedBy.tsx
new file mode 100644
index 0000000..e11fda1
--- /dev/null
+++ b/packages/demo-react/src/post/PostedBy.tsx
@@ -0,0 +1,16 @@
+import type { FunctionComponent } from "react";
+import React from "react";
+import { useResource, useSubject } from "@ldo/solid-react";
+import { SolidProfileShapeShapeType } from "../.ldo/solidProfile.shapeTypes";
+
+export const PostedBy: FunctionComponent<{ webId: string }> = ({ webId }) => {
+ const webIdResource = useResource(webId);
+ const profile = useSubject(SolidProfileShapeShapeType, webId);
+
+ if (webIdResource.isReading()) {
+ return No URI Present
} +Loading Profile...
; + } else if (webIdResource.status.isError) { + returnError: {webIdResource.status.message}
; + } + returnPosted By: {profile.fn}
; +}; diff --git a/packages/demo-react/src/profile/Profile.tsx b/packages/demo-react/src/profile/Profile.tsx new file mode 100644 index 0000000..ae57f90 --- /dev/null +++ b/packages/demo-react/src/profile/Profile.tsx @@ -0,0 +1,34 @@ +import { + useLdo, + useResource, + useSolidAuth, + useSubject, +} from "@ldo/solid-react"; +import type { ChangeEvent } from "react"; +import React, { useCallback, type FunctionComponent } from "react"; +import { SolidProfileShapeShapeType } from "../.ldo/solidProfile.shapeTypes"; + +export const Profile: FunctionComponent = () => { + const { session } = useSolidAuth(); + const profile = useSubject(SolidProfileShapeShapeType, session.webId); + const webIdResource = useResource(session.webId); + const { changeData, commitData } = useLdo(); + + const onNameChange = useCallback( + async (e: ChangeEvent