How to use react-orbitjs - 10 common examples

<div>
            {isPrivate &amp;&amp; }
            {showProjectActions &amp;&amp; }
          </div>
        

        
      
    );
  }
}

export default compose(
  withRouter,
  withMomentTimezone,
  withOrbit(({ project }) =&gt; ({
    // refetching the project (from local cache)
    // subscribes this component to changes to the project.
    project: (q) =&gt; q.findRecord(project),
    organization: (q) =&gt; q.findRelatedRecord(project, 'organization'),
    owner: (q) =&gt; q.findRelatedRecord(project, 'owner'),
    group: (q) =&gt; q.findRelatedRecord(project, 'group'),
    products: (q) =&gt; q.findRelatedRecords(project, 'products'),
  }))
)(Row);

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 StoreForm({ save, cancel, store }) {
  const { t } = useTranslations();
  const { dataStore } = useOrbit();

  const {
    result: { storeTypes },
  } = useQuery({ storeTypes: [(q) => q.findRecords('storeType'), buildOptions()] });

  const attributes = attributesFor(store || {});
  const isEditing = !!store;

  const existingStoreType = useMemo(() => getStoreType(dataStore, store), [dataStore, store]);

  // Form States
  const [name, setName] = useState(attributes.name || '');
  const [storeType, setStoreType] = useState(existingStoreType);
  const [description, setDescription] = useState(attributes.description || '');
  const [errors, setError] = useState>({});
  // End Form States

  const onSubmit = async (e) => {
    e.preventDefault();
    e.stopPropagation();

const [store, dispatch] = useRedux();
  const { currentOrganizationId } = store.data;

  const currentUserOrganizations = retrieveRelation(dataStore, [
    currentUser,
    'organizationMemberships',
    'organization',
  ]);

  let organizationsAvailableToUser = currentUserOrganizations;

  if (isSuperAdmin && all) {
    organizationsAvailableToUser = _.uniqBy([...currentUserOrganizations, ...all], (org) => org.id);
  }

  const localId = localIdFromRecordIdentity(dataStore, {
    type: 'organization',
    id: currentOrganizationId,
  });

  let currentOrganization = useMemo(() => {
    try {
      if (currentOrganizationId) {
        return dataStore.cache.query((q) => q.findRecord({ type: 'organization', id: localId }));
      }
    } catch (e) {
      // if the current user is a super admin, this  org has not yet
      // been added to the cache
      console.warn(`org not found for ${currentOrganizationId}`, e);
    }
  }, [currentOrganizationId, dataStore.cache, localId]);

export default function Products({ project }: IProps) {
  const { t } = useTranslations();
  const {
    dataStore,
    subscriptions: { products, organization },
  } = useOrbit({
    products: (q) => q.findRelatedRecords(project, 'products'),
    organization: (q) => q.findRelatedRecord(project, 'organization'),
    // cache busters
    userTasks: (q) => q.findRecords('userTask'),
    project: (q) => q.findRecord(project),
  });

  useLiveData(`projects/${idFromRecordIdentity(dataStore, project)}`);
  useLiveData(`products`);
  useLiveData(`user-tasks`);

  let productList;

  if (isEmpty(products)) {
    productList = (
      <div>
        <span data-test-project-product-empty-text="">{t('project.products.empty')}</span>
      </div>
    );
  } else {
    productList = products.map((product) =&gt; );

return function ProjectDataFetcher(props) {
    const { match } = useRouter();
    const {
      params: { id },
    } = match;

    const {
      isLoading,
      error,
      result: { project },
    } = useQuery({
      project: [
        (q) => buildFindRecord(q, 'project', id),
        buildOptions({
          include: [
            'products.product-builds.product-artifacts',
            'products.product-builds.product-publications',
            'products.user-tasks.user',
            // 'products.user-tasks.product.product-definition.workflow',
            'products.product-definition',
            // 'products.product-workflow',
            'organization.organization-product-definitions.product-definition.workflow.store-type',
            'group',
            'owner.group-memberships.group',
            'owner.organization-memberships.organization',
            'reviewers',
            'type',

(data as JSONAPIOperationsPayload).operations.forEach((operation) => {
      let removedRecords = [];
      let transforms = [];

      let operationData;

      switch (operation.op) {
        case 'get':
        case 'update':
        case 'add':
          pushPayload(store, { ...operation });
          break;
        case 'remove':
          operationData = operation.data || operation.ref;
          removedRecords = Array.isArray(operationData) ? operationData : [operationData];

          removedRecords.forEach((record) => {
            let recordIdentity = recordIdentityFrom(
              store,
              record.id,
              toOrbitType(store, record.type)
            );
            // was this record already removed from the cache?
            // maybe we are receiving an operations payload that is telling us
            // to remove something that we've already removed.
            let exists = false;

export function StoresRoute({ selected, onChange }) {
  const { t } = useTranslations();

  return (
    <div data-test-org-settings-stores="">
      <h2>{t('org.storesTitle')}</h2>
      <h3>{t('org.storeSelectTitle')}</h3>

      
    </div>
  );
}

export default compose(
  withOrbit((passedProps) =&gt; {
    const { organization } = passedProps;

    return {
      organizationStores: (q) =&gt; q.findRelatedRecords(organization, 'organizationStores'),
    };
  }),
  mapProps(({ organizationStores, updateOrganizationStore }) =&gt; {
    const { isSuperAdmin } = getPermissions();

    return {
      selected: organizationStores,
      onChange(store) {
        // if not superadmin, this onChange handler is a noop
        if (isSuperAdmin) {
          updateOrganizationStore(store);
        }

removedRecords.forEach((record) => {
            let recordIdentity = recordIdentityFrom(
              store,
              record.id,
              toOrbitType(store, record.type)
            );
            // was this record already removed from the cache?
            // maybe we are receiving an operations payload that is telling us
            // to remove something that we've already removed.
            let exists = false;

            try {
              exists = store.cache.query((q) => q.findRecord(recordIdentity));
            } catch (e) {
              // don't care if this throws an exception;
            }

            if (exists) {

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');