inrupt / solid-ui-react-demo Goto Github PK

Home Page: https://solid-ui-react-example.docs.inrupt.com/

License: MIT License

JavaScript 91.59% TypeScript 3.53% CSS 4.88%

solid-ui-react-demo's Introduction

This is an example project to demonstrate using the Inrupt Solid React SDK to build a web application, using Next.js and typescript. The example project is a sample application for editing user profile. You can play with the application at https://solid-ui-react-example.docs.inrupt.com/.

Getting Started

To modify the application:

Clone the repo.
Run the development server:
```
 npm ci && npm run dev
 # or
 yarn dev
```
Open http://localhost:3000 with your browser.
You can start editing the source files. The application auto-updates as you edit the source files in pages and components folders.

See also the Sample Application Documentation.

Learn More

To learn more about the Inrupt Solid React SDK, take a look at the following resources:

To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy this app is to use the Vercel.

Check out the Next.js deployment documentation for more details.

solid-ui-react-demo's People

Contributors

Stargazers

Watchers

Forkers

khanhnpt2127 paul-altyfc wolfie933 scotty014 bbc e1019 edwardsph yetanotherjonwilson technykim diego40g mhz28 nmgzzy pstreich jeffryhw

solid-ui-react-demo's Issues

Error: Storing the Resource at [] failed: [401] [Unauthorized]

(base) raphy@pc:~$ git clone https://github.com/inrupt/solid-ui-react-demo.git
Cloning into 'solid-ui-react-demo'...
remote: Enumerating objects: 385, done.
remote: Counting objects: 100% (385/385), done.
remote: Compressing objects: 100% (260/260), done.
remote: Total 385 (delta 184), reused 265 (delta 100), pack-reused 0
Receiving objects: 100% (385/385), 2.17 MiB | 3.29 MiB/s, done.
Resolving deltas: 100% (184/184), done.
(base) raphy@pc:~$ cd solid-ui-react-demo/



