Webstorm react typescript live templates

Crud.actions.ts

// Get all
export const get$Entity$s = createAction("$ENTITY_CAP$S/GET_$ENTITY_CAP$S");

export const get$Entity$sSuccess = createAction<PagedType<any>>(
  "$ENTITY_CAP$S/GET_$ENTITY_CAP$S_SUCCESS"
);

export const get$Entity$sError = createAction<PayloadError[]>(
  "$ENTITY_CAP$S/GET_$ENTITY_CAP$_ERROR"
);

// Get single
export const get$Entity$ = createAction("$ENTITY_CAP$S/GET_$ENTITY_CAP$");

export const get$Entity$Success = createAction<any>(
  "$ENTITY_CAP$S/GET_$ENTITY_CAP$_SUCCESS"
);

export const get$Entity$Error = createAction<PayloadError[]>(
  "$ENTITY_CAP$S/GET_$ENTITY_CAP$_ERROR"
);

// Create 
export const create$Entity$ = createAction<{
  $EntityCamelize$: $Entity$Create;
  request: PagedRequestType;
}>("$ENTITY_CAP$S/CREATE_$ENTITY_CAP$");

export const create$Entity$Success = createAction<$Entity$>(
  "$ENTITY_CAP$S/CREATE_$ENTITY_CAP$_SUCCESS"
);

export const create$Entity$Error = createAction<PayloadError[]>(
  "$ENTITY_CAP$S/CREATE_$ENTITY_CAP$_ERROR"
);

// Update
export const update$Entity$ = createAction<{
  $EntityCamelize$: $Entity$;
  request: PagedRequestType;
}>("$ENTITY_CAP$S/UPDATE_$ENTITY_CAP$");

export const update$Entity$Success = createAction(
  "$ENTITY_CAP$S/UPDATE_$ENTITY_CAP$_SUCCESS"
);

export const update$Entity$Error = createAction<PayloadError[]>(
  "$ENTITY_CAP$S/UPDATE_$ENTITY_CAP$_ERROR"
);

// Reset
export const resetSelected$Entity$ = createAction(
  "$ENTITY_CAP$S/RESET_SELECTED_$ENTITY_CAP$"
);

export const reset$Entity$s = createAction("$ENTITY_CAP$S/RESET");

Directory.actions.ts

import { createAction } from "@reduxjs/toolkit";
import { DirectoryItem, PayloadError } from "../../../common/types";

export const get$Entity$Directory = createAction("DIRECTORIES/GET_$ENTITY_CAP$");

export const get$Entity$DirectorySuccess = createAction<DirectoryItem[]>(
  "DIRECTORIES/GET_$ENTITY_CAP$_SUCCESS"
);

export const get$Entity$DirectoryError = createAction<PayloadError[]>(
  "DIRECTORIES/GET_$ENTITY_CAP$_ERROR"
);

Directory.saga.ts

    import { call, ForkEffect, put, takeEvery } from "redux-saga/effects";
    import API from "../../../common/api/api.base";
    import {
      get$Entity$Directory,
      get$Entity$DirectoryError,
      get$Entity$DirectorySuccess,
    } from "../../actions/directories";
    import { ApiResponse } from "../../../common/models/common";
    import { DirectoryItem } from "../../../common/types";
    
    const apiUrl = `/api/directories/$Entity_camel$`;
    
    function* workerGet$Entity$(action: ReturnType<typeof get$Entity$Directory>) {
      try {
        const result: ApiResponse<{ entities: DirectoryItem[] }> = yield call(
          API.get,
          apiUrl,
          action.payload
        );
        if (result.success) {
          yield put(get$Entity$DirectorySuccess(result.value.entities));
        } else {
          yield put(get$Entity$DirectoryError(result.errors));
        }
      } catch (e) {
        yield put(
          get$Entity$DirectoryError([{ key: "", errorMessage: e.message }])
        );
      }
    }
    
    export default function* watch$Entity$DirectorySaga(): Generator<
      ForkEffect<never>,
      void,
      unknown
    > {
      yield takeEvery(get$Entity$Directory.type, workerGet$Entity$);
    }

