@rownd/react-native 0.2.4 → 2.1.0

package/src/components/AutoSigninDialog.tsx

@@ -1,131 +0,0 @@
-import React, { useMemo, useCallback, useEffect, useRef } from 'react';
-import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
-import {
-  BottomSheetBackdrop,
-  BottomSheetBackdropProps,
-  BottomSheetModal,
-} from '@gorhom/bottom-sheet';
-import bottomSheetMeta from '@gorhom/bottom-sheet/package.json';
-import { useTimeout } from 'usehooks-ts';
-
-import { useNav } from '../hooks';
-import { useGlobalContext } from './GlobalContext';
-
-import ErrorIcon from './images/ErrorIcon';
-
-export function AutoSigninDialog() {
-  const navTo = useNav();
-  const { state } = useGlobalContext();
-
-  // Let the user know they're auto signing-in, then close when done
-  useTimeout(() => {
-    if (state?.nav?.options?.type === 'error') {
-      return;
-    }
-
-    handleClose();
-  }, 3000);
-
-  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
-  useEffect(() => {
-    if (bottomSheetModalRef.current) {
-      bottomSheetModalRef.current.present();
-    }
-  }, []);
-
-  const handleClose = useCallback(() => {
-    setTimeout(() => {
-      navTo({ hide: true });
-    }, 150);
-  }, [navTo]);
-
-  const snapPoints = useMemo(() => ['30%', '60%'], []);
-
-  const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop {...props} pressBehavior="none" />
-    ),
-    []
-  );
-
-  let extraBottomSheetProps: any = {};
-  if (bottomSheetMeta.version.startsWith('4')) {
-    extraBottomSheetProps.keyboardBehavior = 'fillParent';
-    extraBottomSheetProps.android_keyboardInputMode = 'adjustResize';
-    extraBottomSheetProps.enablePanDownToClose =
-      state?.nav?.options?.type === 'error';
-  }
-
-  return (
-    <BottomSheetModal
-      snapPoints={snapPoints}
-      index={0}
-      backdropComponent={renderBackdrop}
-      onDismiss={handleClose}
-      style={styles.bottomSheet}
-      ref={bottomSheetModalRef}
-      {...extraBottomSheetProps}
-    >
-      <View style={styles.innerContainer}>
-        {state?.nav?.options?.type === 'error' && (
-          <>
-            <ErrorIcon />
-            <Text style={styles.errorMessage}>
-              {state.nav.options.message ||
-                'An error occurred. Please try again.'}
-            </Text>
-          </>
-        )}
-
-        {state?.nav?.options?.type === 'sign-in' && (
-          <>
-            <ActivityIndicator size="large" color="#5b0ae0" />
-            <Text style={styles.signInMessage}>
-              Automatically signing you in. Just a sec...
-            </Text>
-          </>
-        )}
-      </View>
-    </BottomSheetModal>
-  );
-}
-
-const styles = StyleSheet.create({
-  modal: {
-    // flex: 1,
-  },
-  bottomSheet: {
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 12,
-    },
-    shadowOpacity: 0.58,
-    shadowRadius: 16.0,
-
-    elevation: 24,
-  },
-  innerContainer: {
-    borderRadius: 20,
-    borderColor: 'transparent',
-    borderWidth: 0,
-    padding: 25,
-    textAlign: 'center',
-  },
-  signInMessage: {
-    textAlign: 'center',
-    fontSize: 24,
-    padding: 20,
-  },
-  errorMessage: {
-    textAlign: 'center',
-    fontSize: 24,
-    padding: 20,
-  },
-  errorIcon: {
-    textAlign: 'center',
-    color: '#DA1E28',
-    height: 24,
-    width: 24,
-  },
-});

package/src/components/BottomSheetTextInput/BottomSheetTextInput.tsx

