diff --git a/src/components/Login.js b/src/components/Login.jsx
similarity index 86%
rename from src/components/Login.js
rename to src/components/Login.jsx
index 78211eb..0905c28 100644
--- a/src/components/Login.js
+++ b/src/components/Login.jsx
@@ -4,7 +4,7 @@ import { useAuth } from '../hooks/useAuth'
const Login = () => {
- const { authorise } = useAuth()
+ const { requestCapabilities } = useAuth()
return (
@@ -22,7 +22,7 @@ const Login = () => {
cursor: 'pointer',
fontSize: '20px'
}}
- onClick={() => authorise()}
+ onClick={() => requestCapabilities()}
>
Sign in with Fission
diff --git a/src/components/TodoItem.js b/src/components/TodoItem.jsx
similarity index 100%
rename from src/components/TodoItem.js
rename to src/components/TodoItem.jsx
diff --git a/src/components/TodoList.js b/src/components/TodoList.jsx
similarity index 96%
rename from src/components/TodoList.js
rename to src/components/TodoList.jsx
index 3030d54..f867ddf 100644
--- a/src/components/TodoList.js
+++ b/src/components/TodoList.jsx
@@ -8,9 +8,9 @@ import TodoItem from "./TodoItem";
export default function TodoList({ match }) {
- const { fs } = useAuth();
+ const { fs, program } = useAuth();
- const [todos, dispatch] = useFilesystem(fs);
+ const [todos, dispatch] = useFilesystem(fs, program?.configuration.namespace);
const [newTodo, setNewTodo] = useState('');
const onNewValue = event => {
diff --git a/src/hooks/useAuth.js b/src/hooks/useAuth.js
deleted file mode 100644
index 51a756e..0000000
--- a/src/hooks/useAuth.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import { useEffect, useState } from 'react'
-import * as wn from 'webnative'
-
-wn.setup.debug({ enabled: true })
-
-export function useAuth() {
- const [state, setState] = useState(null)
- let fs;
-
- const authorise = () => {
- if (state) {
- wn.redirectToLobby(state.permissions)
- }
- }
-
- useEffect(() => {
- async function getState() {
- const result = await wn.initialise({
- permissions: {
- app: {
- name: 'react-todomvc',
- creator: 'bgins',
- },
- },
- })
- setState(result)
- }
-
- getState()
- }, [])
-
- switch (state?.scenario) {
- case wn.Scenario.AuthSucceeded:
- case wn.Scenario.Continuation:
- fs = state.fs;
- break;
-
- default:
- break;
- }
-
- return { authorise, fs, state }
-}
diff --git a/src/hooks/useAuth.jsx b/src/hooks/useAuth.jsx
new file mode 100644
index 0000000..4082772
--- /dev/null
+++ b/src/hooks/useAuth.jsx
@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react'
+import * as wn from 'webnative'
+
+export function useAuth() {
+ const [program, setState] = useState(null)
+
+ const appInfo = { creator: 'fission', name: 'react-todomvc' };
+ let fs;
+
+ const requestCapabilities = () => {
+ if (program) {
+ program.capabilities.request()
+ }
+ }
+
+ useEffect(() => {
+ async function getState() {
+ const program = await wn.program({
+ debug: true,
+ namespace: appInfo,
+ permissions: {
+ app: appInfo
+ },
+ })
+ console.log(program)
+ setState(program ?? null)
+ }
+
+ getState()
+ }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+ if (program?.session) {
+ fs = program.session.fs;
+ }
+
+ return { fs, program, requestCapabilities }
+}
diff --git a/src/hooks/useFilesystem.js b/src/hooks/useFilesystem.jsx
similarity index 67%
rename from src/hooks/useFilesystem.js
rename to src/hooks/useFilesystem.jsx
index ec7e05a..06f53c0 100644
--- a/src/hooks/useFilesystem.js
+++ b/src/hooks/useFilesystem.jsx
@@ -1,7 +1,8 @@
import { useEffect, useState } from 'react'
import * as wn from 'webnative'
-let fs = null;
+let fs = null; // File system
+let ns = null; // App namespace
const useAsyncReducer = (reducer, initialState) => {
const [state, setState] = useState(initialState),
@@ -13,33 +14,33 @@ const useAsyncReducer = (reducer, initialState) => {
}
const reducer = async (state, action) => {
- if (!fs) { return; }
+ if (!fs || !ns) { return; }
- const todosPath = fs.appPath(wn.path.file('todos.json'));
+ const todosPath = wn.path.appData(ns, wn.path.file('todos.json'));
switch (action.type) {
case 'all':
if (await fs.exists(todosPath)) {
- const todos = await fs.read(todosPath)
+ const todos = new TextDecoder().decode(await fs.read(todosPath))
state = JSON.parse(todos)
}
break;
case 'add':
state.push(action.value);
- await fs.write(todosPath, JSON.stringify(state));
+ await fs.write(todosPath, new TextEncoder().encode(JSON.stringify(state)));
await fs.publish();
break;
case 'update':
state = state.map(todo => todo.id === action.value.id ? action.value : todo);
- await fs.write(todosPath, JSON.stringify(state));
+ await fs.write(todosPath, new TextEncoder().encode(JSON.stringify(state)));
await fs.publish();
break;
case 'delete':
state = state.filter(todo => todo.id !== action.value);
- await fs.write(todosPath, JSON.stringify(state));
+ await fs.write(todosPath, new TextEncoder().encode(JSON.stringify(state)));
await fs.publish();
break;
@@ -47,19 +48,19 @@ const reducer = async (state, action) => {
state = state.map(todo =>
todo.id === action.value ? { ...todo, completed: !todo.completed } : todo
)
- await fs.write(todosPath, JSON.stringify(state));
+ await fs.write(todosPath, new TextEncoder().encode(JSON.stringify(state)));
await fs.publish();
break;
case 'toggleAll':
state = state.map(todo => ({ ...todo, completed: !action.value }))
- await fs.write(todosPath, JSON.stringify(state));
+ await fs.write(todosPath, new TextEncoder().encode(JSON.stringify(state)));
await fs.publish();
break;
case 'clearCompleted':
state = state.filter(todo => !todo.completed);
- await fs.write(todosPath, JSON.stringify(state));
+ await fs.write(todosPath, new TextEncoder().encode(JSON.stringify(state)));
await fs.publish();
break;
@@ -70,8 +71,9 @@ const reducer = async (state, action) => {
}
-export function useFilesystem(filesystem) {
+export function useFilesystem(filesystem, namespace) {
fs = filesystem;
+ ns = namespace;
const [todos, dispatch] = useAsyncReducer(reducer, []);
diff --git a/src/index.js b/src/index.jsx
similarity index 100%
rename from src/index.js
rename to src/index.jsx
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..ded69fa
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite'
+import reactRefresh from '@vitejs/plugin-react-refresh'
+
+export default defineConfig({
+ build: {
+ target: 'es2020'
+ },
+ plugins: [reactRefresh()],
+})
\ No newline at end of file