How to use the @reduxjs/toolkit.createEntityAdapter function in @reduxjs/toolkit

To help you get started, we’ve selected a few @reduxjs/toolkit examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github pipe-cd / pipe / pkg / app / web / src / modules / environments.ts View on Github external
import {
  createAsyncThunk,
  createEntityAdapter,
  createSlice,
  Dictionary,
  EntityId,
} from "@reduxjs/toolkit";
import { Environment } from "pipe/pkg/app/web/model/environment_pb";
import type { AppState } from "../store";
import * as envsApi from "../api/environments";

const MODULE_NAME = "environments";

export const environmentsAdapter = createEntityAdapter(
  {}
);

const {
  selectById,
  selectAll,
  selectEntities,
  selectIds,
} = environmentsAdapter.getSelectors();

export const selectAllEnvs = (state: AppState): Environment.AsObject[] =>
  selectAll(state.environments);
export const selectEnvIds = (state: AppState): EntityId[] =>
  selectIds(state.environments);
export const selectEnvById = (id: EntityId | undefined) => (
  state: AppState
github pipe-cd / pipe / pkg / app / web / src / modules / commands.ts View on Github external
import { PAGE_PATH_DEPLOYMENTS } from "../constants/path";
import { findMetadataByKey } from "../utils/find-metadata-by-key";
import { addToast } from "./toasts";

const METADATA_KEY = {
  TRIGGERED_DEPLOYMENT_ID: "TriggeredDeploymentID",
};

export const COMMAND_TYPE_TEXT: Record = {
  [Command.Type.APPROVE_STAGE]: "Approve Stage",
  [Command.Type.CANCEL_DEPLOYMENT]: "Cancel Deployment",
  [Command.Type.SYNC_APPLICATION]: "Sync Application",
  [Command.Type.UPDATE_APPLICATION_CONFIG]: "Update Application Config",
};

const commandsAdapter = createEntityAdapter();
export const fetchCommand = createAsyncThunk(
  "commands/fetch",
  async (commandId: string, thunkAPI) => {
    const { command } = await getCommand({ commandId });
    if (command === undefined) {
      throw Error("command not found");
    }

    if (command.status !== CommandStatus.COMMAND_SUCCEEDED) {
      return command;
    }

    switch (command.type) {
      case Command.Type.SYNC_APPLICATION: {
        const deploymentId = findMetadataByKey(
          command.metadataMap,
github pipe-cd / pipe / pkg / app / web / src / modules / pipeds.ts View on Github external
EntityState,
  EntityId,
} from "@reduxjs/toolkit";
import { Piped } from "pipe/pkg/app/web/model/piped_pb";
import type { AppState } from "../store";
import * as pipedsApi from "../api/piped";

export interface RegisteredPiped {
  id: string;
  key: string;
  isNewKey: boolean;
}

const MODULE_NAME = "pipeds";

const pipedsAdapter = createEntityAdapter({});

const { selectById, selectIds, selectAll } = pipedsAdapter.getSelectors();

export const selectPipedById = (id?: EntityId | null) => (
  state: AppState
): Piped.AsObject | undefined =>
  id ? selectById(state.pipeds, id) : undefined;
export const selectPipedIds = (state: AppState): EntityId[] =>
  selectIds(state.pipeds);
export const selectAllPipeds = (state: AppState): Piped.AsObject[] =>
  selectAll(state.pipeds);

export const fetchPipeds = createAsyncThunk(
  `${MODULE_NAME}/fetchList`,
  async (withStatus: boolean) => {
    const { pipedsList } = await pipedsApi.getPipeds({ withStatus });
github pipe-cd / pipe / pkg / app / web / src / modules / toasts.ts View on Github external
import {
  createEntityAdapter,
  createSlice,
  PayloadAction,
} from "@reduxjs/toolkit";

export type ToastSeverity = "error" | "success" | "warning" | undefined;

export interface IToast {
  id: string;
  message: string;
  severity?: ToastSeverity;
  to?: string;
}

const toastsAdapter = createEntityAdapter();

export const { selectAll } = toastsAdapter.getSelectors();

export const toastsSlice = createSlice({
  name: "toasts",
  initialState: toastsAdapter.getInitialState({}),
  reducers: {
    addToast(
      state,
      action: PayloadAction<{
        message: string;
        severity?: ToastSeverity;
        to?: string;
      }>
    ) {
      toastsAdapter.addOne(state, {
github pipe-cd / pipe / pkg / app / web / src / modules / applications-live-state.ts View on Github external
createSlice,
} from "@reduxjs/toolkit";
import {
  ApplicationLiveStateSnapshot,
  KubernetesResourceState,
} from "pipe/pkg/app/web/model/application_live_state_pb";
import { getApplicationLiveState } from "../api/applications";

export type ApplicationLiveState = Required<
  ApplicationLiveStateSnapshot.AsObject
>;

export const HealthStatus = KubernetesResourceState.HealthStatus;
export type HealthStatus = KubernetesResourceState.HealthStatus;

export const applicationLiveStateAdapter = createEntityAdapter<
  ApplicationLiveState
>({
  selectId: (liveState) => liveState.applicationId,
});

export const { selectById } = applicationLiveStateAdapter.getSelectors();

export const fetchApplicationStateById = createAsyncThunk<
  ApplicationLiveState,
  string
>("applicationLiveState/fetchById", async (applicationId) => {
  const { snapshot } = await getApplicationLiveState({
    applicationId,
  });
  return snapshot as ApplicationLiveState;
});
github pipe-cd / pipe / pkg / app / web / src / modules / deployments.ts View on Github external
}
};

export const isStageRunning = (status: StageStatus): boolean => {
  switch (status) {
    case StageStatus.STAGE_NOT_STARTED_YET:
    case StageStatus.STAGE_RUNNING:
      return true;
    case StageStatus.STAGE_SUCCESS:
    case StageStatus.STAGE_FAILURE:
    case StageStatus.STAGE_CANCELLED:
      return false;
  }
};

export const deploymentsAdapter = createEntityAdapter({
  sortComparer: (a, b) => b.updatedAt - a.updatedAt,
});

const initialState = deploymentsAdapter.getInitialState<{
  status: LoadingStatus;
  loading: Record;
  canceling: Record;
  hasMore: boolean;
  cursor: string;
}>({
  status: "idle",
  loading: {},
  canceling: {},
  hasMore: true,
  cursor: "",
});
github pipe-cd / pipe / pkg / app / web / src / modules / api-keys.ts View on Github external
import {
  createAsyncThunk,
  createSlice,
  SerializedError,
  createEntityAdapter,
} from "@reduxjs/toolkit";
import { APIKey } from "pipe/pkg/app/web/model/apikey_pb";
import * as APIKeysAPI from "../api/api-keys";

const MODULE_NAME = "apiKeys";

const apiKeysAdapter = createEntityAdapter();

export const generateAPIKey = createAsyncThunk<
  string,
  { name: string; role: APIKey.Role }
>(`${MODULE_NAME}/generate`, async ({ name, role }) => {
  const res = await APIKeysAPI.generateAPIKey({ name, role });
  return res.key;
});

export const fetchAPIKeys = createAsyncThunk<
  APIKey.AsObject[],
  { enabled: boolean }
>(`${MODULE_NAME}/getList`, async (options) => {
  const res = await APIKeysAPI.getAPIKeys({ options });
  return res.keysList;
});
github pipe-cd / pipe / pkg / app / web / src / modules / applications.ts View on Github external
} from "pipe/pkg/app/web/model/application_pb";
import * as applicationsAPI from "../api/applications";
import {
  ApplicationGitRepository,
  ApplicationKind,
} from "pipe/pkg/app/web/model/common_pb";
import { SyncStrategy } from "./deployments";
import { fetchCommand, CommandStatus, Command } from "./commands";
import type { AppState } from "../store";

const MODULE_NAME = "applications";

export type ApplicationSyncStatusKey = keyof typeof ApplicationSyncStatus;
export type ApplicationKindKey = keyof typeof ApplicationKind;

export const applicationsAdapter = createEntityAdapter({
  selectId: (app) => app.id,
});

export const { selectAll, selectById } = applicationsAdapter.getSelectors();

export interface ApplicationsFilterOptions {
  activeStatus?: string;
  kind?: string;
  envId?: string;
  syncStatus?: string;
  name?: string;
}

export const fetchApplications = createAsyncThunk<
  Application.AsObject[],
  ApplicationsFilterOptions | undefined,