Directory.selector.tsx

  const $Entity_camel$s = useSelector(
    (state: RootStore) => state.directories.$Entity_camel$s.$Entity_camel$s
  );
  const onGet$Entity$sDirectory = () => dispatch(get$Entity$sDirectory());

Directory.slice.ts

import { createSlice } from "@reduxjs/toolkit";
import { DirectoryItem } from "../../../common/types";
import { BaseState } from "../../../common/models/common";
import {
  get$Entity$Directory,
  get$Entity$DirectoryError,
  get$Entity$DirectorySuccess,
} from "../../actions/directories";

type InitialState = BaseState & {
  $Entity_camel$: DirectoryItem[];
};

const initialState: InitialState = {
  loading: false,
  errors: [],
  $Entity_camel$: [],
  loaded: false,
};

const $Entity_camel$DirectorySlice = createSlice({
  name: "$Entity_camel$",
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(get$Entity$Directory, (state) => {
        state.loading = true;
        state.loaded = false;
      })
      .addCase(get$Entity$DirectorySuccess, (state, action) => {
        state.loading = false;
        state.loaded = true;
        state.$Entity_camel$ = action.payload;
      })
      .addCase(get$Entity$DirectoryError, (state, action) => {
        state.loading = false;
        state.loaded = false;
        state.errors = action.payload;
      });
  },
});

export default $Entity_camel$DirectorySlice.reducer;

Entity.actions.ts

// Get all
export const get$Entity$s = createAction("$ENTITY_CAP$S/GET_$ENTITY_CAP$S");

export const get$Entity$sSuccess = createAction<Paged<$Entity$>>(
  "$ENTITY_CAP$S/GET_$ENTITY_CAP$S_SUCCESS"
);

export const get$Entity$sError = createAction<PayloadError[]>(
  "$ENTITY_CAP$S/GET_$ENTITY_CAP$S_ERROR"
);

// Get single
export const get$Entity$ = createAction("$ENTITY_CAP$S/GET_$ENTITY_CAP$");

export const get$Entity$Success = createAction<$Entity$>(
  "$ENTITY_CAP$S/GET_$ENTITY_CAP$_SUCCESS"
);

export const get$Entity$Error = createAction<PayloadError[]>(
  "$ENTITY_CAP$S/GET_$ENTITY_CAP$_ERROR"
);

// Create 
export const create$Entity$ = createAction<{
  $EntityCamelize$: $Entity$Create;
  request: PagedRequest;
}>("$ENTITY_CAP$S/CREATE_$ENTITY_CAP$");

export const create$Entity$Success = createAction<$Entity$>(
  "$ENTITY_CAP$S/CREATE_$ENTITY_CAP$_SUCCESS"
);

export const create$Entity$Error = createAction<PayloadError[]>(
  "$ENTITY_CAP$S/CREATE_$ENTITY_CAP$_ERROR"
);

// Update
export const update$Entity$ = createAction<{
  $EntityCamelize$: $Entity$Update;
  request: PagedRequest;
}>("$ENTITY_CAP$S/UPDATE_$ENTITY_CAP$");

export const update$Entity$Success = createAction(
  "$ENTITY_CAP$S/UPDATE_$ENTITY_CAP$_SUCCESS"
);

export const update$Entity$Error = createAction<PayloadError[]>(
  "$ENTITY_CAP$S/UPDATE_$ENTITY_CAP$_ERROR"
);

// Reset
export const resetSelected$Entity$ = createAction(
  "$ENTITY_CAP$S/RESET_SELECTED_$ENTITY_CAP$"
);

export const reset$Entity$s = createAction("$ENTITY_CAP$S/RESET");

Entity.container.tsx

