React example code:

This example code lets you log in and out of profile, and select employments. It demonstrates some different ways to use minibeak.

import { Button, TextInputBlock, Well } from "@dossier/salvia-ui";
import { ReactNode } from "hoist-non-react-statics/node_modules/@types/react";
import React, {
  Component,
  ErrorInfo,
  createContext,
  useContext,
  useState,
} from "react";
import { FaKey, FaUser } from "react-icons/fa";
import {
  callProFile,
  defaultConfig,
  MinibeakHookResult,
  MinibeakResourceLookup,
  StrictProFileResource,
  useProFile,
  useProFileIncrementally,
} from "@dossier/minibeak";

// Initialization. Set default api url for requests:
defaultConfig.apiUrl = "/profile/jsonapi";

// Actions:

// These do the same as action creators in kolibri,
// except that they can be called directly. They do
// not need to be bound first.

interface SessionResource extends StrictProFileResource {
  activeDelegateEmploymentDelegations?: EmploymentDelegationResource[];
  loggedInUser?: ProFileUserResource;
  employment?: EmploymentResource;
  enabledEmployments?: EmploymentResource[];
}

interface EmploymentDelegationResource extends StrictProFileResource {
  delegatorEmployment?: EmploymentResource;
  delegateEmployment?: EmploymentResource;
}

interface EmploymentResource extends StrictProFileResource {
  person?: PersonResource;
  employmentInfo?: EmploymentInfoResource;
  departments?: DepartmentResource[];
}

interface EmploymentInfoResource extends StrictProFileResource {}

interface PersonResource extends StrictProFileResource {
  fullName: string;
}

interface ProFileUserResource extends StrictProFileResource {
  person?: PersonResource;
}

interface DepartmentResource extends StrictProFileResource {
  name: string;
}

interface ProFileResourceLookup extends MinibeakResourceLookup {
  sessions?: Record<string, SessionResource>;
  employments?: Record<string, EmploymentResource>;
  employmentDelegations?: Record<string, EmploymentDelegationResource>;
  employmentInfos?: Record<string, EmploymentInfoResource>;
  persons?: Record<string, PersonResource>;
  users?: Record<string, ProFileUserResource>;
}

function doLogin(
  username: string,
  password: string,
  organizationId: string,
  locale: string
) {
  return callProFile({
    ...defaultConfig,

    path: "/session",
    method: "post",
    body: {
      data: {
        attributes: {
          username,
          password,
          permanentLogin: false,
          organizationId,
          locale,
        },
      },
    },
  });
}

function doSelectEmployment(
  employmentId: string,
  delegatorEmploymentId?: string
) {
  return callProFile({
    ...defaultConfig,

    path: "/session/selectEmployment",
    method: "post",
    body: {
      data: {
        type: "session",
        attributes: {
          employmentId,
          delegatorEmploymentId,
        },
      },
    },
  });
}

function doLogout() {
  return callProFile({
    ...defaultConfig,

    path: "/session/logout",
    method: "post",
  });
}

// Components

const SessionContext = createContext<
  MinibeakHookResult<SessionResource, ProFileResourceLookup>
>(null);

function SessionProvider(props: { children?: ReactNode }) {
  const session = useProFile<SessionResource, ProFileResourceLookup>({
    path: "/session/singleton",
    include: [
      "employment.departments",
      "loggedInUser.actualLoggedInUser.person",
      "loggedInUser.person",
      "translationValues",
      "enabledEmployments.employmentInfo.employmentPositionTypeNames",
      "enabledEmployments.departments",
      "user",
      "anonymousUser",
    ],
    minibeakCache: 10, // seconds
    // throwErrors: true,
  });

  // Session is an object that can have these fields:
  // { isReady, isFetching, data, error, resources, response, refresh }

  // Prevent rendering if session fetching crashed:

  if (session.error) {
    return (
      <Well
        variant="dark"
        intent="danger"
        style={{ margin: "2rem", maxWidth: "20rem" }}
      >
        <p>Session request failed. Is backend running? Maybe it has crashed?</p>
      </Well>
    );
  }

  // Pass the session down to children so they can know who is logged in:

  return (
    <SessionContext.Provider value={session}>
      {props.children}
    </SessionContext.Provider>
  );
}

