@contember/react-identity 1.3.0-alpha.14 → 1.3.0-alpha.16

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@contember/react-identity",
   "license": "Apache-2.0",
-  "version": "1.3.0-alpha.14",
+  "version": "1.3.0-alpha.16",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/production/index.js",
@@ -28,7 +28,7 @@
   "typings": "./dist/types/index.d.ts",
   "scripts": {
     "build": "yarn build:js:dev && yarn build:js:prod",
-    "build:js:dev": "vite build --mode development",
+    "build:js:dev": "NODE_ENV=development vite build --mode development",
     "build:js:prod": "vite build --mode production",
     "ae:build": "api-extractor run --local",
     "ae:test": "api-extractor run",
@@ -40,10 +40,11 @@
     "directory": "packages/react-identity"
   },
   "dependencies": {
-    "@contember/react-binding": "1.3.0-alpha.14",
-    "@contember/react-client": "1.3.0-alpha.14",
-    "@contember/react-client-tenant": "1.3.0-alpha.14",
-    "@contember/react-utils": "1.3.0-alpha.14",
+    "@contember/graphql-client-tenant": "^1.3.6",
+    "@contember/react-binding": "1.3.0-alpha.16",
+    "@contember/react-client": "1.3.0-alpha.16",
+    "@contember/react-client-tenant": "1.3.0-alpha.16",
+    "@contember/react-utils": "1.3.0-alpha.16",
     "@radix-ui/react-slot": "^1.0.2"
   },
   "peerDependencies": {

package/src/components/IdentityState.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import React, { ReactNode } from 'react'
 import { IdentityStateValue } from '../types'
 import { useIdentityState } from '../internal/contexts'
 
@@ -10,5 +10,5 @@ export interface IdentityStateProps {
 export const IdentityState = ({ state, children }: IdentityStateProps) => {
 	const currentState = useIdentityState()
 
-	return state === currentState || (Array.isArray(state) && state.includes(currentState)) ? children : null
+	return state === currentState || (Array.isArray(state) && state.includes(currentState)) ? <>{children}</> : null
 }

package/src/hooks/useFetchIdentity.ts

@@ -8,44 +8,45 @@ export const useFetchIdentity = (): [{ state: IdentityStateValue, identity: Iden
 	const sessionToken = useSessionToken()
 	const fetchMe = useFetchMe()
 
-	const [identityState, setIdentityState] = useState<IdentityStateValue>(sessionToken ? 'loading' : 'none')
-	const [identity, setIdentity] = useState<Identity | undefined>()
+	const [identityState, setIdentityState] = useState<ReturnType<typeof useFetchIdentity>[0]>({ state: sessionToken ? 'loading' : 'none', identity: undefined })
 
-	const clearIdentity = useCallback(() => setIdentityState('cleared'), [])
+	const clearIdentity = useCallback(() => setIdentityState({ state: 'cleared', identity: undefined }), [])
 	const logout = useLogoutInternal(clearIdentity)
 
 	const fetch = useCallback(async () => {
-		setIdentityState('loading')
+		setIdentityState({ state: 'loading', identity: undefined })
 		try {
 			const response = await fetchMe()
 			const person = response.person
 			const projects = response.projects
 			const permissions = response.permissions ?? { canCreateProject: false }
 
-			setIdentityState('success')
-			setIdentity({
-				id: response.id,
-				person: person ?? undefined,
-				projects: projects.map(it => ({
-					name: it.project.name,
-					slug: it.project.slug,
-					roles: it.memberships.map(it => it.role),
-				})),
-				permissions,
+			setIdentityState({
+				state: 'success',
+				identity: {
+					id: response.id,
+					person: person ?? undefined,
+					projects: projects.map(it => ({
+						name: it.project.name,
+						slug: it.project.slug,
+						roles: it.memberships.map(it => it.role),
+					})),
+					permissions,
+				},
 			})
 		} catch (e) {
 			console.error(e)
 			if (typeof e === 'object' && e !== null && 'status' in e && (e as { status?: unknown }).status === 401) {
 				logout({ noRedirect: true })
-				setIdentityState('cleared')
+				setIdentityState({ state: 'cleared', identity: undefined })
 			} else {
-				setIdentityState('failed')
+				setIdentityState({ state: 'failed', identity: undefined })
 			}
 		}
 	}, [fetchMe, logout])
 
 	return [
-		{ state: identityState, identity },
+		identityState,
 		useMemo((): IdentityMethods => ({
 			clearIdentity,
 			refreshIdentity: fetch,

package/src/internal/hooks/useFetchMe.ts

@@ -1,4 +1,5 @@
-import * as TenantApi from '@contember/react-client-tenant'
+import * as TenantApi from '@contember/graphql-client-tenant'
+import { ModelType, useTenantApi } from '@contember/react-client-tenant'
 import { useCallback } from 'react'
 
 const identityFragment = TenantApi
@@ -11,10 +12,10 @@ const identityFragment = TenantApi
 	)
 	.permissions(TenantApi.identityGlobalPermissions$$)
 
-export type FetchedIdentity = TenantApi.ModelType<typeof identityFragment>
+export type FetchedIdentity = ModelType<typeof identityFragment>
 
 export const useFetchMe = () => {
-	const executor = TenantApi.useTenantApi()
+	const executor = useTenantApi()
 	return useCallback(async () => {
 		return (await executor(TenantApi.query$.me(identityFragment))).me
 	}, [executor])

package/src/internal/hooks/useSignOut.ts

@@ -1,12 +1,13 @@
-import * as TenantApi from '@contember/react-client-tenant'
+import * as TenantApi from '@contember/graphql-client-tenant'
+import { ModelType, useTenantApi } from '@contember/react-client-tenant'
 import { useCallback } from 'react'
 
 const signOutFragment = TenantApi.signOutResponse$$.error(TenantApi.signOutError$$)
 
-export type SignOutResult = TenantApi.ModelType<typeof signOutFragment>
+export type SignOutResult = ModelType<typeof signOutFragment>
 
 export const useSignOut = () => {
-	const api = TenantApi.useTenantApi()
+	const api = useTenantApi()
 	return useCallback(async () => {
 		return (await api(TenantApi.mutation$.signOut(signOutFragment))).signOut
 	}, [api])