How to use the react-orbitjs.useOrbit function in react-orbitjs

export default function ProductTasksForCurrentUser({ product }: IProps) {
  const { t } = useTranslations();
  const { currentUser } = useCurrentUser();
  const { dataStore } = useOrbit();

  let tasks = [];

  try {
    tasks = dataStore.cache.query((q) =>
      q
        .findRecords('userTask')
        .filter({ relation: 'product', record: product })
        .filter({ relation: 'user', record: currentUser })
    );

    // for some reason the backend is sending task creations to the frontend qucik
    // enough where the key-checking mechanisms hasn't yet added the first task,
    // so a subsequent task will become a duplicate because both received tasks
    // have yet to be added to the local cache.
    tasks = uniqBy(tasks, (task) => (task.keys || {}).remoteId);

export default function TransitionDetails({ product }) {
  const { t } = useTranslations();
  const { dataStore } = useOrbit();
  const [transitions, setTransitions] = useState([]);
  const { currentUser } = useCurrentUser();
  const { timezone } = attributesFor(currentUser);

  const productRemoteId = remoteIdentityFrom(dataStore, product).keys.remoteId;

  useEffect(() => {
    async function fetcher() {
      let response = await get(`/api/products/${productRemoteId}/transitions`);
      try {
        let json = await response.json();

        let transitions = json.data;
        setTransitions(transitions || []);
      } catch (e) {
        console.debug('transitions not ready, or do not exist');

export const BulkButtons = withBulkActions(function BulkButtons({
  tableName,
  afterBulkAction,
  bulkArchive,
  bulkReactivate,
}) {
  const { t } = useTranslations();
  const { location } = useRouter();
  const [reduxState] = useRedux();
  const { dataStore } = useOrbit();
  const { currentUser } = useCurrentUser();
  const selectedRows = rowSelectionsFor(reduxState, tableName);

  const isInOrganizationProject = location.pathname.endsWith(PROJECT_ROUTES.ORGANIZATION);
  const isInOwnProject = location.pathname.endsWith(PROJECT_ROUTES.OWN);
  const isInArchivedProject = location.pathname.endsWith(PROJECT_ROUTES.ARCHIVED);
  const isInActiveProject = isInOrganizationProject || isInOwnProject;
  const canArchiveOrReactivate = every(selectedRows, (row) =>
    canUserArchive(dataStore, currentUser, row)
  );

  const onBulkArchive = useCallback(async () => {
    try {
      await bulkArchive(selectedRows);
      toast.success('Selected projects archived');
    } catch (e) {

export function CurrentUserFetcher({ children }) {
  const {
    dataStore,
    subscriptions: { users },
  } = useOrbit({
    users: cacheQuery(),
  });
  const { jwt } = useAuth();
  const [refetchCount, setRefetchCount] = useState(0);
  const refetch = useCallback(() => setRefetchCount(refetchCount + 1), [refetchCount]);
  const options = useMemo(() => {
    return {
      method: 'GET',
      headers: {
        ['Authorization']: `Bearer ${jwt}`,
        ['X-Refetch-Count']: refetchCount,
      },
    };
  }, [jwt, refetchCount]);

  const { error, data } = useFetch(

export function ProductSelection({ tableName, onChange, onPermissionRetrieval }: IProps) {
  const { t } = useTranslations();
  const [reduxState] = useRedux();
  const { dataStore } = useOrbit();
  const { isSelected, toggle, selected } = useSelectionManager();
  const selectedRows: ProjectResource[] = rowSelectionsFor(reduxState, tableName);
  const knownProductDefinitions = dataStore.cache.query((q) => q.findRecords('productDefinition'));
  const productDefinitions = knownProductDefinitions.sort(compareVia((a) => attributesFor(a).name));

  const getPermissions = usePermissions(selectedRows, dataStore, onPermissionRetrieval);

  useProductSelection(selectedRows, dataStore, selected, onChange);

  return (
    
      
        {({ value }) => {
          if (!value || Object.keys(value).length === 0) {
            return ;
          }

export default function RowActions({ project }: IProps) {
  const { t } = useTranslations();
  const { dataStore } = useOrbit();
  const { currentUser } = useCurrentUser();
  const { claimOwnership, toggleArchiveProject } = useDataActions(project);

  const owner = dataStore.cache.query((q) => q.findRelatedRecord(project, 'owner'));

  const { dateArchived } = attributesFor(project);

  const dropdownItemText = !dateArchived
    ? t('project.dropdown.archive')
    : t('project.dropdown.reactivate');

  const isCurrentUserOwner = currentUser.id === owner.id;

  return (

export default function LocaleSwitch({ onChange, className }: IProps) {
  const { i18n } = useTranslations();
  const { currentUser } = useCurrentUser();
  const { dataStore } = useOrbit();

  const onSelect = async (e, { value }) => {
    e.preventDefault();

    i18n.changeLanguage(value);

    await update(dataStore, currentUser, {
      attributes: { locale: value },
    });
  };

  const attributes = attributesFor(currentUser) as UserAttributes;
  const userLocale = attributes.locale;
  const { options, language } = i18n;
  const languages = Object.keys(options.resources);

export function useDataActions(project) {
  const { t } = useTranslations();
  const { dataStore } = useOrbit();
  const { currentUser } = useCurrentUser();

  const updateAttribute = async (attribute: string, value: any) => {
    await dataStore.update((q) => q.replaceAttribute(project, attribute, value), defaultOptions());
  };

  const updateOwner = (user: UserResource | string) => {
    if (typeof user === 'string') {
      user = dataStore.cache.query((q) => q.findRecord({ type: 'user', id: user }));
    }

    return dataStore.update(
      (t) => t.replaceRelatedRecord(project, 'owner', user),
      defaultOptions()
    );
  };

export default function InviteOrganization() {
  const { t } = useTranslations();
  const { queryParams } = useQueryParams();
  const { dataStore } = useOrbit();
  const submit = async (payload: OrganizationInviteAttributes) => {
    try {
      await create(payload);

      toast.success(`Invitation sent`);
    } catch (e) {
      toast.error(e.message);
    }
  };

  const create = async (payload: OrganizationInviteAttributes) => {
    const { name, ownerEmail, expiresAt, url } = payload;

    return await dataStore.update(
      (t) =>
        t.addRecord({

export default function SocketManager({ children }) {
  const { dataStore } = useOrbit();
  const { isLoggedIn, auth0Id } = useAuth();

  const hubFactory = useMemoIf(() => new HubConnectionFactory(), !isTesting, [isLoggedIn, auth0Id]);
  const notificationsClient = useMemoIf(
    () => {
      return new NotificationsClient(hubFactory, dataStore);
    },
    !isTesting,
    [isLoggedIn, auth0Id]
  );

  useEffect(() => {
    if (isTesting || !isLoggedIn) {
      return;
    }