Merge pull request #349 from EmmaRamirez/beta

Release: 1.4.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuzlocke-generator",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "A tool for generating nuzlocke team pics from data",
   "main": "dist/bundle.js",
   "scripts": {
@@ -36,13 +36,17 @@
     "@types/chalk": "^2.2.0",
     "@types/color": "^3.0.0",
     "@types/cypress": "^1.1.3",
+    "@types/deep-diff": "^1.0.0",
     "@types/draft-js": "^0.10.40",
+    "@types/lodash.debounce": "^4.0.6",
+    "@types/mustache": "^4.0.1",
     "@types/ramda": "^0.25.37",
     "@types/redux": "^3.6.0",
     "@types/uuid": "^3.4.4",
     "babel-plugin-module-resolver": "^3.1.1",
     "color": "^3.0.0",
     "cypress": "^5.3.0",
+    "deep-diff": "^1.0.2",
     "deep-equal": "^1.0.1",
     "docz": "^0.8.0",
     "dotenv": "^8.2.0",
@@ -51,6 +55,7 @@
     "html-webpack-plugin": "^3.2.0",
     "is-mobile": "^2.2.1",
     "jest-emotion": "^9.2.7",
+    "mustache": "^4.0.1",
     "normalize.css": "^8.0.1",
     "ramda": "^0.25.0",
     "react-color": "^2.17.3",
@@ -59,6 +64,7 @@
     "react-infinite-scroller": "^1.2.4",
     "react-loadable-ts-transformer": "0.0.5",
     "redux-mock-store": "^1.5.3",
+    "tailwindcss": "^1.9.1",
     "tslib": "^2.0.0",
     "tslint": "^6.1.2"
   },

src/actions/index.ts

@@ -30,3 +30,6 @@ export * from './deleteBox';
 export * from './toggleTemtemMode';
 export * from './toggleMobileResultView';
 export * from './stats';
+export * from './updateEditorHistory';
+export * from './triggerDownload';
+export * from './toggleDialog';

src/actions/nuzlockes.ts

@@ -3,8 +3,8 @@ import { Action } from 'actions';
 export type NEW_NUZLOCKE = 'NEW_NUZLOCKE';
 export const NEW_NUZLOCKE: NEW_NUZLOCKE = 'NEW_NUZLOCKE';
 
