refactor: frontend (#11)

frontend/.prettierignore

@@ -1,3 +1,3 @@
 node_modules/
 dist/
-.prettierrc.js
+.prettierrc.js

frontend/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 120,
+  "bracketSpacing": true
+}

frontend/package.json

@@ -7,7 +7,7 @@
     "serve": "vite preview",
     "type-check": "tsc --noEmit",
     "lint": "eslint --fix --ext .js,.jsx,.ts,.tsx ./src",
-    "format": "prettier --write ./src"
+    "format": "prettier --config .prettierrc --write ./src"
   },
   "dependencies": {
     "@kiltprotocol/kilt-extension-api": "0.1.0-alpha.3",

frontend/src/App.tsx

@@ -4,25 +4,21 @@ import { Layout, Login } from './layout'
 import { darkTheme, lightTheme } from './layout/themes'
 import { dataProvider } from './api/dataProvider'
 import { authProvider } from './api/authProvider'
-import Dashboard from './components/Dashboard'
-import { AttestationCreate } from './components/AttestationAdd'
-import { AttestationList } from './components/AttestationList'
+import { AttestationCreate, AttestationList, Dashboard } from './components'
 
-export const App = () => (
-  <Admin
-    dataProvider={dataProvider}
-    authProvider={authProvider}
-    loginPage={Login}
-    layout={Layout}
-    theme={lightTheme}
-    darkTheme={darkTheme}
-    defaultTheme='light'
-    dashboard={Dashboard}
-  >
-    <Resource
-      name='attestation_request'
-      list={AttestationList}
-      create={AttestationCreate}
-    />
-  </Admin>
-)
+export function App() {
+  return (
+    <Admin
+      dataProvider={dataProvider}
+      authProvider={authProvider}
+      loginPage={Login}
+      layout={Layout}
+      theme={lightTheme}
+      darkTheme={darkTheme}
+      defaultTheme="light"
+      dashboard={Dashboard}
+    >
+      <Resource name="attestation_request" list={AttestationList} create={AttestationCreate} />
+    </Admin>
+  )
+}

frontend/src/api/authProvider.ts

@@ -1,37 +1,37 @@
-import { AuthProvider } from "react-admin"
-import jwtDecode from "jwt-decode"
+import { AuthProvider } from 'react-admin'
+import jwtDecode from 'jwt-decode'
 
 interface JWTPayload {
-  aud: string;
-  exp: number;
-  iat: number;
-  iss: string;
-  nonce: string;
-  pro: { [key: string]: any };
-  sub: string;
-  w3n: string;
+  aud: string
+  exp: number
+  iat: number
+  iss: string
+  nonce: string
+  pro: { [key: string]: unknown }
+  sub: string
+  w3n: string
 }
 
 export const authProvider: AuthProvider = {
   login: (token) => {
     try {
       const decodedToken = jwtDecode<JWTPayload>(token)
       if (Object.keys(decodedToken.pro).length) {
-        localStorage.setItem("role", "admin")
+        localStorage.setItem('role', 'admin')
       } else {
-        localStorage.setItem("role", "user")
+        localStorage.setItem('role', 'user')
       }
-      localStorage.setItem("token", token)
-      window.location.href = "/"
+      localStorage.setItem('token', token)
+      window.location.href = '/'
       return Promise.resolve()
     } catch (Error) {
       return Promise.reject()
     }
   },
 
   logout: () => {
-    localStorage.removeItem("token")
-    localStorage.removeItem("role")
+    localStorage.removeItem('token')
+    localStorage.removeItem('role')
     return Promise.resolve()
   },
 
@@ -41,23 +41,22 @@ export const authProvider: AuthProvider = {
     }
     const status = error.status
     if (status === 401 || status === 403) {
-      localStorage.removeItem("token")
-      localStorage.removeItem("role")
+      localStorage.removeItem('token')
+      localStorage.removeItem('role')
       return Promise.reject()
     }
     return Promise.resolve()
   },
 
-  checkAuth: () =>
-    localStorage.getItem("token") ? Promise.resolve() : Promise.reject(),
+  checkAuth: () => (localStorage.getItem('token') ? Promise.resolve() : Promise.reject()),
 
   getRole: () => {
-    return localStorage.getItem("role")
+    return localStorage.getItem('role')
   },
 
   getPermissions: () => Promise.reject(undefined),
 
-  getToken: () => localStorage.getItem("token"),
+  getToken: () => localStorage.getItem('token'),
 }
 
 export default authProvider