import { $Entity$ } from "./$Entity$";
import { useDispatch, useSelector } from "react-redux";
import { RootStore } from "../../store";
import React, { useEffect, useState } from "react";
import { PagedRequest } from "../../common/models";

export const $Entity$sContainer: React.FC = () => {
  // Pagination
  const [offset, setOffset] = useState<number>(0);
  const [currentPage, setCurrentPage] = useState<number>(1);
  const pageSize: number = 5;

  // Queries
  const $Entity_camelized$s = useSelector((state: RootStore) => state.$Entity_camelized$s.$Entity_camelized$s);
  const $Entity_camelized$Loading = useSelector(
    (state: RootStore) => state.$Entity_camelized$s.loading
  );

  // Dispatches
  const dispatch = useDispatch();
  const onGet$Entity$s = (payload: PagedRequestType) =>
    dispatch(get$Entity$s(payload));
  const onUpdate$Entity$ = ($Entity_camelized$: $Entity$) =>
    dispatch(
      update$Entity$({
        $Entity_camelized$Update,
        request: { offset: offset, take: pageSize },
      })
    );
  const onCreate$Entity$ = ($Entity_camelized$: $Entity$) =>
    dispatch(
      create$Entity$({
        $Entity_camelized$Create,
        request: { offset: offset, take: pageSize },
      })
    );
  const onReset$Entity$s = () => dispatch(reset$Entity$s());

  const offsetChanged = (offset: number) => {
    onReset$Entity$s();
    setOffset(offset);
    onGet$Entity$s({ offset: offset, take: pageSize });
  };

  return (
    <$Entity$s
      paged$Entity$s={$Entity_camelized$s}
      $Entity_camelized$Loading={$Entity_camelized$Loading}
      create$Entity$={onCreate$Entity$}
      update$Entity$={onUpdate$Entity$}
      pageSize={pageSize}
      offsetChanged={offsetChanged}
      setCurrentPage={setCurrentPage}
      currentPage={currentPage}
    />
  );
};

Entity.saga.ts

import { call, ForkEffect, put, takeEvery } from "redux-saga/effects";
import API from "../../../common/api/api.base";
import {
  create$Entity$,
  create$Entity$Error,
  create$Entity$Success,
  get$Entity$s,
  get$Entity$sError,
  get$Entity$sSuccess,
  update$Entity$,
  update$Entity$Error,
  update$Entity$Success,
} from "./actions";
import { ApiResponseType, PagedType } from "../../../common/models/common";
import { $Entity$ } from "../types";

const apiUrl = `/api/$Entity_camel$s/`;

function* workerGet$Entity$s(action: ReturnType<typeof get$Entity$s>) {
  try {
    const result: ApiResponseType<PagedType<$Entity$>> = yield call(
      API.get,
      apiUrl,
      action.payload
    );
    if (result.success) {
      yield put(get$Entity$sSuccess(result.value));
    } else {
      yield put(get$Entity$sError(result.errors));
    }
  } catch (e) {
    yield put(get$Entity$sError([{ key: "", errorMessage: e.message }]));
  }
}

function* workerUpdate$Entity$(action: ReturnType<typeof update$Entity$>) {
  try {
    const result: ApiResponseType<$Entity$> = yield call(
      API.put,
      apiUrl,
      action.payload.$Entity_camel$
    );
    if (result.success) {
      yield put(update$Entity$Success());
      yield put(get$Entity$s(action.payload.request));
    } else {
      yield put(update$Entity$Error(result.errors));
    }
  } catch (e) {
    yield put(update$Entity$Error([{ key: "", errorMessage: e.message }]));
  }
}