-export type newNuzlocke = (data, {isCopy}) => Action<NEW_NUZLOCKE>;
-export function newNuzlocke(data, {isCopy}): Action<NEW_NUZLOCKE> {
+export type newNuzlocke = (data, { isCopy }) => Action<NEW_NUZLOCKE>;
+export function newNuzlocke(data, { isCopy }): Action<NEW_NUZLOCKE> {
     return {
         type: NEW_NUZLOCKE,
         data,
@@ -26,12 +26,8 @@ export function deleteNuzlocke(id: string): Action<DELETE_NUZLOCKE> {
 export type SWITCH_NUZLOCKE = 'SWITCH_NUZLOCKE';
 export const SWITCH_NUZLOCKE: SWITCH_NUZLOCKE = 'SWITCH_NUZLOCKE';
 
-export type switchNuzlocke = (
-    id: string,
-) => Action<SWITCH_NUZLOCKE>;
-export function switchNuzlocke(
-    id: string,
-): Action<SWITCH_NUZLOCKE> {
+export type switchNuzlocke = (id: string) => Action<SWITCH_NUZLOCKE>;
+export function switchNuzlocke(id: string): Action<SWITCH_NUZLOCKE> {
     return {
         type: SWITCH_NUZLOCKE,
         id,
@@ -53,8 +49,16 @@ export function updateNuzlocke(id: string, data): Action<UPDATE_NUZLOCKE> {
 export type UPDATE_SWITCH_NUZLOCKE = 'UPDATE_SWITCH_NUZLOCKE';
 export const UPDATE_SWITCH_NUZLOCKE: UPDATE_SWITCH_NUZLOCKE = 'UPDATE_SWITCH_NUZLOCKE';
 
-export type updateSwitchNuzlocke = (id: string, newId: string, data) => Action<UPDATE_SWITCH_NUZLOCKE>;
-export function updateSwitchNuzlocke(id: string, newId: string, data): Action<UPDATE_SWITCH_NUZLOCKE> {
+export type updateSwitchNuzlocke = (
+    id: string,
+    newId: string,
+    data,
+) => Action<UPDATE_SWITCH_NUZLOCKE>;
+export function updateSwitchNuzlocke(
+    id: string,
+    newId: string,
+    data,
+): Action<UPDATE_SWITCH_NUZLOCKE> {
     return {
         type: UPDATE_SWITCH_NUZLOCKE,
         id,

src/actions/toggleDialog.ts

@@ -0,0 +1,13 @@
+import { Action } from 'actions';
+import { DialogViewType } from 'models';
+
+export type TOGGLE_DIALOG = 'TOGGLE_DIALOG';
+export const TOGGLE_DIALOG: TOGGLE_DIALOG = 'TOGGLE_DIALOG';
+
+export type toggleDialog = (dialogTarget: DialogViewType) => Action<TOGGLE_DIALOG>;
+export const toggleDialog = (dialogTarget: DialogViewType): Action<TOGGLE_DIALOG> => {
+    return {
+        type: TOGGLE_DIALOG,
+        dialog: dialogTarget,
+    };
+};

src/actions/triggerDownload.ts

@@ -0,0 +1,11 @@
+import { Action } from './action';
+
+export type TRIGGER_DOWNLOAD = 'TRIGGER_DOWNLOAD';
+export const TRIGGER_DOWNLOAD: TRIGGER_DOWNLOAD = 'TRIGGER_DOWNLOAD';
+
+export type triggerDownload = () => Action<TRIGGER_DOWNLOAD, boolean>;
+export const triggerDownload = (): Action<TRIGGER_DOWNLOAD, boolean> => {
+    return {
+        type: TRIGGER_DOWNLOAD,
+    };
+};

src/actions/updateEditorHistory.ts

@@ -0,0 +1,35 @@
+import { Action } from './action';
+import { History } from 'reducers/editorHistory';
+
+export type UPDATE_EDITOR_HISTORY = 'UPDATE_EDITOR_HISTORY';
+export const UPDATE_EDITOR_HISTORY: UPDATE_EDITOR_HISTORY = 'UPDATE_EDITOR_HISTORY';
+
+export type updateEditorHistory = (present: any) => Action<UPDATE_EDITOR_HISTORY, any>;
+export const updateEditorHistory = (present: any): Action<UPDATE_EDITOR_HISTORY, any> => {
+    return {
+        type: UPDATE_EDITOR_HISTORY,
+        present,
+    };
+};
+
+export type UNDO_EDITOR_HISTORY = 'UNDO_EDITOR_HISTORY';
+export const UNDO_EDITOR_HISTORY: UNDO_EDITOR_HISTORY = 'UNDO_EDITOR_HISTORY';
+
+export type undoEditorHistory = (present: any) => Action<UNDO_EDITOR_HISTORY, any>;
+export const undoEditorHistory = (present: any): Action<UNDO_EDITOR_HISTORY, any> => {
+    return {
+        type: UNDO_EDITOR_HISTORY,
+        present,
+    };
+};
+
+export type REDO_EDITOR_HISTORY = 'REDO_EDITOR_HISTORY';
+export const REDO_EDITOR_HISTORY: REDO_EDITOR_HISTORY = 'REDO_EDITOR_HISTORY';
+
+export type redoEditorHistory = (present: any) => Action<REDO_EDITOR_HISTORY, any>;
+export const redoEditorHistory = (present: any): Action<REDO_EDITOR_HISTORY, any> => {
+    return {
+        type: REDO_EDITOR_HISTORY,
+        present,
+    };
+};

src/components/AddPokemonButton/AddPokemonButton.tsx

@@ -6,7 +6,7 @@ import { Button, Intent } from '@blueprintjs/core';
 
 export const AddPokemonButtonBase = ({ onClick }: { onClick: onClick }) => (
     <Button
-        icon='add'
+        icon="add"
         intent={Intent.SUCCESS}
         className="add-new-pokemon"
         onClick={(e) => {

src/components/App/App.tsx

@@ -6,11 +6,19 @@ import Loadable from 'react-loadable';
 import './app.css';
 import { Hotkeys } from 'components/Hotkeys';
 import { State } from 'state';
-import { version1116 } from 'actions';
+import { updateEditorHistory } from 'actions';
 import { feature } from 'utils';
+import { isEqual } from 'lodash';
+import { omit } from 'ramda';
+import { History } from 'reducers/editorHistory';
+import { Drawer } from '@blueprintjs/core';
+import { ImagesDrawer } from 'components/Shared/ImagesDrawer';
+import { ErrorBoundary } from 'components';
+import { BugReporter } from 'components/BugReporter';
 
 export interface AppProps {
     style: State['style'];
+    view: State['view'];
 }
 
 function Loading() {
@@ -25,49 +33,109 @@ const Editor = Loadable({
     },
 });
 
-const Result = Loadable({
-    loader: () => feature.resultv2 ? import('components/Result/Result2') : import('components/Result/Result'),
-    loading: Loading,
-    render(loaded) {
-        return <loaded.Result />;
-    },
-});
-
-export class UpdaterBase extends React.PureComponent<{customMoveMap: State['customMoveMap'], version1116: typeof version1116 }> {
+export class UpdaterBase extends React.Component<{
+    present: Omit<State, 'editorHistory'>;
+    updateEditorHistory: updateEditorHistory;
+    lrt: History<any>['lastRevisionType'];
+}> {
     public componentDidMount() {
-        if (!Array.isArray(this.props.customMoveMap)) {
-            this.props.version1116();
+        console.log('Called component did mount');
+        // initial history record
+        this.props.updateEditorHistory(this.props.present);
+    }
+
+    // eslint-disable-next-line camelcase
+    public UNSAFE_componentWillReceiveProps(prev) {
+        if (
+            (prev.lrt === 'update') &&
+            this.props.present != null &&
+            this.props.present != null &&
+            !isEqual(this.props.present, prev.present)
+        ) {
+            console.log(this.props.lrt, prev.lrt);
+            this.props.updateEditorHistory(prev.present);
         }
     }
+
     public render() {
         return <div />;
-    };
+    }
 }
 
-export const Updater = connect((state: State) => ({ customMoveMap: state.customMoveMap }), { version1116 })(UpdaterBase);
+export const Updater = connect(
+    (state: State) => ({
+        present: omit(['editorHistory'], state),
+        lrt: state?.editorHistory?.lastRevisionType,
+    }),
+    { updateEditorHistory },
+    null,
+    { pure: false },
+)(UpdaterBase);
 
-export class AppBase extends React.PureComponent<AppProps> {
+export class AppBase extends React.PureComponent<AppProps, {result2?: boolean}> {
     public constructor(props: AppProps) {
         super(props);
+        this.state = {result2: false};
+    }
+
+    public componentDidMount() {
+        if (feature.resultv2) {
+            // TOP SECRET
+            if (this.props.style.customCSS.includes('resultv2')) {
+                this.setState({result2: true});
+            } else {
+                this.setState({result2: false});
+            }
+        }
     }
 
     public render() {
+        const {style, view} = this.props;
+        console.log('features', feature);
+
+        const Result = Loadable({
+            loader: () =>
+                this.state.result2
+                    ? import('components/Result/Result2')
+                    : import('components/Result/Result'),
+            loading: Loading,
+            render(loaded) {
+                return <loaded.Result />;
+            },
+        });
+
         return (
-            <div
-                className="app"
-                role="main"
-                style={{
-                    background: this.props.style.editorDarkMode ? '#111' : '#fff',
-                }}>
-                <Updater />
-                <Hotkeys />
-                <Editor />
-                <Result />
-            </div>
+            <ErrorBoundary errorMessage={<div className='p-6 center-text'>
+                <h2>There was a problem retrieving your nuzlocke data.</h2>
+                <p>Please consider submitting a bug report.</p>
+
+                <BugReporter defaultOpen />
+            </div>}>
+                <div
+                    className="app"
+                    role="main"
+                    style={{
+                        background: this.props.style.editorDarkMode ? '#111' : '#fff',
+                    }}>
+                    <Updater />
+                    <Hotkeys />
+                    <Editor />
+                    <Result />
+                    <Drawer
+                        isOpen={view?.dialogs?.imageUploader}
+                        size={Drawer.SIZE_STANDARD}
+                    >
+                        <ImagesDrawer />
+                    </Drawer>
+                </div>
+            </ErrorBoundary>
         );
     }
 }
 
 export const App = connect(
-    (state: Pick<State, keyof State>) => ({ style: state.style }),
+    (state: Pick<State, keyof State>) => ({
+        style: state.style,
+        view: state.view,
+    })
 )(AppBase);

src/components/App/__tests__/App.test.tsx

@@ -11,7 +11,7 @@ describe('<App />', () => {
         const store = configureStore()({});
         const wrapper = mount(
             <Provider store={store}>
-                <App style={styleDefaults} />
+                <App view={{dialogs: {imageUploader: false}}} style={styleDefaults} />
             </Provider>,
         );
         expect(wrapper).toBeDefined();

src/components/App/app.css

@@ -7,10 +7,13 @@
 }
 .release-notes-wrapper h1 {
   font-size: 1.5rem !important;
+  font-weight: bold;
 }
 .release-notes-wrapper h2 {
   margin-top: 0.5rem;
   font-size: 1.2rem !important;
+  font-weight: bold;
+  margin-bottom: 0.25rem;
 }
 .release-notes-wrapper h4 {
   background: rgba(244,244,244,0.1);
@@ -22,6 +25,9 @@
   width: 4rem;
   text-align: center;
 }
+.release-notes-wrapper a {
+    color: #24acf0;
+}
 .release-notes-wrapper p {
   line-height: 1.4;
   margin-top: 0.5rem;
@@ -32,12 +38,17 @@
   margin: 0 auto;
   max-width: 100%;
 }
-.release-notes-wrapper a {
-  margin-left: 4px;
-}
 .release-notes-wrapper li ul {
   margin: 0;
 }
+.release-notes-wrapper ul {
+    list-style-type: disc;
+    margin-left: 40px;
+}
+.release-notes-wrapper li > ul {
+    margin-left: 80px;
+}
+
 .bp3-dark .release-dialog h1,
 .bp3-dark .release-dialog h2,
 .bp3-dark .release-dialog h3,