Converted to typescript

README.md

@@ -1,12 +1,29 @@
-# Solid React basic example
+# Solid React basic example with TypeScript
+
 This is a sample react application that uses solid components.
 
 Documentation links:
-- [React components for Solid](https://github.com/inrupt/solid-ui-react)
+- [Solid UI-react documentation](https://solid-ui-react.docs.inrupt.com/)
+- [Source code](https://github.com/inrupt/solid-ui-react)
 - [Classes for handling the authentication](https://docs.inrupt.com/developer-tools/api/javascript/solid-client-authn-browser/)
 - [Main documentation site](https://docs.inrupt.com/)
 
-## How to
+## Using the repository
+
+Install dependencies
+
+```bash
+npm install
+```
+
+Run the code:
+
+```
+npm start
+```
+
+## Creating a SOLID app from scratch
+
 First, create a React application with `npx create-react-app solid-react-example`. This command will create a react sample application in the directory solid-react-example.
 
 Lets add a dependecy to this project. We want to use [solid components](https://github.com/inrupt/solid-ui-react), lets use npm to add the required dependencies:

jest.config.ts

@@ -0,0 +1,5 @@
+export default {
+    transform: {
+        "^.+\\.tsx?$": "ts-jest"
+    },
+}

package.json

@@ -10,9 +10,13 @@
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.7.0",
+    "@types/node": "^16.11.14",
+    "@types/react": "^17.0.37",
+    "@types/react-dom": "^17.0.11",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.2",
+    "typescript": "^4.5.4",
     "web-vitals": "^1.1.0"
   },
   "scripts": {

src/App.js → src/App.tsx

@@ -1,9 +1,8 @@
 import './App.css';
-import { SessionProvider} from "@inrupt/solid-ui-react";
+import { SessionProvider, useSession } from "@inrupt/solid-ui-react";
 import { useState} from "react";
 import LoginForm from "./components/LoginForm"
 import ProfileViewer from "./components/ProfileViewer"
-import { useSession } from "@inrupt/solid-ui-react/dist";
 
 const App = () => {
   //We use this state variable

src/components/ProfileViewer.js → src/components/ProfileViewer.tsx

@@ -5,11 +5,13 @@ import { FOAF, VCARD } from "@inrupt/lit-generated-vocab-common";
 
 const ProfileViewer = () => {
   const { session } = useSession();
-  const { webId } = session.info;
 
   return (
     <Container fixed>
-      <CombinedDataProvider datasetUrl={webId} thingUrl={webId}>
+      {session.info.webId ? (
+        <CombinedDataProvider 
+          datasetUrl={session.info.webId} 
+          thingUrl={session.info.webId}>
         <Card style={{ maxWidth: 480 }}>
           <CardContent>
             <Typography gutterBottom variant="h5" component="h2">
@@ -25,11 +27,14 @@ const ProfileViewer = () => {
           </CardActionArea>
         </Card>
       </CombinedDataProvider>
+      ): null }
       <LogoutButton >
         <Button style={{ marginTop: 20 }} variant="contained" color="primary">
           Logout
         </Button>
       </LogoutButton>
+
+
     </Container>
   );
 }

src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src",
+    "e2e"
+  ]
+}