🪢 Merge #15 (semantyk←dev): Fix URL error and add test AuthButton

🐛 Fix: URL Error - **Should pass strings from now on**
🧹 Chore: Add AuthButton

.github/workflows/test.yaml → .github/workflows/dev.yaml

@@ -1,17 +1,17 @@
 # –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-# # `test.yaml`
+# # `dev.yaml`
 # client | Semantyk
 #
 # Created: Nov 29, 2023
-# Modified: Nov 29, 2023
+# Modified: Dec 5, 2023
 #
 # Author(s): Semantyk Team
 # Maintainer(s): Daniel Bakas <https://id.danielbakas.com>
 #
 # Copyright © Semantyk 2023. All rights reserved.
 # –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 
-name: Build and Test
+name: Development CI Workflow
 
 on:
   push:
@@ -22,8 +22,35 @@ on:
       - dev
 
 jobs:
+  test:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [ 20.x ]
+    steps:
+      # 1. Checkout the Repository
+      - uses: actions/checkout@v4
+        name: 1. Repository Checkout
+      # 2. Setup pnpm
+      - uses: pnpm/action-setup@v2
+        name: 2. Setup pnpm
+        with:
+          version: 8
+      # 3. Setup Node.js
+      - uses: actions/setup-node@v4
+        name: 3. Setup Node.js (v${{ matrix.node-version }})
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'pnpm'
+      # 4. Install Dependencies
+      - run: pnpm install
+        name: 4. Install Dependencies
+      # 5. Run Tests
+      - run: pnpm test
+        name: 5. Run Tests
   build:
     runs-on: ubuntu-latest
+    needs: test
     strategy:
       matrix:
         node-version: [ 20.x ]
@@ -47,7 +74,4 @@ jobs:
         name: 4. Install Dependencies
       # 5. Build
       - run: pnpm run build
-        name: 5. Build
-      # 6. Test
-      - run: pnpm test
-        name: 6. Test
+        name: 5. Build

.github/workflows/staging.yaml

@@ -0,0 +1,101 @@
+# –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+# # `staging.yaml`
+# client | Semantyk
+#
+# Created: Nov 29, 2023
+# Modified: Dec 5, 2023
+#
+# Author(s): Semantyk Team
+# Maintainer(s): Daniel Bakas <https://id.danielbakas.com>
+#
+# Copyright © Semantyk 2023. All rights reserved.
+# –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+
+name: Staging CI Workflow
+
+on:
+  push:
+    branches:
+      - staging
+  pull_request:
+    branches:
+      - staging
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [ 20.x ]
+    steps:
+      # 1. Checkout the Repository
+      - uses: actions/checkout@v4
+        name: 1. Repository Checkout
+      # 2. Setup pnpm
+      - uses: pnpm/action-setup@v2
+        name: 2. Setup pnpm
+        with:
+          version: 8
+      # 3. Setup Node.js
+      - uses: actions/setup-node@v4
+        name: 3. Setup Node.js (v${{ matrix.node-version }})
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'pnpm'
+      # 4. Install Dependencies
+      - run: pnpm install
+        name: 4. Install Dependencies
+      # 5. Run Tests
+      - run: pnpm test
+        name: 5. Run Tests
+  build:
+    runs-on: ubuntu-latest
+    needs: test
+    strategy:
+      matrix:
+        node-version: [ 20.x ]
+    steps:
+      # 1. Checkout the Repository
+      - uses: actions/checkout@v4
+        name: 1. Repository Checkout
+      # 2. Setup pnpm
+      - uses: pnpm/action-setup@v2
+        name: 2. Setup pnpm
+        with:
+          version: 8
+      # 3. Setup Node.js
+      - uses: actions/setup-node@v4
+        name: 3. Setup Node.js (v${{ matrix.node-version }})
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'pnpm'
+      # 4. Install Dependencies
+      - run: pnpm install
+        name: 4. Install Dependencies
+      # 5. Build
+      - run: pnpm run build
+        name: 5. Build
+  deploy:
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      # 1. Repository Checkout
+      - uses: actions/checkout@v4
+        name: 1. Repository Checkout
+      # 2. Cloud SDK Configuration
+      - uses: google-github-actions/setup-gcloud@v1
+        name: 2. Cloud SDK Configuration
+      # 3. Google Cloud Authentication
+      - uses: google-github-actions/auth@v2
+        name: 3. Google Cloud Authentication
+        with:
+          credentials_json: ${{secrets.GCP_CREDENTIALS}}
+      # 4. Deploy to Google App Engine
+      # - Deployment to 'main' Service
+      - if: github.ref == 'refs/heads/main'
+        name: 4. Deployment to 'main' Service
+        run: gcloud app deploy app.yaml --project ${{secrets.GCP_PROJECT_ID}} --promote
+      # - Deployment to 'staging' service
+      - if: github.ref == 'refs/heads/staging'
+        name: 4. Deploy to Staging Service
+        run: gcloud app deploy app.yaml --project ${{secrets.GCP_PROJECT_ID}} --no-promote

