Webstorm snippets

Actions.js

export const $ACTION$ = "$ACTION$";
export const $ACTION$_SUCCESS = "$ACTION$_SUCCESS";
export const $ACTION$_ERROR = "$ACTION$_ERROR";

export function $ACTION_FUNC$($3$) {
    return {
        type: $ACTION$,
        $3$
    };
}

export function $ACTION_FUNC$Success($4$) {
    return {
        type: $ACTION$_SUCCESS,
        $4$
    };
}

export function $ACTION_FUNC$Error($5$) {
    return {
        type: $ACTION$_ERROR,
        $5$
    };
}

ConnectedComponent.js

const mapStateToProps = (state, ownProps) => {
    return {
        
    };
};

const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        
    };
};

export default connect(mapStateToProps, mapDispatchToProps)($1$);

FormikDateField.jsx

<Field name={"$CONTROL_NAME$"}
  render={({field, form: {setFieldValue, handleBlur}}) => (
   <div className='form-group'>
     <label htmlFor="$CONTROL_NAME$">$CONTROL_LABEL$</label>
     <MyDatepicker className="form-control"
                   name={'$CONTROL_NAME$'}
                   onBlur={handleBlur}
                   onChange={setFieldValue}
                   selected={field.value}
                   placeholder="Chose date..."
                   />
   </div>
)}/>

FormikForm.jsx

<Formik onSubmit={$FUNCTION_NAME$} initialValues={initialValues || {}}
        validationSchema={validationSchema}
        render={({errors, touched}) => (
           <Form>
              $END
           </Form>
        )}
/>

FormikRsf.js

import React from 'react';
import {Button} from "react-bootstrap";
import {Field, Form, Formik} from "formik";
import {Form as BsForm} from "react-bootstrap";
import * as Yup from 'yup';

const initialValues = {
    $INITIAL_FIELD$: ''
};

const validationSchema = Yup.object().shape({
    $INITIAL_FIELD$: Yup.string()
        .required('Required')
});

function $COMOPNENT_NAME$Form({on$FORM_ACTION$}) {
    const handle$FORM_ACTION$ = (values) => {
        onLogin(values);
    };

    return (
        <Formik onSubmit={handle$FORM_ACTION$} initialValues={initialValues}
                validationSchema={validationSchema}
            render={({errors, touched}) => (
            <Form>
                <Field name={"userName"} render={({field}) => (
                    <BsForm.Group>
                        <BsForm.Label>$INITIAL_FIELD$</BsForm.Label>
                        <BsForm.Control type="text"
                                        className={errors.$INITIAL_FIELD$ && touched.$INITIAL_FIELD$ ? 'is-invalid' : ''}
                                        {...field}/>
                    </BsForm.Group>
                )}/>
                <Button type="submit">Login</Button>
            </Form>
            )}
        />
    );
}

export default AuthForm;

FormikSimpleField.jsx

<Field name={"$CONTROL_NAME$"} render={({field}) => (
 <div className="form-group">
  <label htmlFor="$CONTROL_NAME$">$CONTROL_LABEL$</label>
  <input type="text" className="form-control"
        name='$CONTROL_NAME$'
        id="$CONTROL_NAME$" placeholder="..." {...field}/>
 </div>
)}/>

FormikSimpleFieldValidated.jsx

<Field name={"$CONTROL_NAME$"} render={({field}) => (
 <div className="form-group">
  <label htmlFor="$CONTROL_NAME$">$CONTROL_LABEL$</label>
  <input type="text" className="form-control"
        name='$CONTROL_NAME$'
        className={errors.$CONTROL_NAME$ && touched.$CONTROL_NAME$ ? 'is-invalid' : ''}
        id="$CONTROL_NAME$" placeholder="..." {...field}/>
 </div>
)}/>

HOC.js

import React, {useEffect} from 'react';
import {useDispatch, useSelector} from "react-redux";
import $COMPONENT$ from "./$COMPONENT$";

function $COMPONENT$Container() {
  useEffect(() => {
    
  }, []);
  
  // Queries
  // const myObj = useSelector((state) => state.myReducer.myObj;
  
  // Actions
  const dispatch = useDispatch();
  // const onMyAction = (payload) => dispatch(myAction(payload)

  return (
    <$COMPONENT$ />
  );
}

export default $COMPONENT$Container;

HookDatepicker.js

<Form.Group>
                  <Form.Label htmlFor={'$VAR_NAME$'}>$LABEL$</Form.Label>
                  <HookDatePicker name={"$VAR_NAME$"} placeholder={"Select date..."}
                                  register={register} setValue={setValue} selected={null}/>
                </Form.Group>

HookField.js

<Form.Group>
        <Form.Label htmlFor={'$FIELD_NAME$'}>$FIELD_LABEL$</Form.Label>
        <Form.Control type={'text'}
                      ref={register}
                      name={'$FIELD_NAME$'} placeholder={'...'}/>
</Form.Group>

HookFieldValidated.js

<Form.Group>
        <Form.Label htmlFor={'$FIELD_NAME$'}>$FIELD_LABEL$</Form.Label>
        <Form.Control type={'text'}
                      className={errors.$FIELD_NAME$ ? 'is-invalid' : ''}
                      ref={register({required: true})}
                      name={'$FIELD_NAME$'} placeholder={'...'}/>
</Form.Group>

HookModal.js

import React from 'react';
import {Button, Col, Form, Modal, Row} from "react-bootstrap";
import useForm from "react-hook-form";