function EmploymentSelector() {
  // Get the session that was passed down
  const session = useContext(SessionContext);

  const [
    isWatingForSelectEmployment,
    setIsWaitingForSelectEmployment,
  ] = useState(false);

  // We need to read the active delegates employment delegations,
  // but if we try to fetch them before we are logged in, we crash.
  // So we must first wait for the user to be logged in:

  const delegationsSession = useProFile<SessionResource, ProFileResourceLookup>(
    {
      // Wait for session. As long as path is falsey, the call will not happen
      path: !!session.data?.loggedInUser && "/session/singleton",
      include: [
        "activeDelegateEmploymentDelegations.delegatorEmployment.employmentInfo.employmentPositionTypeNames",
        "activeDelegateEmploymentDelegations.delegatorEmployment.employmentInfo.orgUnitNames",
        "activeDelegateEmploymentDelegations.delegatorEmployment.person.pictureUrl",
        "activeDelegateEmploymentDelegations.delegateEmployment.person.pictureUrl",
      ],
      minibeakCache: 10, // seconds
    }
  );

  // const orgUnits = useProFile({
  //   path: !!session.data?.loggedInUser && "/orgUnits",
  //   minibeakCache: true,
  // });

  // console.log(orgUnits

  // Handle loading and error states:
  if (!session.data || !delegationsSession.data) return <p>Loading...</p>;
  if (delegationsSession.error) return <p>Error fetching session!</p>;

  const { employment, enabledEmployments } = session.data;
  const { activeDelegateEmploymentDelegations } = delegationsSession.data;

  return (
    <>
      {enabledEmployments.map((enabledEmployment) => (
        <React.Fragment key={enabledEmployment.id}>
          <Button
            elementSize="large"
            intent={
              enabledEmployment.id === employment?.id ? "primary" : "neutral"
            }
            disabled={isWatingForSelectEmployment}
            onClick={async () => {
              setIsWaitingForSelectEmployment(true);
              await doSelectEmployment(enabledEmployment.id);
              await session.refresh(); // Refresh the session in SessionProvider
              setIsWaitingForSelectEmployment(false);
            }}
          >
            {enabledEmployment.person.fullName}
          </Button>

          {(activeDelegateEmploymentDelegations || [])
            .filter(
              (delegation) =>
                (delegation.$relationships.delegateEmployment.data as any)
                  .id === enabledEmployment.id
            )
            .map((delegation) => (
              <Button
                key={delegation.id}
                elementSize="large"
                intent={
                  delegation.delegatorEmployment.id === employment?.id
                    ? "primary"
                    : "neutral"
                }
                disabled={isWatingForSelectEmployment}
                onClick={async () => {
                  setIsWaitingForSelectEmployment(true);
                  await doSelectEmployment(
                    delegation.delegateEmployment.id,
                    delegation.delegatorEmployment.id
                  );
                  await session.refresh(); // Refresh the session in SessionProvider
                  setIsWaitingForSelectEmployment(false);
                }}
              >
                {delegation.delegatorEmployment.person.fullName}
              </Button>
            ))}
        </React.Fragment>
      ))}
    </>
  );
}

const errorMessages = { 401: "Invalid credentials." };