@@ -1,57 +0,0 @@
-import React, { memo, useCallback, forwardRef } from 'react';
-import { TextInput } from 'react-native-gesture-handler';
-import { BottomSheetTextInputProps } from './types';
-
-// @ts-ignore
-const {
-  useBottomSheetInternal,
-} = require('@gorhom/bottom-sheet/src/hooks/useBottomSheetInternal');
-
-const BottomSheetTextInputComponent = forwardRef<
-  TextInput,
-  BottomSheetTextInputProps
->(({ onFocus, onBlur, ...rest }, ref) => {
-  //#region hooks
-  // @ts-ignore
-  let { shouldHandleKeyboardEvents } = useBottomSheetInternal();
-  //#endregion
-
-  if (!shouldHandleKeyboardEvents) {
-    shouldHandleKeyboardEvents = {};
-  }
-
-  //#region callbacks
-  const handleOnFocus = useCallback(
-    (args) => {
-      shouldHandleKeyboardEvents.value = true;
-      if (onFocus) {
-        onFocus(args);
-      }
-    },
-    [onFocus, shouldHandleKeyboardEvents]
-  );
-  const handleOnBlur = useCallback(
-    (args) => {
-      shouldHandleKeyboardEvents.value = false;
-      if (onBlur) {
-        onBlur(args);
-      }
-    },
-    [onBlur, shouldHandleKeyboardEvents]
-  );
-  //#endregion
-
-  return (
-    <TextInput
-      ref={ref}
-      onFocus={handleOnFocus}
-      onBlur={handleOnBlur}
-      {...rest}
-    />
-  );
-});
-
-const BottomSheetTextInput = memo(BottomSheetTextInputComponent);
-BottomSheetTextInput.displayName = 'BottomSheetTextInput';
-
-export default BottomSheetTextInput;

package/src/components/BottomSheetTextInput/index.ts

@@ -1,5 +0,0 @@
-// @ts-ignore
-export { default } from './BottomSheetTextInput';
-
-// @ts-ignore
-export { BottomSheetTextInputProps } from './types';

package/src/components/BottomSheetTextInput/types.ts

@@ -1,3 +0,0 @@
-import { TextInputProps } from 'react-native';
-
-export interface BottomSheetTextInputProps extends TextInputProps {}

package/src/components/DarkText.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { Text, TextProps, TextStyle } from 'react-native';
-
-export default function DarkText({ style, children, ...rest }: TextProps) {
-  if (style) {
-    (style as TextStyle).color = '#000000';
-  } else {
-    style = { color: '#000000' };
-  }
-
-  return (
-    <Text style={style} {...rest}>
-      {children}
-    </Text>
-  );
-}

package/src/components/DefaultContext.tsx