Dockerfile.dev

@@ -19,7 +19,7 @@ RUN npm install -g pnpm
 # Set the working directory
 WORKDIR /app
 # Copy package.json and other related files
-COPY package.json ./
+COPY package.json pnpm-lock.yaml ./
 # Install dependencies
 RUN pnpm install
 # Copy the rest of your app's source code

app/components/atoms/loginButton.jsx → app/_components/atoms/loginButton.jsx

@@ -20,7 +20,7 @@ import React, { useEffect, useState } from "react";
 import { LoginButton as SolidLoginButton } from "@inrupt/solid-ui-react";
 import { Button } from "react-bootstrap";
 //* Local imports
-import { getOptions } from "../../logic/auth/service";
+import { getOptions } from "../../_logic/auth/service";
 
 
 //* Main

app/components/atoms/logoutButton.jsx → app/_components/atoms/logoutButton.jsx

@@ -17,13 +17,21 @@
 
 //* Imports
 import React from "react";
-import { LogoutButton as SolidLogoutButton } from "@inrupt/solid-ui-react";
+import {
+    LogoutButton as SolidLogoutButton,
+    useSession
+} from "@inrupt/solid-ui-react";
 import { Button } from "react-bootstrap";
 
 //* Main
 export default function LogoutButton() {
+    // Hooks
+    const { session } = useSession();
+    // Logic
+    const { webId } = session.info;
     // Return
     return (<>
+        <p>WebID: <strong><code>{webId}</code></strong></p>
         <SolidLogoutButton>
             <Button>Log Out</Button>
         </SolidLogoutButton>

app/components/molecules/footer/component.jsx → app/_components/molecules/footer/component.jsx

@@ -18,7 +18,7 @@
 //* Imports
 import Link from "next/link";
 //* Local Imports
-import useData from "../../../logic/data/hook";
+import useData from "../../../_logic/data/hook";
 import FooterLayout from "./layout";
 
 

app/logic/auth/service.js → app/_logic/auth/service.js

@@ -14,12 +14,17 @@
  */
 
 //* Imports
-import { CLIENT_ID, POD_URI } from "../../services/app/nodes";
+import { CLIENT_ID, POD_PROVIDER_URI } from "../../_services/app/nodes";
 
 export async function getOptions() {
+    // Logic
+    const clientId = CLIENT_ID.value;
+    const oidcIssuer = POD_PROVIDER_URI.value;
+    const redirectUrl = window.location.href;
+    // Return
     return {
-        authOptions: { clientId: CLIENT_ID },
-        oidcIssuer: POD_URI,
-        redirectUrl: window.location.href
+        authOptions: { clientId },
+        oidcIssuer,
+        redirectUrl
     };
 }

app/logic/data/service.js → app/_logic/data/service.js

@@ -16,15 +16,17 @@
 //* Imports
 
 //* Local Imports
-import { APP_WEBID, APP_WEBID_DOC } from "../../services/app/nodes";
-import { getProperties, getThing } from "../../services/solid/service";
-import { appShape } from "../../services/app/shape";
+import { APP_WEBID, APP_WEBID_DOC } from "../../_services/app/nodes";
+import { getProperties, getThing } from "../../_services/solid/service";
+import { appShape } from "../../_services/app/shape";
 
 
 //* Main
 export async function getData(fetch) {
     // Logic
-    const thing = await getThing(fetch, APP_WEBID_DOC, APP_WEBID);
+    const document = APP_WEBID_DOC.value;
+    const uri = APP_WEBID.value;
+    const thing = await getThing(fetch, document, uri);
     const lang = "en";
     const properties = getProperties(thing, appShape, lang);
     // Props

app/logic/metadata/service.js → app/_logic/metadata/service.js

@@ -34,7 +34,7 @@ export async function getMetadata() {
             }
         },
         applicationName: app.name,
-        authors: [{ name: app.author, url: app.webId }],
+        authors: [{ name: app.author }],
         category: "technology",
         creator: app.creator,
         description: `${app.slogan} | ${app.description}`,

app/logic/state/manager.jsx → app/_logic/state/manager.jsx

@@ -17,12 +17,16 @@
 
 //* Imports
 import React from "react";
-import { SessionProvider } from "@inrupt/solid-ui-react";
+import { SessionProvider, useSession } from "@inrupt/solid-ui-react";
 
 function StateManager({ children }) {
+    // Hooks
+    const { session } = useSession();
+    // Logic
+    const { sessionId } = session.info;
     // Return
     return (
-        <SessionProvider restorePreviousSession>
+        <SessionProvider restorePreviousSession sessionId={sessionId}>
             {children}
         </SessionProvider>
     );

app/services/app/nodes.js → app/_services/app/nodes.js

@@ -20,4 +20,4 @@ import { NamedNode } from "rdflib";
 export const APP_WEBID = NamedNode.fromValue("https://id.inrupt.com/semantyk");
 export const APP_WEBID_DOC = NamedNode.fromValue("https://storage.inrupt.com/93eee8ab-4002-4bbf-a457-38eab9979cc8/public/profile/card");
 export const CLIENT_ID = NamedNode.fromValue("https://id.www.semantyk.com");
-export const POD_URI = NamedNode.fromValue("https://id.inrupt.com/semantyk");
+export const POD_PROVIDER_URI = NamedNode.fromValue("https://pod.danielbakas.com");

app/services/solid/service.js → app/_services/solid/service.js

@@ -4,7 +4,7 @@
  * client | Semantyk
  *
  * Created: Dec 05, 2023
- * Modified: Dec 05, 2023
+ * Modified: Dec 06, 2023
  *
  * Author(s): Semantyk Team
  * Maintainer(s):
@@ -53,7 +53,7 @@ export const getProperty = (thing, type, property, locale) => {
 export const getProperties = (thing, shape, locale) => {
     let properties = {};
     for (const { ns, fragment, type } of shape) {
-        const property = ns(fragment);
+        const property = ns(fragment).value;
         properties[fragment] = getProperty(thing, type, property, locale);
     }
     return properties;

app/layout.jsx

@@ -17,7 +17,8 @@
 import "bootstrap/dist/css/bootstrap.min.css";
 import React from "react";
 //* Local Imports
-import { getMetadata } from "./logic/metadata/service";
+import { getMetadata } from "./_logic/metadata/service";
+import StateManager from "./_logic/state/manager";
 
 
 //* Main
@@ -28,7 +29,9 @@ export default function RootLayout({ children }) {
     return (
         <html lang="en">
         <body className={`bg-dark text-light`}>
-        {children}
+        <StateManager>
+            {children}
+        </StateManager>
         </body>
         </html>
     );