feat: new reducer convention (#489)

Implement a new convention to make reducers typesafe and maintainable
All new reducers should follow this convention and we would migrate older
reducers on the go

* Summary:
	- Specify State[Type] and InitialState in `initialState.ts`
	- Specify ACTIONS and Action[Types] in `actionTypes.ts`
		- Use helper `CreateAction`
	- Recommend using ts-pattern in reducer
See: `./src/utils/typeHelpers/reducers/README.md` for details

* Setup plop file for templating reducer
	Run: `npm run generate-component`
	Pick: `simple reducer` and specify the path where generated files should go

* CreateAction is a typescript helper to convert map into union

fixes: https://sendbird.atlassian.net/browse/UIKIT-3581
Co-authored-by: Ahyoung Ryu <[email protected]>

Author: Sravan S

plop-templates/reducer/actionTypes.hbs

@@ -0,0 +1,14 @@
+// import from correct place
+import { CreateAction } from "../../../../utils/typeHelpers/reducers/createAction";
+
+export const {{constantCase name}}_ACTIONS = {
+  INIT_{{constantCase name}}: 'INIT_{{constantCase name}}',
+} as const;
+
+type {{constantCase name}}_PAYLOAD_TYPES = {
+  [{{constantCase name}}_ACTIONS.INIT_{{constantCase name}}]: {
+    {{camelCase name }}: any;
+  },
+};
+
+export type {{pascalCase name}}ActionTypes = CreateAction<{{constantCase name}}_PAYLOAD_TYPES>;

plop-templates/reducer/initialState.hbs

@@ -0,0 +1,9 @@
+export interface {{pascalCase name}}StateType {
+  {{camelCase name}}: SendbirdChat,
+  loading: boolean,
+}
+
+const initialState: {{pascalCase name}}StateType = {
+  loading: false,
+  {{camelCase name}}: {} as SendbirdChat,
+};

plop-templates/reducer/reducer.hbs

@@ -0,0 +1,17 @@
+import { match } from 'ts-pattern';
+import { {{pascalCase name}}ActionTypes, {{constantCase name}}_ACTIONS } from "./actionTypes";
+import { {{pascalCase name}}StateType } from "./initialState";
+
+export function {{camelCase name}}Reducer(
+  state: {{pascalCase name}}StateType,
+  action: {{pascalCase name}}ActionTypes,
+): {{pascalCase name}}StateType {
+  return match(action)
+    .with({ type: {{constantCase name}}_ACTIONS.INIT_POC }, (action) => {
+      const typeSafePayload = action.payload;
+      return {
+        ...state,
+      };
+    })
+    .otherwise(() => state);
+};

plop-templates/reducer/test.hbs

@@ -0,0 +1,7 @@
+import { {{camelCase name}}Reducer } from '../reducer';
+
+describe('{{camelCase name}}Reducer', () => {
+  it('should return the initial state', () => {
+    expect(1 + 1).toEqual(fromJS({}));
+  });
+});

plop-templates/scss.hbs plop-templates/ui/scss.hbsplop-templates/scss.hbs renamed to plop-templates/ui/scss.hbs

@@ -1,4 +1,4 @@
-module.exports = function (plop) {
+module.exports = (plop) => {
   // create your generators here
   plop.setGenerator('basic component', {
     description: 'this will create a ui component with all necessary subitems - test, scss etc',
@@ -11,22 +11,56 @@ module.exports = function (plop) {
       // add jsx
       type: 'add',
       path: 'src/ui/{{name}}/index.tsx',
-      templateFile: 'plop-templates/tsx.hbs',
+      templateFile: 'plop-templates/ui/tsx.hbs',
     }, {
       // add scss
       type: 'add',
       path: 'src/ui/{{name}}/index.scss',
-      templateFile: 'plop-templates/scss.hbs',
+      templateFile: 'plop-templates/ui/scss.hbs',
     }, {
       // add test
       type: 'add',
       path: 'src/ui/{{name}}/__tests__/{{name}}.spec.js',
-      templateFile: 'plop-templates/test.hbs',
+      templateFile: 'plop-templates/ui/test.hbs',
     }, {
       // add story
       type: 'add',
       path: 'src/ui/{{name}}/stories/{{name}}.stories.js',
-      templateFile: 'plop-templates/stories.hbs',
+      templateFile: 'plop-templates/ui/stories.hbs',
+    }],
+  });
+
+  plop.setGenerator('basic reducer', {
+    description: 'this will create a reducer component with all necessary subitems',
+    prompts: [{
+      type: 'input',
+      name: 'name',
+      message: 'Name your reducer',
+    }, {
+      type: 'input',
+      name: 'path',
+      message: 'Where should we put your reducer? ex: `src/modules/Channel/context/dux`',
+    }], // array of inquirer prompts
+    actions: [{
+      // add initial state
+      type: 'add',
+      path: '{{path}}/initialState.ts',
+      templateFile: 'plop-templates/reducer/initialState.hbs',
+    }, {
+      // add actionType
+      type: 'add',
+      path: '{{path}}/actionTypes.ts',
+      templateFile: 'plop-templates/reducer/actionTypes.hbs',
+    }, {
+      // add reducer
+      type: 'add',
+      path: '{{path}}/reducer.ts',
+      templateFile: 'plop-templates/reducer/reducer.hbs',
+    }, {
+      // add test
+      type: 'add',
+      path: '{{path}}/__tests__/{{camelCase name}}Reducer.spec.js',
+      templateFile: 'plop-templates/reducer/test.hbs',
     }],
   });
 };