@@ -1,278 +0,0 @@
-import { useEffect, useCallback, useRef } from 'react';
-import isEqual from 'lodash-es/isEqual';
-import { useDebounce, useApi, useDeviceFingerprint } from '../hooks';
-import { DEFAULT_USER_AGENT } from '../hooks/api';
-import { IConfig } from '../utils/config';
-import { useGlobalContext } from './GlobalContext';
-import { ActionType } from '../data/actions';
-import ky from 'ky';
-import Clipboard from '@react-native-clipboard/clipboard';
-import base64 from 'react-native-base64';
-import { Linking } from 'react-native';
-import { events, EventType } from '../utils/events';
-
-export type UserInfoResp = {
-  data: {
-    [key: string]: any;
-  };
-  redacted: string[];
-};
-
-interface UserAclsResponse {
-  acls: Record<string, { shared: boolean }>;
-}
-
-type DefaultContextProps = {
-  config: IConfig;
-};
-
-export function DefaultContext({ config }: DefaultContextProps) {
-  const { state, dispatch } = useGlobalContext();
-  const { client: api } = useApi();
-  useDeviceFingerprint();
-
-  // Fetch app schema and config
-  useEffect(() => {
-    (async () => {
-      try {
-        const resp: any = await api
-          .get('hub/app-config', {
-            headers: {
-              'x-rownd-app-key': config.appKey,
-            },
-          })
-          .json();
-
-        if (resp?.app?.icon) {
-          const iconMeta = await ky.get(resp.app.icon);
-          resp.app.icon_content_type = iconMeta.headers.get('content-type');
-        }
-
-        dispatch({
-          type: ActionType.SET_APP_CONFIG,
-          payload: resp.app,
-        });
-      } catch (err) {
-        console.error('Failed to fetch app config:', err);
-      }
-    })();
-  }, [api, config.appKey, dispatch]);
-
-  /**
-   * If not signed in, check the clipboard for an init hash or auth link we can use to auto-auth the user
-   */
-  useEffect(() => {
-    if (state.auth.access_token || !state.app.id) {
-      return;
-    }
-
-    (async () => {
-      try {
-        let authData = null;
-
-        let authLink =
-          (await Linking.getInitialURL()) || (await Clipboard.getString());
-        if (authLink.includes('rownd.link')) {
-          dispatch({
-            type: ActionType.CHANGE_ROUTE,
-            payload: {
-              route: '/account/auto-signin',
-              opts: {
-                type: 'sign-in',
-              },
-            },
-          });
-
-          authData = await ky
-            .get(authLink, {
-              headers: {
-                'User-Agent': DEFAULT_USER_AGENT,
-              },
-            })
-            .json();
-        } else if (authLink.startsWith('rph_init=')) {
-          const authStr = authLink.split('rph_init=')[1];
-          authData = JSON.parse(base64.decode(authStr));
-        } else {
-          return;
-        }
-
-        // Clear the clipboard value so we don't leak any creds
-        Clipboard.setString('');
-
-        dispatch({
-          type: ActionType.LOGIN_SUCCESS,
-          payload: authData,
-        });
-      } catch (err) {
-        console.error(
-          'We found an auth link or string, but failed to authenticate with it because:',
-          err
-        );
-      }
-    })();
-  }, [state.auth.access_token, state.app.id, dispatch]);
-
-  const retrieveUserInfo = useCallback(() => {
-    if (!state.auth.access_token || !state.app.id) {
-      return;
-    }
-
-    (async () => {
-      const userInfo: UserInfoResp = await api
-        .get(`me/applications/${state.app.id}/data`, {
-          headers: {
-            Authorization: `Bearer ${state.auth.access_token}`,
-          },
-        })
-        .json();
-      dispatch({
-        type: ActionType.LOAD_USER,
-        payload: userInfo,
-      });
-
-      dispatch({
-        type: ActionType.UPDATE_LOCAL_ACLS,
-        payload: userInfo.redacted.reduce(
-          (acc: Record<string, any>, field: string) => {
-            acc[field] = { shared: false };
-            return acc;
-          },
-          {}
-        ),
-      });
-    })();
-  }, [api, dispatch, state.app.id, state.auth.access_token]);
-
-  const retrieveAcls = useCallback(() => {
-    if (!state.app.id || !state.auth.access_token) {
-      return;
-    }
-
-    (async () => {
-      try {
-        const appUserAcls: UserAclsResponse = await api
-          .get(`me/applications/${state.app.id}/acls`, {
-            headers: {
-              Authorization: `Bearer ${state.auth.access_token}`,
-            },
-          })
-          .json();
-        dispatch({
-          type: ActionType.UPDATE_LOCAL_ACLS,
-          payload: appUserAcls.acls,
-        });
-      } catch (err) {
-        if (err instanceof Error) {
-          // const unsharedAcls = reduceSchemaToUnsharedAcls();
-          dispatch({
-            type: ActionType.UPDATE_LOCAL_ACLS,
-            payload: {},
-          });
-        }
-      }
-    })();
-  }, [api, dispatch, state.app.id, state.auth.access_token]);
-
-  useEffect(retrieveUserInfo, [retrieveUserInfo]);
-  useEffect(retrieveAcls, [retrieveAcls]);
-
-  useEffect(() => {
-    if (!state.user.needs_refresh) {
-      return;
-    }
-    retrieveUserInfo();
-    dispatch({
-      type: ActionType.SET_REFRESH_USER_DATA,
-      payload: { needs_refresh: false },
-    });
-  }, [dispatch, retrieveUserInfo, state.user.needs_refresh]);
-
-  const saveAclsDebounced = useDebounce(saveAcls, 2000); // 2s
-
-  async function saveAcls() {
-    if (state.app.id && state.local_acls) {
-      await api
-        .put(`me/applications/${state.app.id}/acls`, {
-          headers: {
-            Authorization: `Bearer ${state.auth.access_token}`,
-          },
-          json: {
-            acls: state.local_acls,
-          },
-        })
-        .json();
-    }
-  }
-
-  const localAclsRef = useRef(state.local_acls);
-  useEffect(() => {
-    // Don't save acls if they were just loaded for the first time or they haven't changed
-    if (
-      !localAclsRef.current ||
-      isEqual(localAclsRef.current, state.local_acls)
-    ) {
-      return;
-    }
-    saveAclsDebounced();
-  }, [saveAclsDebounced, state.local_acls]);
-
-  const saveUserDataDebounced = useDebounce(saveUserData, 2000); // 2s
-
-  // Save user data in the application state to the API server
-  async function saveUserData() {
-    if (state.app.id && state.user.data && state.auth.access_token) {
-      dispatch({
-        type: ActionType.SET_IS_SAVING_USER_DATA,
-        payload: {
-          saving: true,
-        },
-      });
-
-      const eventDetails: Record<string, any> = {};
-      try {
-        eventDetails.data = await api
-          .put(`me/applications/${state.app.id}/data`, {
-            headers: {
-              Authorization: `Bearer ${state.auth.access_token}`,
-            },
-            json: {
-              data: state.user.data,
-            },
-          })
-          .json();
-      } catch (err) {
-        eventDetails.error = err;
-        // Get the latest user info from Rownd. Something was probably bad
-        // with the data we just tried to save.
-        // This is a bit hacky. We should be able to reset the state without
-        // calling rownd again by rolling back to a previously good state...
-        retrieveUserInfo();
-        // TODO: Set some error state
-      } finally {
-        events.dispatch(EventType.USER_DATA_SAVED, eventDetails);
-        dispatch({
-          type: ActionType.SET_IS_SAVING_USER_DATA,
-          payload: {
-            saving: false,
-          },
-        });
-      }
-    }
-  }
-
-  const userDataRef = useRef(state.user.data);
-  useEffect(() => {
-    // Don't update the user data in the API server if the email is unknown or the data hasn't changed
-    if (
-      (!state.user.data?.email && !state.user.data.phone_number) ||
-      isEqual(userDataRef.current, state.user.data)
-    ) {
-      return;
-    }
-    saveUserDataDebounced();
-    userDataRef.current = state.user.data;
-  }, [dispatch, saveUserDataDebounced, state.user.data]);
-
-  return null;
-}