function* workerCreate$Entity$(action: ReturnType<typeof create$Entity$>) {
  try {
    const result: ApiResponseType<$Entity$> = yield call(
      API.post,
      apiUrl,
      action.payload.$Entity_camel$
    );
    if (result.success) {
      yield put(create$Entity$Success(result.value));
      // Call update contacts list
      yield put(get$Entity$s(action.payload.request));
    } else {
      yield put(create$Entity$Error(result.errors));
    }
  } catch (e) {
    yield put(create$Entity$Error([{ key: "", errorMessage: e.message }]));
  }
}

export default function* watch$Entity$sSaga(): Generator<
  ForkEffect<never>,
  void,
  unknown
> {
  yield takeEvery(get$Entity$s.type, workerGet$Entity$s);
  yield takeEvery(create$Entity$.type, workerCreate$Entity$);
  yield takeEvery(update$Entity$.type, workerUpdate$Entity$);
}

Entity.slice.ts

import { createSlice } from "@reduxjs/toolkit";
import { $Entity$ } from "../types";
import { BaseStateType, PagedType } from "../../../common/models/common";
import {
  create$Entity$,
  create$Entity$Error,
  create$Entity$Success,
  get$Entity$s,
  get$Entity$sError,
  get$Entity$sSuccess,
  reset$Entity$s,
  update$Entity$,
  update$Entity$Error,
  update$Entity$Success,
} from "./actions";

type InitialState = BaseStateType & {
  $Entity_camel$s: PagedType<$Entity$>;
};

const initialState: InitialState = {
  loading: false,
  errors: [],
  $Entity_camel$s: {
    total: 0,
    entities: [],
  },
  loaded: false,
};

const $Entity_camel$sSlice = createSlice({
  name: "$Entity_camel$s",
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(get$Entity$s, (state) => {
        state.errors = [];
        state.loading = true;
        state.loaded = false;
      })
      .addCase(get$Entity$sSuccess, (state, action) => {
        state.$Entity_camel$s = action.payload;
        state.loading = false;
        state.loaded = true;
      })
      .addCase(get$Entity$sError, (state, action) => {
        state.errors = action.payload;
        state.loading = false;
        state.loaded = false;
      })
      .addCase(update$Entity$, (state) => {
        state.loading = true;
        state.loaded = false;
      })
      .addCase(update$Entity$Success, (state, action) => {
        state.loading = false;
        state.loaded = true;
      })
      .addCase(update$Entity$Error, (state, action) => {
        state.errors = action.payload;
        state.loading = false;
        state.loaded = false;
      })
      .addCase(create$Entity$, (state) => {
        state.loading = true;
        state.loaded = false;
      })
      .addCase(create$Entity$Success, (state, action) => {
        state.loading = false;
        state.loaded = true;
      })
      .addCase(create$Entity$Error, (state, action) => {
        state.errors = action.payload;
        state.loading = false;
        state.loaded = false;
      })
      .addCase(reset$Entity$s, (state) => {
        state.$Entity_camel$s.entities = [];
      });
  },
});

export default $Entity_camel$sSlice.reducer;

Entity.tsx

import React, { useState } from "react";
import {
  Box,
  Button,
  chakra,
  Flex,
  Heading,
  Spacer,
  useDisclosure,
} from "@chakra-ui/react";
import { FaPlus } from "react-icons/fa";
import { Paged } from "../../common/models";
import { $Entity$ } from "./types";
import { $Entity$EditModal, $Entity$sTable, $Entity$CreateModal } from "./components";
import { DirectoryItem } from "../../common/types";

const CFaPlus = chakra(FaPlus);

interface I$Entity$sProps {
  paged$Entity$s: PagedType<$Entity$>;
  pageSize: number;
  offsetChanged: (offset: number) => void;
  currentPage: number;
  setCurrentPage: (page: number) => void;
  create$Entity$: ($Entity_camel$: $Entity$Create) => void;
  update$Entity$: ($Entity_camel$: $Entity$Update) => void;
  $Entity_camel$Loading: boolean;
}