frontend/src/api/credential.ts

@@ -6,29 +6,21 @@ export async function fetchCredential(extension: InjectedWindowProvider, session
 
   const client = await getAxiosClient()
 
-  const credentialUrl = apiURL + '/credential'
+  const credentialUrl = `${apiURL}/credential`;
 
-  const getTermsResponse = await client.post(
-    credentialUrl + '/terms/' + sessionId + "/" + attestationId,
-    sessionId
-  )
+  const getTermsResponse = await client.post(`${credentialUrl}/terms/${sessionId}/${attestationId}`, sessionId);
 
-  const getCredentialRequestFromExtension = await new Promise(
-    (resolve, reject) => {
-      try {
-        extension.listen(async (credentialRequest: unknown) => {
-          resolve(credentialRequest)
-        })
-        extension.send(getTermsResponse.data)
-      } catch (e) {
-        reject(e)
-      }
-    }
-  )
 
-  client.post(
-    credentialUrl + "/" + sessionId + "/" + attestationId,
-    getCredentialRequestFromExtension
-  )
+  const getCredentialRequestFromExtension = await new Promise((resolve, reject) => {
+    try {
+      extension.listen(async (credentialRequest: unknown) => {
+        resolve(credentialRequest)
+      })
+      extension.send(getTermsResponse.data)
+    } catch (e) {
+      reject(e)
+    }
+  })
 
+  client.post(`${credentialUrl}/${sessionId}/${attestationId}`, getCredentialRequestFromExtension)
 }

frontend/src/api/dataProvider.ts

@@ -1,9 +1,9 @@
-import simpleRestProvider from "ra-data-simple-rest"
-import authProvider from "./authProvider"
-import { fetchUtils } from "react-admin"
-import axios from "axios"
+import simpleRestProvider from 'ra-data-simple-rest'
+import authProvider from './authProvider'
+import { fetchUtils } from 'react-admin'
+import axios from 'axios'
 
-export const getAxiosClient = async () => {
+export async function getAxiosClient() {
   const token = await authProvider.getToken()
   const instance = axios.create({
     headers: {
@@ -13,13 +13,10 @@ export const getAxiosClient = async () => {
   return instance
 }
 
-const httpClient = async (
-  url: string,
-  options: { [key: string]: any } = {}
-) => {
+async function httpClient(url: string, options: { [key: string]: any } = {}) {
   const token = await authProvider.getToken()
   if (!options.headers) {
-    options.headers = new Headers({ Accept: "application/json" })
+    options.headers = new Headers({ Accept: 'application/json' })
   }
   options.user = {
     authenticated: true,
@@ -28,7 +25,4 @@ const httpClient = async (
   return fetchUtils.fetchJson(url, options)
 }
 
-export const dataProvider = simpleRestProvider(
-  import.meta.env.VITE_SIMPLE_REST_URL,
-  httpClient
-)
+export const dataProvider = simpleRestProvider(import.meta.env.VITE_SIMPLE_REST_URL, httpClient)

frontend/src/api/session.ts

@@ -1,20 +1,14 @@
 import { getAxiosClient } from './dataProvider'
 
-import {
-  InjectedWindowProvider,
-  PubSubSessionV1,
-  PubSubSessionV2,
-} from '@kiltprotocol/kilt-extension-api'
-
-export async function getSession(
-  provider: InjectedWindowProvider,
-): Promise<PubSubSessionV1 | PubSubSessionV2> {
+import { InjectedWindowProvider, PubSubSessionV1, PubSubSessionV2 } from '@kiltprotocol/kilt-extension-api'
+
+export async function getSession(provider: InjectedWindowProvider): Promise<PubSubSessionV1 | PubSubSessionV2> {
   if (!provider) {
     throw new Error('No provider')
   }
 
   const apiURL = import.meta.env.VITE_SIMPLE_REST_URL
-  const challengeUrl = apiURL + '/challenge'
+  const challengeUrl = `${apiURL}/challenge`;
 
   const client = await getAxiosClient()
 
@@ -26,11 +20,7 @@ export async function getSession(
 
   const { dAppName, dAppEncryptionKeyUri, challenge } = getChallengeReponse.data
 
-  const session = await provider.startSession(
-    dAppName,
-    dAppEncryptionKeyUri,
-    challenge
-  )
+  const session = await provider.startSession(dAppName, dAppEncryptionKeyUri, challenge)
 
   console.log('Here is the session', session)