(base) raphy@pc:~/solid-ui-react-demo$ yarn
yarn install v1.22.10
info No lockfile found.
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
warning @inrupt/lit-generated-vocab-common > @types/[email protected]: This is a stub types definition. rdf-js provides its own type definitions, so you do not need this installed.
warning @inrupt/lit-generated-vocab-common > @rdfjs/data-model > @types/[email protected]: This is a stub types definition. rdf-js provides its own type definitions, so you do not need this installed.
warning @inrupt/solid-ui-react > @storybook/builder-webpack5 > webpack-hot-middleware > [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
warning @inrupt/solid-ui-react > @storybook/builder-webpack5 > @storybook/core-common > webpack > watchpack > watchpack-chokidar2 > [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning @inrupt/solid-ui-react > @storybook/builder-webpack5 > @storybook/core-common > webpack > watchpack > watchpack-chokidar2 > chokidar > [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
warning @inrupt/solid-ui-react > @storybook/builder-webpack5 > @storybook/core-common > webpack > node-libs-browser > url > [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
warning @inrupt/solid-ui-react > @storybook/builder-webpack5 > react-dev-utils > fork-ts-checker-webpack-plugin > micromatch > snapdragon > source-map-resolve > [email protected]: https://github.com/lydell/resolve-url#deprecated
warning @inrupt/solid-ui-react > @storybook/builder-webpack5 > react-dev-utils > fork-ts-checker-webpack-plugin > micromatch > snapdragon > source-map-resolve > [email protected]: Please see https://github.com/lydell/urix#deprecated
warning next > native-url > [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
warning [email protected]: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
[2/4] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > @inrupt/[email protected]" has incorrect peer dependency "react@^16.8.0".
warning " > @inrupt/[email protected]" has incorrect peer dependency "react-dom@^16.8.0".
warning "@inrupt/solid-ui-react > @storybook/builder-webpack5 > @storybook/api > @reach/[email protected]" has incorrect peer dependency "[email protected] || 16.x || 16.4.0-alpha.0911da3".
warning "@inrupt/solid-ui-react > @storybook/builder-webpack5 > @storybook/api > @reach/[email protected]" has incorrect peer dependency "[email protected] || 16.x || 16.4.0-alpha.0911da3".
warning "@inrupt/solid-ui-react > @storybook/builder-webpack5 > @storybook/api > @reach/router > [email protected]" has incorrect peer dependency "react@^0.14.0 || ^15.0.0 || ^16.0.0".
warning " > @inrupt/[email protected]" has unmet peer dependency "eslint-config-airbnb-base@^14.1.0".
warning " > @inrupt/[email protected]" has incorrect peer dependency "@inrupt/eslint-config-base@^0.1.1".
[4/4] Building fresh packages...
success Saved lockfile.
Done in 66.12s.

I'm getting this error:

(base) raphy@pc:~/solid-ui-react-demo$ yarn dev
yarn run v1.22.10
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
warn  - ./components/appContainer/index.jsx
Anonymous arrow functions cause Fast Refresh to not preserve local component state.
Please add a name to your function, for example:

Before
export default () => <div />;

After
const Named = () => <div />;
export default Named;

A codemod is available to fix the most common cases: https://nextjs.link/codemod-ndc

./components/appContainer/index.jsx
Anonymous arrow functions cause Fast Refresh to not preserve local component state.
Please add a name to your function, for example:

Before
export default () => <div />;

After
const Named = () => <div />;
export default Named;

A codemod is available to fix the most common cases: https://nextjs.link/codemod-ndc

./config.js
Anonymous arrow functions cause Fast Refresh to not preserve local component state.
Please add a name to your function, for example:

Before
export default () => <div />;

After
const Named = () => <div />;
export default Named;

A codemod is available to fix the most common cases: https://nextjs.link/codemod-ndc
info  - ready on http://localhost:3000
event - build page: /
wait  - compiling...
warn  - ./components/appContainer/index.jsx
Anonymous arrow functions cause Fast Refresh to not preserve local component state.
Please add a name to your function, for example:

Before
export default () => <div />;

After
const Named = () => <div />;
export default Named;

A codemod is available to fix the most common cases: https://nextjs.link/codemod-ndc

./components/appContainer/index.jsx
Anonymous arrow functions cause Fast Refresh to not preserve local component state.
Please add a name to your function, for example:

Before
export default () => <div />;

After
const Named = () => <div />;
export default Named;

A codemod is available to fix the most common cases: https://nextjs.link/codemod-ndc

./config.js
Anonymous arrow functions cause Fast Refresh to not preserve local component state.
Please add a name to your function, for example:

Before
export default () => <div />;

After
const Named = () => <div />;
export default Named;

A codemod is available to fix the most common cases: https://nextjs.link/codemod-ndc
info  - ready on http://localhost:3000
Material-UI: the createMuiTheme function was renamed to createTheme.

You should use `import { createTheme } from '@material-ui/core/styles'`

How to solve the problem?

Better handling of case of access given without authorization

actual:

logged in to my pod on Inrupt without giving any authorization
application has "An unexpected error has occurred."

expected:

better explanation message
way to re-authorize access

workaround:

login to https://rngadam.inrupt.net/
Prefererences > Manage your trusted applications > Update access mode

console shows:

Fetch finished loading: GET "https://inrupt.net/.well-known/openid-configuration".
Fetch finished loading: POST "https://inrupt.net/token".
Fetch finished loading: GET "https://rngadam.inrupt.net/profile/card".
Error: URL not found for given property

Error when logging in

Hi.

I cloned the example repo and follwed the directions.

I'm using Chrome on Ubuntu 20.04. It is my first time trying anything Solid related.

Problem: I'm getting an error when loging in

I start the app using

npm ci && npm run dev

There is one warning of note in the terminal:

warn  - ./node_modules/@inrupt/solid-client/dist/index.es.js
Module not found: Can't resolve 'solid-auth-client' in '/home/klequis/just-looking/solid-ui-react-example-project/node_modules/@inrupt/solid-client/dist'

Put https://localhost:3000 in the browser

Chrome puts up a page saying "Your connection is not private" with an 'Advanced' button

Click "Advanced"
Click "Proceed to localhost (unsafe)"
Enter https://inrupt.net for identity provider and click LOG IN
enter username & password
Click Log In

The result is the error below.

ERROR

Unhandled Runtime Error
Error: URL not found for given property

Call Stack
C
node_modules/@inrupt/solid-ui-react/dist/index.js (1:6413)
renderWithHooks
node_modules/react-dom/cjs/react-dom.development.js (14803:0)
mountIndeterminateComponent
node_modules/react-dom/cjs/react-dom.development.js (17482:0)
beginWork
node_modules/react-dom/cjs/react-dom.development.js (18596:0)
HTMLUnknownElement.callCallback
node_modules/react-dom/cjs/react-dom.development.js (188:0)
Object.invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js (237:0)
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js (292:0)
beginWork$1
node_modules/react-dom/cjs/react-dom.development.js (23203:0)
performUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js (22154:0)
workLoopSync
node_modules/react-dom/cjs/react-dom.development.js (22130:0)
performSyncWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js (21756:0)
eval
node_modules/react-dom/cjs/react-dom.development.js (11089:0)
unstable_runWithPriority
node_modules/scheduler/cjs/scheduler.development.js (653:0)
runWithPriority$1
node_modules/react-dom/cjs/react-dom.development.js (11039:0)
flushSyncCallbackQueueImpl
node_modules/react-dom/cjs/react-dom.development.js (11084:0)
flushSyncCallbackQueue
node_modules/react-dom/cjs/react-dom.development.js (11072:0)
flushPassiveEffectsImpl
node_modules/react-dom/cjs/react-dom.development.js (22883:0)
unstable_runWithPriority
node_modules/scheduler/cjs/scheduler.development.js (653:0)
runWithPriority$1
node_modules/react-dom/cjs/react-dom.development.js (11039:0)
flushPassiveEffects
node_modules/react-dom/cjs/react-dom.development.js (22820:0)
eval
node_modules/react-dom/cjs/react-dom.development.js (22699:0)
workLoop
node_modules/scheduler/cjs/scheduler.development.js (597:0)
flushWork
node_modules/scheduler/cjs/scheduler.development.js (552:0)
MessagePort.performWorkUntilDeadline
node_modules/scheduler/cjs/scheduler.development.js (164:0)

Solid IdP Login Issues

Does this demo app support the usual login pattern whereby any of the following are presented?

Default IdP
Custom IdP
WebID

Thus far, only the Inrupt default Idp appears to be supported.

Module not found: Can't resolve '@material-ui/core/styles/createMuiTheme' null

(base) raphy@pc:~$ git clone https://github.com/inrupt/solid-ui-react-demo.git
Cloning into 'solid-ui-react-demo'...
remote: Enumerating objects: 385, done.
remote: Counting objects: 100% (385/385), done.
remote: Compressing objects: 100% (260/260), done.
remote: Total 385 (delta 184), reused 265 (delta 100), pack-reused 0
Receiving objects: 100% (385/385), 2.17 MiB | 3.61 MiB/s, done.
Resolving deltas: 100% (184/184), done.
(base) raphy@pc:~$ cd solid-ui-react-demo/

(base) raphy@pc:~/solid-ui-react-demo$ yarn
yarn install v1.22.10
info No lockfile found.
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
warning @inrupt/lit-generated-vocab-common > @types/[email protected]: This is a stub types definition. rdf-js provides its own type definitions, so you do not need this installed.
warning @inrupt/lit-generated-vocab-common > @rdfjs/data-model > @types/[email protected]: This is a stub types definition. rdf-js provides its own type definitions, so you do not need this installed.
warning next > native-url > [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
warning next > node-libs-browser > url > [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
warning [email protected]: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
[2/4] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > @inrupt/[email protected]" has incorrect peer dependency "react@^16.8.0".
warning " > @inrupt/[email protected]" has incorrect peer dependency "react-dom@^16.8.0".
warning " > @inrupt/[email protected]" has unmet peer dependency "eslint-config-airbnb-base@^14.1.0".
warning " > @inrupt/[email protected]" has incorrect peer dependency "@inrupt/eslint-config-base@^0.1.1".
[4/4] Building fresh packages...
success Saved lockfile.
Done in 38.35s.

(base) raphy@pc:~/solid-ui-react-demo$ yarn dev
yarn run v1.22.10
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
error - ./node_modules/@inrupt/prism-react-components/dist/index.es.js:4:0
Module not found: Can't resolve '@material-ui/core/styles/createMuiTheme'
null
event - build page: /next/dist/pages/_error
wait  - compiling...
error - ./node_modules/@inrupt/prism-react-components/dist/index.es.js:4:0
Module not found: Can't resolve '@material-ui/core/styles/createMuiTheme'
null
Error: Cannot find module '@material-ui/core/styles/createMuiTheme'
Require stack:
- /home/raphy/solid-ui-react-demo/node_modules/@inrupt/prism-react-components/dist/index.js
- /home/raphy/solid-ui-react-demo/.next/server/pages/_app.js
- /home/raphy/solid-ui-react-demo/node_modules/next/dist/next-server/server/require.js
- /home/raphy/solid-ui-react-demo/node_modules/next/dist/next-server/server/load-components.js
- /home/raphy/solid-ui-react-demo/node_modules/next/dist/next-server/server/api-utils.js
- /home/raphy/solid-ui-react-demo/node_modules/next/dist/next-server/server/next-server.js
- /home/raphy/solid-ui-react-demo/node_modules/next/dist/server/next.js
- /home/raphy/solid-ui-react-demo/node_modules/next/dist/server/lib/start-server.js
- /home/raphy/solid-ui-react-demo/node_modules/next/dist/cli/next-dev.js
- /home/raphy/solid-ui-react-demo/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:885:15)
    at Function.mod._resolveFilename (/home/raphy/solid-ui-react-demo/node_modules/next/dist/build/webpack/require-hook.js:4:1855)
    at Function.Module._load (internal/modules/cjs/loader.js:730:27)
    at Module.require (internal/modules/cjs/loader.js:957:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/home/raphy/solid-ui-react-demo/node_modules/@inrupt/prism-react-components/dist/index.js:7:22)
    at Module._compile (internal/modules/cjs/loader.js:1068:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Module.load (internal/modules/cjs/loader.js:933:32)
    at Function.Module._load (internal/modules/cjs/loader.js:774:14) {
  code: 'MODULE_NOT_FOUND',

OS: Ubuntu 20.04
node: v14.17.0

Status of this demo

Sorry to be putting this into an issue, but can there be a statement on the status of this example project?

This is linked to from the documentation but npm ci of it is not working due to conflicting peer dependencies nor does the deployed instance let you actually log in.

I realize its hard to keep up a project, but since it is featured in the documentation can we please at least get a clear statement of its status? Is it abandoned? Seeking an owner? On pause? Ideally it would be in the README, but at least here where others would find it would work.

The demo app errors with fresh pod.inrupt.com Pods

Search terms you've used

Bug description

The <Profile> component contains

<Image property={VCARD.hasPhoto.iri.value} width={480} />

However, new Pods on pod.inrupt.com have no values for vcard:hasPhoto, and the component doesn't properly handle that and thus just throws an error.

(Additionally, the error only says "URL not found for given property" - it would be easier to debug if it had said what the given property was, and that it was looking for an image URL.)

To Reproduce

Follow the "Set up" steps in https://docs.inrupt.com/developer-tools/javascript/react-sdk/application/#set-up
Open https://localhost:3000/
Sign in using https://broker.pod.inrupt.com as a Solid IDP

Expected result

The profile to be shown (without an image).

Actual result

An error is thrown.

Environment

Please run

npx envinfo --system --npmPackages --binaries --npmGlobalPackages --browsers

in your project folder and paste the output here:

$ npx envinfo --system --npmPackages --binaries --npmGlobalPackages --browsers
  System:
    OS: Linux 5.4 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
    Memory: 522.88 MB / 7.51 GB
    Container: Yes
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.15.3 - ~/.nvm/versions/node/v14.15.3/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 6.14.9 - ~/.nvm/versions/node/v14.15.3/bin/npm
  Browsers:
    Firefox: 86.0
  npmPackages:
    @inrupt/eslint-config-base: 0.0.4 => 0.0.4 
    @inrupt/eslint-config-react: 0.0.4 => 0.0.4 
    @inrupt/lit-generated-vocab-common: ^0.3.11 => 0.3.11 
    @inrupt/solid-client: ^0.4.0 => 0.4.0 
    @inrupt/solid-ui-react: ^1.2.1 => 1.7.0 
    @material-ui/core: ^4.11.0 => 4.11.3 
    @material-ui/icons: ^4.9.1 => 4.11.2 
    @solid/lit-term: ^0.4.1 => 0.4.1 
    @types/node: ^14.10.1 => 14.14.34 
    @types/react: ^16.9.49 => 16.14.5 
    @typescript-eslint/eslint-plugin: ^3.10.1 => 3.10.1 
    @typescript-eslint/parser: ^3.10.1 => 3.10.1 
    eslint: ^7.9.0 => 7.22.0 
    eslint-config-airbnb: ^18.2.0 => 18.2.1 
    eslint-config-prettier: ^6.11.0 => 6.15.0 
    eslint-plugin-import: ^2.22.0 => 2.22.1 
    eslint-plugin-jest: ^23.20.0 => 23.20.0 
    eslint-plugin-jsx-a11y: ^6.3.1 => 6.4.1 
    eslint-plugin-prettier: ^3.1.4 => 3.3.1 
    eslint-plugin-react: ^7.20.6 => 7.22.0 
    eslint-plugin-react-hooks: ^4.1.2 => 4.2.0 
    next: 9.5.2 => 9.5.2 
    prettier: ^2.1.1 => 2.2.1 
    react: 16.13.1 => 16.13.1 
    react-dom: 16.13.1 => 16.13.1 
    typescript: ^4.0.2 => 4.2.3 
  npmGlobalPackages:
    npm: 6.14.9

Additional information

Source: https://forum.solidproject.org/t/react-sample-app-url-not-found-for-given-property/4090

I suppose this might be related to inrupt/solid-ui-react#188?