export const $Entity$s: React.FC<I$Entity$sProps> = ({
  paged$Entity$s,
  pageSize,
  offsetChanged,
  currentPage,
  setCurrentPage,
  create$Entity$,
  update$Entity$,
  $Entity_camel$Loading
}) => {
  const [selected$Entity$, setSelected$Entity$] = useState<$Entity$ | null>(null);
  const {
    isOpen: isOpen$Entity$Edit,
    onOpen: onOpen$Entity$Edit,
    onClose: onClose$Entity$Edit,
  } = useDisclosure();
  const {
    isOpen: isOpen$Entity$Create,
    onOpen: onOpen$Entity$Create,
    onClose: onClose$Entity$Create,
  } = useDisclosure();

  const handleOpenEdit = ($Entity_camel$: $Entity$) => {
    setSelected$Entity$($Entity_camel$);
    onOpen$Entity$Edit();
  };

  return (
    <>
      <Flex mb={3}>
        <Heading size={"lg"}>$Entity$s</Heading>
        <Spacer />
        <Box>
          <Button colorScheme="teal" onClick={() => onOpen$Entity$Create()}>
            <CFaPlus mr={2} /> Add $Entity_camel$
          </Button>
        </Box>
      </Flex>

      <$Entity$sTable
        paged$Entity$s={paged$Entity$s}
        currentPage={currentPage}
        offsetChanged={offsetChanged}
        pageSize={pageSize}
        setCurrentPage={setCurrentPage}
        showEdit={handleOpenEdit}
      />

      <$Entity$CreateModal
        handleCreate={create$Entity$}
        isOpen={isOpen$Entity$Create}
        onOpen={onOpen$Entity$Create}
        onClose={onClose$Entity$Create}
      />

      <$Entity$EditModal
        handleUpdate={update$Entity$}
        selected$Entity$={selected$Entity$}
        isOpen={isOpen$Entity$Edit}
        onOpen={onOpen$Entity$Edit}
        onClose={onClose$Entity$Edit}
      />
    </>
  );
};

EntityModalCreate.tsx

import React, { useRef } from "react";
import {
  Avatar,
  Box,
  Button,
  Flex,
  FormControl,
  FormErrorMessage,
  FormLabel,
  Input,
  Modal,
  ModalBody,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
} from "@chakra-ui/react";
import { useForm } from "react-hook-form";
import { $Entity$ } from "../types";
import { HookDatePicker, HookSelect } from "../../../common/components/libs";

interface I$Entity$CreateModalProps {
  isOpen: boolean;
  onOpen: () => void;
  onClose: () => void;
  handleCreate: ($Entity_camel$: $Entity$Create) => void;
}

export const $Entity$CreateModal: React.FC<I$Entity$CreateModalProps> = ({
  isOpen,
  onOpen,
  onClose,
  handleCreate
}) => {
  const {
    register,
    control,
    handleSubmit,
    reset,
    watch,
    formState: { errors },
  } = useForm();

  const handleSubmitCreate = (values: $Entity$Create) => {
    handleCreate({
      ...values,
    });
    handleClose();
  };

  const handleClose = () => {
    reset();
    onClose();
  };

  return (
    <>
      <Modal isOpen={isOpen} onClose={onClose} size={"xl"}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>New $Entity_camel$</ModalHeader>
          <form onSubmit={handleSubmit(handleSubmitCreate)}>
            <ModalBody>
              <Box>
                <Box mb={3}>
                  <Flex>
                    <FormControl
                      id="contactId"
                      pr={3}
                      isInvalid={errors.test}
                    >
                      <FormLabel>Test</FormLabel>
                      <HookSelect
                        control={control}
                        name={"testId"}
                        options={[]}
                        rules={{ required: true }}
                      />
                      <FormErrorMessage>
                        {errors.test ? "Test is required" : ""}
                      </FormErrorMessage>
                    </FormControl>
                    <FormControl id="test2" pl={3} isInvalid={errors.test2}>
                      <FormLabel>Test 2</FormLabel>
                      <Input {...register("test2", { required: true })} />
                      <FormErrorMessage>
                        {errors.test2 ? "Test 2 is required" : ""}
                      </FormErrorMessage>
                    </FormControl>
                  </Flex>
                </Box>
                </Box>
            </ModalBody>

            <ModalFooter>
              <Button type={"submit"} mr={3}>
                Create
              </Button>
              <Button colorScheme="gray" onClick={handleClose}>
                Cancel
              </Button>
            </ModalFooter>
          </form>
        </ModalContent>
      </Modal>
    </>
  );
};

