fix: decrypted post failed cannot render

DimensionDev · Dec 20, 2019 · fb1f47a · fb1f47a
1 parent c809188
commit fb1f47a
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 13 deletions.
diff --git a/src/components/InjectedComponents/AddToKeyStore.tsx b/src/components/InjectedComponents/AddToKeyStore.tsx
@@ -9,7 +9,7 @@ export interface AddToKeyStoreProps {
     provePost: string
     postBy: ProfileIdentifier
     completeComponentProps?: Partial<SuccessProps>
-    completeComponent?: React.ComponentType
+    completeComponent?: React.ComponentType<{ data: boolean }>
     waitingComponentProps?: Partial<WaitingProps>
     waitingComponent?: React.ComponentType
     failedComponentProps?: Partial<FailedProps>

diff --git a/src/components/InjectedComponents/DecryptedPost.tsx b/src/components/InjectedComponents/DecryptedPost.tsx
@@ -112,7 +112,7 @@ export const DecryptPostFailed = React.memo(function DecryptPostFailed({ error,
     return (
         <AdditionalContent
             title={geti18nString('service_decryption_failed')}
-            renderText={error && error.message}
+            renderText={error?.message}
             {...props.AdditionalContentProps}
         />
     )

diff --git a/src/utils/components/AsyncComponent.tsx b/src/utils/components/AsyncComponent.tsx
@@ -8,9 +8,9 @@ type PromiseState<T> =
 export default function AsyncComponent<Return>(props: {
     promise: () => Promise<Return>
     dependencies: ReadonlyArray<unknown>
-    completeComponent: React.ComponentType<{ data: Return }> | React.ReactNode
+    completeComponent: React.ComponentType<{ data: Return }>
     awaitingComponent: React.SuspenseProps['fallback']
-    failedComponent: React.ComponentType<{ error: Error }> | React.ReactNode
+    failedComponent: React.ComponentType<{ error: Error }> | null
 }) {
     const [state, setState] = React.useState<PromiseState<Return>>({ status: 'not-started' })
     // eslint-disable-next-line
@@ -30,16 +30,15 @@ export default function AsyncComponent<Return>(props: {
                     return {
                         default: () => {
                             const CompleteComponent = props.completeComponent
-                            if (isComponent(CompleteComponent)) return <CompleteComponent data={data} />
-                            else return (CompleteComponent as React.ReactElement) || null
+                            return <CompleteComponent data={data} />
                         },
                     }
                 } catch (e) {
                     return {
                         default: () => {
                             const FailedComponent = props.failedComponent
-                            if (isComponent(FailedComponent)) return <FailedComponent error={e} />
-                            else return (FailedComponent as React.ReactElement) || null
+                            if (FailedComponent === null) return null
+                            return <FailedComponent error={e} />
                         },
                     }
                 }
@@ -54,10 +53,6 @@ export default function AsyncComponent<Return>(props: {
     )
 }
 
-function isComponent<T>(f?: React.ComponentType<T> | NonNullable<React.ReactNode> | null): f is React.ComponentType<T> {
-    return typeof f === 'function'
-}
-
 /** React hook for not-cancelable async calculation */
 export function useAsync<T>(fn: () => PromiseLike<T>, dep: ReadonlyArray<unknown>): PromiseLike<T> {
     let res: Parameters<ConstructorParameters<typeof Promise>[0]>[0] = () => {},

diff --git a/src/utils/jss/renderInShadowRoot.tsx b/src/utils/jss/renderInShadowRoot.tsx
@@ -30,7 +30,7 @@ const generateClassName = createGenerateClassName()
 export class RenderInShadowRootWrapper extends React.PureComponent {
     state: { error?: Error } = { error: undefined }
     render() {
-        if (this.state.error) return this.state.error.message
+        if (this.state.error) return <pre style={{ whiteSpace: 'break-spaces' }}>{this.state.error.message}</pre>
         return <Maskbook children={this.props.children} />
     }
     componentDidCatch(error: Error) {