package/src/components/RowndComponents.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { SignIn } from './SignIn';
-import { AutoSigninDialog } from './AutoSigninDialog';
-import { useGlobalContext } from './GlobalContext';
-
-export function RowndComponents() {
-  const { state } = useGlobalContext();
-  // useDeviceContext(tw);
-
-  return (
-    <>
-      {state.nav.current_route === '/account/login' && <SignIn />}
-      {state.nav.current_route === '/account/auto-signin' && (
-        <AutoSigninDialog />
-      )}
-    </>
-  );
-}

package/src/components/RowndProvider.tsx

@@ -1,56 +0,0 @@
-import React from 'react';
-import { View, StyleSheet } from 'react-native';
-import { GlobalContextProvider } from './GlobalContext';
-import { DefaultContext } from './DefaultContext';
-import { createConfig } from '../utils/config';
-import { RowndComponents } from './RowndComponents';
-import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
-
-// const RowndContext = createContext<TRowndContext | undefined>(undefined);
-
-interface IRowndProviderProps {
-  appKey: string;
-  apiUrl?: string;
-  children: React.ReactNode;
-}
-
-export function RowndProvider({
-  appKey,
-  apiUrl,
-  children,
-}: IRowndProviderProps) {
-  // const [isSigningIn, setIsSigningIn] = useState<boolean>(false);
-
-  // const requestSignIn = useRef(function () {
-  //     setIsSigningIn(true);
-  // });
-
-  // const [rowndState, setRowndState] = useState<any>({
-  //     requestSignIn: requestSignIn.current,
-  // });
-
-  const config = createConfig({
-    appKey,
-    apiUrl,
-  });
-
-  return (
-    <GlobalContextProvider config={config}>
-      <DefaultContext config={config} />
-      <BottomSheetModalProvider>
-        <View style={styles.container}>
-          <>
-            {children}
-            <RowndComponents />
-          </>
-        </View>
-      </BottomSheetModalProvider>
-    </GlobalContextProvider>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});