EntityModalEdit.tsx

import React, { useEffect, useRef } from "react";
import {
  Box,
  Button,
  Flex,
  FormControl,
  FormErrorMessage,
  FormLabel,
  Input,
  Modal,
  ModalBody,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
} from "@chakra-ui/react";
import { $Entity$, $Entity$Update } from "../types";
import { HookDatePicker, HookSelect } from "../../../common/components/libs";
import { useForm } from "react-hook-form";
import { DirectoryItem } from "../../../common/types";

interface I$Entity$EditModalProps {
  isOpen: boolean;
  onOpen: () => void;
  onClose: () => void;
  selected$Entity$: $Entity$ | null;
  handleUpdate: ($Entity_camel$: $Entity$Update) => void;
}

export const $Entity$EditModal: React.FC<I$Entity$EditModalProps> = ({
  isOpen,
  onOpen,
  onClose,
  selected$Entity$,
  handleUpdate
}) => {
  const {
    register,
    control,
    handleSubmit,
    reset,
    watch,
    formState: { errors },
  } = useForm();

  const handleSubmitUpdate = (values: $Entity$Update) => {
    handleUpdate({
      ...values,
      id: selected$Entity$ ? selected$Entity$.id : null,
    });
    reset();
    onClose();
  };

  useEffect(() => {
    reset({
      ...selected$Entity$,
    });
  }, [selected$Entity$]);

  const handleClose = () => {
    reset();
    onClose();
  };

  return (
    <>
      <Modal isOpen={isOpen} onClose={onClose} size={"xl"}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Edit $Entity_camel$</ModalHeader>
          <form onSubmit={handleSubmit(handleSubmitUpdate)}>
            <ModalBody>
              <Box>
                <Box mb={3}>
                  <Flex>
                    <FormControl
                      id="contactId"
                      pr={3}
                      isInvalid={errors.test}
                    >
                      <FormLabel>Test</FormLabel>
                      <HookSelect
                        control={control}
                        name={"testId"}
                        options={[]}
                        rules={{ required: true }}
                      />
                      <FormErrorMessage>
                        {errors.test ? "Test is required" : ""}
                      </FormErrorMessage>
                    </FormControl>
                    <FormControl id="test2" pl={3} isInvalid={errors.test2}>
                      <FormLabel>Test 2</FormLabel>
                      <Input {...register("test2", { required: true })} />
                      <FormErrorMessage>
                        {errors.test2 ? "Test 2 is required" : ""}
                      </FormErrorMessage>
                    </FormControl>
                  </Flex>
                </Box>
                </Box>
            </ModalBody>

            <ModalFooter>
              <Button type={"submit"} mr={3}>
                Update
              </Button>
              <Button colorScheme="gray" onClick={handleClose}>
                Cancel
              </Button>
            </ModalFooter>
          </form>
        </ModalContent>
      </Modal>
    </>
  );
};

Partial.actions.ts

export const get$Entity$ = createAction("$ENTITY_CAP$S/GET_$ENTITY_CAP$");

export const get$Entity$Success = createAction<$Entity$>(
  "$ENTITY_CAP$S/GET_$ENTITY_CAP$_SUCCESS"
);

export const get$Entity$Error = createAction<PayloadError[]>(
  "$ENTITY_CAP$S/$ENTITY_CAP$_ERROR"
);