pr05 Typescript Migration #15: Redux base files & migrate user preferences redux system

.storybook/preview.js

@@ -2,14 +2,14 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router';
 
-import configureStore from '../client/store';
+import { setupStore } from '../client/store';
 import '../client/i18n-test';
-import '../client/styles/storybook.css'
+import '../client/styles/storybook.css';
 import { withThemeProvider, themeToolbarItem } from './decorator-theme';
 
 const initialState = window.__INITIAL_STATE__;
 
-const store = configureStore(initialState);
+const store = setupStore(initialState);
 
 export const decorators = [
   (Story) => (

client/custom.d.ts

@@ -4,5 +4,18 @@ declare module '*.svg' {
   const ReactComponent: React.FunctionComponent<
     React.SVGProps<SVGSVGElement> & { title?: string }
   >;
+  // eslint-disable-next-line import/no-default-export
   export default ReactComponent;
 }
+
+// Extend window for Redux DevTools
+interface Window {
+  __REDUX_DEVTOOLS_EXTENSION__?: () => any;
+}
+
+// Extend NodeModule for hot reloading
+interface NodeModule {
+  hot?: {
+    accept(path?: string, callback?: () => void): void;
+  };
+}

client/index.integration.test.jsx

@@ -4,13 +4,13 @@ import React from 'react';
 import Routing from './routes';
 
 import { reduxRender, act, waitFor, screen, within } from './test-utils';
-import configureStore from './store';
+import { setupStore } from './store';
 import * as Actions from './modules/User/actions';
 import { userResponse } from './testData/testServerResponses';
 
 // setup for the app
 const initialState = window.__INITIAL_STATE__;
-const store = configureStore(initialState);
+const store = setupStore(initialState);
 
 // need to mock this file or it'll throw ERRCONNECTED
 jest.mock('./i18n');

client/index.jsx

@@ -5,7 +5,7 @@ import { Router } from 'react-router-dom';
 
 import { useTranslation } from 'react-i18next';
 import browserHistory from './browserHistory';
-import configureStore from './store';
+import { setupStore } from './store';
 import Routing from './routes';
 import ThemeProvider from './modules/App/components/ThemeProvider';
 import Loader from './modules/App/components/loader';
@@ -19,7 +19,7 @@ require('./images/p5js-square-logo.png');
 
 const initialState = window.__INITIAL_STATE__;
 
-const store = configureStore(initialState);
+const store = setupStore(initialState);
 
 const DONATE_LOGO_IMAGE_URL = 'https://donorbox.org/images/white_logo.svg';
 

client/modules/IDE/actions/preferences.js → client/modules/IDE/actions/preferences.ts

@@ -1,8 +1,30 @@
 import i18next from 'i18next';
+import { UpdatePreferencesRequestBody } from '../../../../common/types';
 import { apiClient } from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
+import type {
+  UpdatePreferencesDispatch,
+  SetPreferencesTabValue,
+  SetFontSizeValue,
+  GetRootState,
+  SetLineNumbersValue,
+  SetAutocloseBracketsQuotesValue,
+  SetAutocompleteHinterValue,
+  SetAutosaveValue,
+  SetLinewrapValue,
+  SetLintWarningValue,
+  SetTextOutputValue,
+  SetAllAccessibleOutputValue,
+  SetAutorefreshValue,
+  SetGridOutputValue,
+  SetLanguageValue,
+  SetThemeValue
+} from './preferences.types';
 
-function updatePreferences(formParams, dispatch) {
+function updatePreferences(
+  formParams: UpdatePreferencesRequestBody,
+  dispatch: UpdatePreferencesDispatch
+) {
   apiClient
     .put('/preferences', formParams)
     .then(() => {})
@@ -14,15 +36,15 @@ function updatePreferences(formParams, dispatch) {
     });
 }
 
-export function setPreferencesTab(value) {
+export function setPreferencesTab(value: SetPreferencesTabValue) {
   return {
     type: ActionTypes.SET_PREFERENCES_TAB,
     value
   };
 }
 
-export function setFontSize(value) {
-  return (dispatch, getState) => {
+export function setFontSize(value: SetFontSizeValue) {
+  return (dispatch: UpdatePreferencesDispatch, getState: GetRootState) => {
     // eslint-disable-line
     dispatch({
       type: ActionTypes.SET_FONT_SIZE,
@@ -40,8 +62,8 @@ export function setFontSize(value) {
   };
 }
 
-export function setLineNumbers(value) {
-  return (dispatch, getState) => {
+export function setLineNumbers(value: SetLineNumbersValue) {
+  return (dispatch: UpdatePreferencesDispatch, getState: GetRootState) => {
     dispatch({
       type: ActionTypes.SET_LINE_NUMBERS,
       value
@@ -58,8 +80,10 @@ export function setLineNumbers(value) {
   };
 }
 
-export function setAutocloseBracketsQuotes(value) {
-  return (dispatch, getState) => {
+export function setAutocloseBracketsQuotes(
+  value: SetAutocloseBracketsQuotesValue
+) {
+  return (dispatch: UpdatePreferencesDispatch, getState: GetRootState) => {
     dispatch({
       type: ActionTypes.SET_AUTOCLOSE_BRACKETS_QUOTES,
       value
@@ -76,8 +100,8 @@ export function setAutocloseBracketsQuotes(value) {
   };
 }
 
-export function setAutocompleteHinter(value) {
-  return (dispatch, getState) => {
+export function setAutocompleteHinter(value: SetAutocompleteHinterValue) {
+  return (dispatch: UpdatePreferencesDispatch, getState: GetRootState) => {
     dispatch({
       type: ActionTypes.SET_AUTOCOMPLETE_HINTER,
       value
@@ -94,8 +118,8 @@ export function setAutocompleteHinter(value) {
   };
 }
 
-export function setAutosave(value) {
-  return (dispatch, getState) => {
+export function setAutosave(value: SetAutosaveValue) {
+  return (dispatch: UpdatePreferencesDispatch, getState: GetRootState) => {
     dispatch({
       type: ActionTypes.SET_AUTOSAVE,
       value
@@ -112,8 +136,8 @@ export function setAutosave(value) {
   };
 }
 
-export function setLinewrap(value) {
-  return (dispatch, getState) => {
+export function setLinewrap(value: SetLinewrapValue) {
+  return (dispatch: UpdatePreferencesDispatch, getState: GetRootState) => {
     dispatch({
       type: ActionTypes.SET_LINEWRAP,
       value
@@ -130,8 +154,8 @@ export function setLinewrap(value) {
   };
 }
 
-export function setLintWarning(value) {
-  return (dispatch, getState) => {
+export function setLintWarning(value: SetLintWarningValue) {
+  return (dispatch: UpdatePreferencesDispatch, getState: GetRootState) => {
     dispatch({
       type: ActionTypes.SET_LINT_WARNING,
       value
@@ -148,8 +172,8 @@ export function setLintWarning(value) {
   };
 }
 
-export function setTextOutput(value) {
-  return (dispatch, getState) => {
+export function setTextOutput(value: SetTextOutputValue) {
+  return (dispatch: UpdatePreferencesDispatch, getState: GetRootState) => {
     dispatch({
       type: ActionTypes.SET_TEXT_OUTPUT,
       value
@@ -166,8 +190,8 @@ export function setTextOutput(value) {
   };
 }
 
-export function setGridOutput(value) {
-  return (dispatch, getState) => {
+export function setGridOutput(value: SetGridOutputValue) {
+  return (dispatch: UpdatePreferencesDispatch, getState: GetRootState) => {
     dispatch({
       type: ActionTypes.SET_GRID_OUTPUT,
       value
@@ -184,12 +208,8 @@ export function setGridOutput(value) {
   };
 }
 
-export function setTheme(value) {
-  // return {
-  //   type: ActionTypes.SET_THEME,
-  //   value
-  // };
-  return (dispatch, getState) => {
+export function setTheme(value: SetThemeValue) {
+  return (dispatch: UpdatePreferencesDispatch, getState: GetRootState) => {
     dispatch({
       type: ActionTypes.SET_THEME,
       value
@@ -206,12 +226,8 @@ export function setTheme(value) {
   };
 }
 
-export function setAutorefresh(value) {
-  // return {
-  //   type: ActionTypes.SET_AUTOREFRESH,
-  //   value
-  // };
-  return (dispatch, getState) => {
+export function setAutorefresh(value: SetAutorefreshValue) {
+  return (dispatch: UpdatePreferencesDispatch, getState: GetRootState) => {
     dispatch({
       type: ActionTypes.SET_AUTOREFRESH,
       value
@@ -228,15 +244,18 @@ export function setAutorefresh(value) {
   };
 }
 
-export function setAllAccessibleOutput(value) {
-  return (dispatch) => {
+export function setAllAccessibleOutput(value: SetAllAccessibleOutputValue) {
+  return (dispatch: UpdatePreferencesDispatch, getState: GetRootState) => {
     dispatch(setTextOutput(value));
     dispatch(setGridOutput(value));
   };
 }
 
-export function setLanguage(value, { persistPreference = true } = {}) {
-  return (dispatch, getState) => {
+export function setLanguage(
+  value: SetLanguageValue,
+  { persistPreference = true } = {}
+) {
+  return (dispatch: UpdatePreferencesDispatch, getState: GetRootState) => {
     i18next.changeLanguage(value);
     dispatch({
       type: ActionTypes.SET_LANGUAGE,

client/modules/IDE/actions/preferences.types.ts

@@ -0,0 +1,116 @@
+import * as ActionTypes from '../../../constants';
+import type { PreferencesState } from '../reducers/preferences';
+import type { RootState } from '../../../reducers';
+
+// Value Definitions:
+export type SetPreferencesTabValue = PreferencesState['tabIndex'];
+export type SetFontSizeValue = PreferencesState['fontSize'];
+export type SetLineNumbersValue = PreferencesState['lineNumbers'];
+export type SetAutocloseBracketsQuotesValue = PreferencesState['autocloseBracketsQuotes'];
+export type SetAutocompleteHinterValue = PreferencesState['autocompleteHinter'];
+export type SetAutosaveValue = PreferencesState['autosave'];
+export type SetLinewrapValue = PreferencesState['linewrap'];
+export type SetLintWarningValue = PreferencesState['lintWarning'];
+export type SetTextOutputValue = PreferencesState['textOutput'];
+export type SetGridOutputValue = PreferencesState['gridOutput'];
+export type SetThemeValue = PreferencesState['theme'];
+export type SetAutorefreshValue = PreferencesState['autorefresh'];
+export type SetLanguageValue = PreferencesState['language'];
+export type SetAllAccessibleOutputValue =
+  | SetTextOutputValue
+  | SetGridOutputValue;
+
+// Action Definitions:
+export type OpenPreferencesAction = {
+  type: typeof ActionTypes.OPEN_PREFERENCES;
+};
+export type SetPreferencesAction = {
+  type: typeof ActionTypes.SET_PREFERENCES;
+  preferences: PreferencesState;
+};
+export type SetErrorAction = {
+  type: typeof ActionTypes.ERROR;
+  error: unknown;
+};
+
+export type SetPreferencesTabAction = {
+  type: typeof ActionTypes.SET_PREFERENCES_TAB;
+  value: SetPreferencesTabValue;
+};
+export type SetFontSizeAction = {
+  type: typeof ActionTypes.SET_FONT_SIZE;
+  value: SetFontSizeValue;
+};
+export type SetLineNumbersAction = {
+  type: typeof ActionTypes.SET_LINE_NUMBERS;
+  value: SetLineNumbersValue;
+};
+export type SetAutocloseBracketsQuotesAction = {
+  type: typeof ActionTypes.SET_AUTOCLOSE_BRACKETS_QUOTES;
+  value: SetAutocloseBracketsQuotesValue;
+};
+export type SetAutocompleteHinterAction = {
+  type: typeof ActionTypes.SET_AUTOCOMPLETE_HINTER;
+  value: SetAutocompleteHinterValue;
+};
+export type SetAutosaveAction = {
+  type: typeof ActionTypes.SET_AUTOSAVE;
+  value: SetAutosaveValue;
+};
+export type SetLinewrapAction = {
+  type: typeof ActionTypes.SET_LINEWRAP;
+  value: SetLinewrapValue;
+};
+export type SetLintWarningAction = {
+  type: typeof ActionTypes.SET_LINT_WARNING;
+  value: SetLintWarningValue;
+};
+export type SetTextOutputAction = {
+  type: typeof ActionTypes.SET_TEXT_OUTPUT;
+  value: SetTextOutputValue;
+};
+export type SetGridOutputAction = {
+  type: typeof ActionTypes.SET_GRID_OUTPUT;
+  value: SetGridOutputValue;
+};
+export type SetThemeAction = {
+  type: typeof ActionTypes.SET_THEME;
+  value: SetThemeValue;
+};
+export type SetAutorefreshAction = {
+  type: typeof ActionTypes.SET_AUTOREFRESH;
+  value: SetAutorefreshValue;
+};
+export type SetLanguageAction = {
+  type: typeof ActionTypes.SET_LANGUAGE;
+  language: SetLanguageValue;
+};
+
+export type PreferencesAction =
+  | OpenPreferencesAction
+  | SetPreferencesAction
+  | SetErrorAction
+  | SetPreferencesTabAction
+  | SetFontSizeAction
+  | SetLineNumbersAction
+  | SetAutocloseBracketsQuotesAction
+  | SetAutocompleteHinterAction
+  | SetAutosaveAction
+  | SetLinewrapAction
+  | SetLintWarningAction
+  | SetTextOutputAction
+  | SetGridOutputAction
+  | SetThemeAction
+  | SetAutorefreshAction
+  | SetLanguageAction;
+
+export type UpdatePreferencesDispatch = (
+  action: PreferencesAction | PreferencesThunk
+) => void;
+
+export type PreferencesThunk = (
+  dispatch: UpdatePreferencesDispatch,
+  getState: GetRootState
+) => void;
+
+export type GetRootState = () => RootState;