function $MODAL_NAME$Modal({handleClose, handle$ACTION$, show}) {
  const {register, handleSubmit, errors, setValue} = useForm();

  const handleSubmit$ACTION$ = (values) => {
    handle$ACTION$(values);
    handleClose();
  };

  return (
    <>
      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>
            $MODAL_NAME$ Modal
          </Modal.Title>
        </Modal.Header>
        <form onSubmit={handleSubmit(handleSubmit$ACTION$)}>
          <Modal.Body>
            
          </Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={handleClose}>
              Cancel
            </Button>
            <Button variant="accent" type='submit'>
              Update
            </Button>
          </Modal.Footer>
        </form>
      </Modal>
    </>
  );
}

export default $MODAL_NAME$Modal;

HookSelect.js

<Form.Group>
<Form.Label htmlFor={'$VAR_NAME$'}>$LABEL$</Form.Label>
  <HookSelect
    name={'$VAR_NAME$'}
    register={register}
    setValue={setValue}
    options={transformObjectToValueLabel(PAYONEER_TRANSACTION_PURPOSES)}
  />
</Form.Group>

ModalFormik.js

import React from 'react';
import {Button, Col, Modal, Row} from "react-bootstrap";
import * as Yup from "yup";
import {Field, Form, Formik} from "formik";

const validationSchema = Yup.object().shape({
    $YUP_FIELD$: Yup.string()
        .required('Required')
});

function $MODAL_NAME$Modal({handleClose, handle$ACTION$, show}) {

    const handleSubmit = (values, {setSubmitting}) => {
        handle$ACTION$(values);
        setSubmitting(false);
        handleClose();
    };

    return (
        <>
            <Modal show={show} onHide={handleClose}>
                <Modal.Header closeButton>
                    <Modal.Title>
                        $MODAL_NAME$ Modal
                    </Modal.Title>
                </Modal.Header>

                <Formik onSubmit={handleSubmit} initialValues={initialValues || {}}
                        validationSchema={validationSchema}
                        render={({errors, touched}) => (
                            <Form>
                                <Modal.Body>

                                    
                                </Modal.Body>
                                <Modal.Footer>
                                    <Button variant="secondary" onClick={handleClose}>
                                        Cancel
                                    </Button>
                                    <Button variant="accent" type='submit'>
                                        Update
                                    </Button>
                                </Modal.Footer>
                            </Form>
                        )}
                />
            </Modal>
        </>
    );
}

export default $MODAL_NAME$Modal;

ModalSimple.js

import React from 'react';
import {Button, Col, Modal, Row} from "react-bootstrap";

function $MODAL_NAME$Modal({handleClose, handle$ACTION_NAME$, show}) {
    return (
        <>
            <Modal show={show} onHide={handleClose}>
                <Modal.Header closeButton>
                    <Modal.Title>
                        $ACTION_NAME$ Modal
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    
                </Modal.Body>
                <Modal.Footer>
                    <Button variant="secondary" onClick={handleClose}>
                        Cancel
                    </Button>
                    <Button variant="accent" onClick={handle$ACTION_NAME$}>
                        Update
                    </Button>
                </Modal.Footer>
            </Modal>
        </>
    );
}

export default $MODAL_NAME$Modal;

Reducer.js

import {$ACTION$, $ACTION$_ERROR, $ACTION$_SUCCESS} from "../actions/$ACTION_FILE$.actions";

const initialState = {
    error: null,
    $ENTITY$: {},
    loading: false,
    loaded: false
};

export default function $NAME$Reducer(state = initialState, action) {
    switch (action.type) {
        case $ACTION$:
            return {...state, loading: true, loaded: false};
        case $ACTION$_SUCCESS:
            return {...state, $ENTITY$: action.payload, loading: false, loaded: true};
        case $ACTION$_ERROR:
            return {...state, loading: false, loaded: false, error: action.error};
        default:
            return state;
    }
}

ReducerActionsImplementation.js

        case $ACTION$:
            return {...state, loading: true, loaded: false};
        case $ACTION$_SUCCESS:
            return {...state, $ENTITY$: action.payload, loading: false, loaded: true};
        case $ACTION$_ERROR:
            return {...state, loading: false, loaded: false, error: action.error};

ReducerActionsImport.js

import {$ACTION$, $ACTION$_ERROR, $ACTION$_SUCCESS} from "../actions/$ACTION_FILE$.actions";

Saga.js

import {call, put, takeEvery} from 'redux-saga/effects';
import ApiBase from "../../../common/api/api.base";
import {toast} from "react-toastify";

const api = new ApiBase();

function* worker$WORKER_NAME$(action) {
    try {
        const result = yield call(
            api.$REQUEST_TYPE$,
            `$API_ROUTE$`,
            action.payload
        );
        if (!result.error) {
            yield put($REDUCER_NAME$Success(result.value));
        } else {
            yield put($REDUCER_NAME$Error(`Failed to get contacts!`));
        }
    } catch (e) {
        yield call(toast.error, e.message);
        yield put($REDUCER_NAME$Error(e.message));
    }
}

export default function* watch$SAGA_NAME$Saga() {
    yield takeEvery($ACTION_NAME$, $WORKER_NAME$);
}

SagaWorker.js

function* worker$WORKER_NAME$(action) {
    try {
        const result = yield call(
            api.$REQUEST_TYPE$,
            `/api/$API_ROUTE$`,
            action.payload
        );
        if (!result.error) {
            yield put($REDUCER_NAME$Success(result.value));
        } else {
            yield put($REDUCER_NAME$Error(`Failed to get $WORKER_NAME$!`));
        }
    } catch (e) {
        yield call(toast.error, e.message);
        yield put($REDUCER_NAME$Error(e.message));
    }
}

YupSimple.js

import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
    $FIELD_NAME$: Yup.string()
        .required('Required')
});