function LoginUi() {
  const session = useContext(SessionContext);

  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [isWaitingForLogin, setIsWaitingForLogin] = useState(false);
  const [loginError, setLoginError] = useState(null);

  if (
    !["localhost", "127.0.0.1"].find(
      (host) => window.location.hostname === host
    )
  ) {
    return (
      <p>
        Unfortunately, because of CORS, you can only try minibeak against
        profile by running a local dev server. No worries, just{" "}
        <a href="https://bitbucket.org/dossiersolutions/minibeak/src/master/src/">
          clone the repo
        </a>
        .
      </p>
    );
  }

  if (!session.data) return <p>Authenticating...</p>;

  if (!session.data.loggedInUser)
    return (
      <form>
        {!session.data.loggedInUser && (
          <>
            {loginError && (
              <Well intent="danger">
                {errorMessages[loginError.response?.status] ||
                  "Error while logging in."}
              </Well>
            )}

            <TextInputBlock
              elementSize="large"
              placeholder="User..."
              rightContent={<FaUser />}
              value={username}
              onChange={(event) => setUsername(event.target.value)}
            />
            <TextInputBlock
              elementSize="large"
              placeholder="Password..."
              type="password"
              rightContent={<FaKey />}
              value={password}
              onChange={(event) => setPassword(event.target.value)}
            />
            <Button
              elementSize="large"
              intent="primary"
              disabled={isWaitingForLogin}
              onClick={async (event) => {
                event.preventDefault();
                setIsWaitingForLogin(true);
                try {
                  await doLogin(username, password, "109106", "nb-NO");
                  await session.refresh(); // Refresh the session in SessionProvider
                  setLoginError(null); // clear old login errors
                } catch (error) {
                  console.log(error);
                  setLoginError(error);
                }
                setIsWaitingForLogin(false);
              }}
            >
              {isWaitingForLogin ? "Logging in..." : "Sign in"}
            </Button>
          </>
        )}
      </form>
    );

  if (!session.data.employment) return <EmploymentSelector />;

  return (
    <>
      <p>
        Logged in as {session.data.loggedInUser?.person?.fullName} (
        {(session.data.employment.departments || [])
          .map((department) => department.name)
          .join(", ")}
        ).
      </p>

      <EmploymentSelector />

      <Button
        elementSize="large"
        onClick={async () => {
          await doLogout();
          await session.refresh(); // Refresh the session in SessionProvider
        }}
      >
        Sign out
      </Button>

      <pre>
        <code>{JSON.stringify(session.data.employment.person, null, 2)}</code>
      </pre>
    </>
  );
}

function PaginationUi() {
  const {
    results,
    loadNextPage,
    totalResults,
    fetchedResults,
    remainingResults,
  } = useProFileIncrementally({
    path: `/coworkerModuleStatusTableRows`,
    queryParams: {
      mode: "COWORKER_DATA",
      max: 20,
      // sort: convertFieldSortSpecToOrderForQuery(fieldSortSpec),
      // filter: generateFilterStringFromMap(debouncedFieldFilterSpec),
      includeSubOrgUnits: false,
    },
    include: [
      "employment.person",
      "employment.employmentInfo.employmentPositionTypeNames",
      "cells.moduleStatus",
    ],
  });

  return (
    <div>
      {results.map((result, i) =>
        result.isFetching ? (
          <p key={i}>Loading...</p>
        ) : (
          <Well key={i}>
            <Button intent="primary" onClick={result.refresh}>
              Refresh
            </Button>
            {result?.data?.map((resource) => {
              return (
                <p key={resource.id}>
                  {resource?.employment?.person?.firstName}
                </p>
              );
            })}
          </Well>
        )
      )}

      {remainingResults && (
        <Button
          onClick={() => {
            loadNextPage();
          }}
        >
          Load more (showing {fetchedResults} of {totalResults})
        </Button>
      )}
    </div>
  );
}

export default function ReactExample() {
  return (
    <ErrorBoundary>
      <SessionProvider>
        <LoginUi />
        <PaginationUi />
      </SessionProvider>
    </ErrorBoundary>
  );
}

interface Props {
  children?: ReactNode;
}

interface State {
  hasError: boolean;
}

class ErrorBoundary extends Component<Props, State> {
  public state: State = {
    hasError: false,
  };

  public static getDerivedStateFromError(_: Error): State {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error("Uncaught error:", error, errorInfo);
  }

  public render() {
    if (this.state.hasError) {
      return <h1>Error boundary triggered!</h1>;
    }

    return this.props.children;
  }
}

These mini-guides explain how to do different things with minibeak. Most of them are also covered by the example code above.

import {defaultConfig, callProFile, processProFileResult} from "@dossier/minibeak";

async function getStatusTableRows() {
  const requestResult = await callProFile({
    ...defaultConfig,
    path:   "/coworkerModuleStatusTableRows",
    include: [
      "employment.person",
      "employment.person.pictureUrl",
      "employment.employmentInfos.employmentPositionTypeNames",
    ],
    queryParams: {
      mode: "MANAGED_COWORKER_DATA",
      offset: 0,
      max: 20,
      includeSubOrgUnits: false,
    },
  });

  const processedResult = processProFileResult(requestResult);

  return processedResult;
}

getStatusTableRows().then((result) => {
  if (result.error) {
    console.log("Error:", result.error)
  }
  else {
    console.log("Data:", result.data);
    console.log("All resources:", result.resources);
    console.log("Response object:", result.response);
  }
})