feat(editor): ✨ add scope picker (#17)

- Button alignment changed to accommodate for extra button.
- Redux state refactored for better structure.

Resolves #3

Author: j3ko

components/common/recent-list-item.component.tsx

@@ -26,8 +26,8 @@ const styles = (theme: CommitComposerTheme) => ({
 export interface OwnProps {
   itemClassName?: string;
   item: string;
-  title: string;
-  display?: JSX.Element;
+  tooltip?: string;
+  display: JSX.Element;
   onClick?: (item: string) => void;
 }
 export interface ReduxProps {}
@@ -37,10 +37,14 @@ export interface State {}
 
 class RecentListItemComponent extends React.Component<Props, State> {
   render(): JSX.Element {
-    const { classes, display, item, itemClassName, title, onClick } = this.props;
+    const { classes, display, item, itemClassName, tooltip, onClick } = this.props;
 
     return (
-      <Tooltip overlayClassName={classes.tooltip} title={title} mouseLeaveDelay={0}>
+      <Tooltip
+        mouseEnterDelay={1.5}
+        overlayClassName={classes.tooltip}
+        title={tooltip}
+        mouseLeaveDelay={0}>
         <Col
           className={classNames(classes.itemContainer, itemClassName)}
           onClick={() => onClick?.(item)}>

components/common/recent-list.component.tsx

@@ -7,8 +7,8 @@ import RecentListItemComponent from './recent-list-item.component';
 
 export type RecentItem = {
   item: string;
-  title: string;
-  display?: JSX.Element;
+  tooltip?: string;
+  display: JSX.Element;
 };
 
 const styles = {
@@ -50,7 +50,7 @@ class RecentListComponent extends React.Component<Props, State> {
                 itemClassName={itemClassName}
                 key={x.item}
                 item={x.item}
-                title={x.title}
+                tooltip={x.tooltip}
                 display={x.display}
                 onClick={(item) => onClick?.(item)}
               />

components/common/searchable-menu.component.tsx

@@ -77,9 +77,17 @@ class SearchableMenuComponent extends React.Component<Props, State> {
   }
 
   componentDidUpdate(prevProps: Readonly<Props>): void {
-    if (!prevProps.focus && this.props.focus) {
+    const { focus, items } = this.props;
+
+    if (!prevProps.focus && focus) {
       this.focus();
     }
+
+    if (prevProps.items !== items) {
+      this.setState({
+        visibleItems: this.renderItems(items),
+      });
+    }
   }
 
   focus(): void {
@@ -124,6 +132,10 @@ class SearchableMenuComponent extends React.Component<Props, State> {
     const { classes } = this.props;
 
     const highlight = (input: string, regex?: RegExp): { elem: JSX.Element; found: boolean } => {
+      if (input === '' || input === undefined) {
+        return;
+      }
+
       const parts: React.ReactNode[] = input.split(regex);
       let found = false;
 
@@ -152,17 +164,20 @@ class SearchableMenuComponent extends React.Component<Props, State> {
         const descriptionRegex = query ? new RegExp(`(${escapeRegExp(query)})`, 'gi') : undefined;
         const description = highlight(x.description, descriptionRegex);
 
-        const found = query === undefined || query === '' || title.found || description.found;
+        const found =
+          query === undefined || query === '' || title.found || (description && description.found);
 
-        description.elem = React.cloneElement(description.elem, {
-          type: 'secondary',
-          className: classes.description,
-        });
+        if (description) {
+          description.elem = React.cloneElement(description.elem, {
+            type: 'secondary',
+            className: classes.description,
+          });
+        }
 
         return {
           item: x.item,
           title: title.elem,
-          description: description.elem,
+          description: description && description.elem,
           icon: x.icon,
           found,
         };

components/editor/editor.component.tsx

@@ -29,9 +29,13 @@ const styles = (theme: CommitComposerTheme) => ({
     },
   },
   buttons: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
     padding: 8,
-    width: '100%',
+    height: '100%',
     justifyContent: 'flex-end',
+    alignItems: 'flex-end',
   },
 });
 
@@ -70,7 +74,9 @@ class EditorComponent extends React.Component<Props, State> {
           allowClear
         />
 
-        <Space className={classes.buttons}>{children}</Space>
+        <Space direction="vertical" className={classes.buttons}>
+          {children}
+        </Space>
       </div>
     );
   }

components/editor/state/editor.action.ts

@@ -1,6 +1,4 @@
 import { defineAction, defineScenarioAction } from 'redux-typed-actions';
-import { GitmojiDefinition } from 'shared/presets/gitmojis';
-import { TypeDefinition } from 'shared/presets/types';
 import { ValidationResult } from 'state';
 
 export const EditorUpdatedAction = defineAction<string>('EditorUpdatedAction');
@@ -9,6 +7,3 @@ export const ValidationUpdatedAsync = defineScenarioAction<undefined, Validation
 );
 export const EditorFormatAction = defineAction('EditorFormatAction');
 export const EditorLoadAction = defineAction<boolean>('EditorLoadAction');
-export const GitmojiSelectAction = defineAction<GitmojiDefinition>('GitmojiSelectAction');
-export const TypeSelectAction = defineAction<TypeDefinition>('TypeSelectAction');
-export const ToggleShortcodeAction = defineAction<boolean>('ToggleShortcodeAction');

components/editor/state/editor.epic.ts

@@ -1,17 +1,12 @@
+import { GitmojiSelectAction, TypeSelectAction } from 'components/preset/state/preset.action';
 import { Epic } from 'redux-observable';
 import { PlainAction } from 'redux-typed-actions';
 import { concat, of } from 'rxjs';
 import { debounceTime, switchMap } from 'rxjs/operators';
 import { requestValidation } from 'shared/api';
 import { AppState } from 'state';
 
-import {
-  EditorFormatAction,
-  EditorLoadAction,
-  EditorUpdatedAction,
-  GitmojiSelectAction,
-  TypeSelectAction,
-} from './editor.action';
+import { EditorFormatAction, EditorLoadAction, EditorUpdatedAction } from './editor.action';
 
 export const updateValidation: Epic<PlainAction, PlainAction, AppState> = (action$, store$) =>
   action$

components/editor/state/editor.reducer.ts

@@ -1,17 +1,16 @@
+import {
+  GitmojiSelectAction,
+  ScopeSelectAction,
+  TypeSelectAction,
+} from 'components/preset/state/preset.action';
 import { PlainAction } from 'redux-typed-actions';
 import { CommitMessageLib } from 'shared/commit-message.lib';
-import { LRUCache } from 'shared/lru-cache';
-import { GitmojiDefinition } from 'shared/presets/gitmojis';
-import { TypeDefinition } from 'shared/presets/types';
 import { AppState, EditorState } from 'state';
 
 import {
   EditorFormatAction,
   EditorLoadAction,
   EditorUpdatedAction,
-  GitmojiSelectAction,
-  ToggleShortcodeAction,
-  TypeSelectAction,
   ValidationUpdatedAsync,
 } from './editor.action';
 
@@ -37,22 +36,17 @@ const editorReducer = (
     state.loading = action.payload;
   } else if (GitmojiSelectAction.is(action)) {
     const { payload } = action;
-    state.editorValue = CommitMessageLib.setGitmoji(state.editorValue, payload, state.useShortcode);
-
-    const map = state.recentGitmojis.map((x) => ({ key: x.shortcode, value: x }));
-    const cache = new LRUCache<GitmojiDefinition>(map, 20);
-    cache.write(payload.shortcode, payload);
-    state.recentGitmojis = cache.toArray();
+    state.editorValue = CommitMessageLib.setGitmoji(
+      state.editorValue,
+      payload,
+      appState.preset.useShortcode,
+    );
   } else if (TypeSelectAction.is(action)) {
     const { payload } = action;
-    state.editorValue = CommitMessageLib.setType(state.editorValue, action.payload);
-
-    const map = state.recentTypes.map((x) => ({ key: x.key, value: x }));
-    const cache = new LRUCache<TypeDefinition>(map, 20);
-    cache.write(payload.key, payload);
-    state.recentTypes = cache.toArray();
-  } else if (ToggleShortcodeAction.is(action)) {
-    state.useShortcode = action.payload;
+    state.editorValue = CommitMessageLib.setType(state.editorValue, payload);
+  } else if (ScopeSelectAction.is(action)) {
+    const { payload } = action;
+    state.editorValue = CommitMessageLib.setScope(state.editorValue, payload);
   }
 
   return state;

components/editor/gitmoji-picker.component.tsx renamed to components/preset/gitmoji-picker.component.tsx

@@ -1,18 +1,19 @@
 import { Button, Dropdown, Space, Switch, Typography } from 'antd';
 import classNames from 'classnames';
-import RecentListComponent from 'components/common/recent-list.component';
+import RecentListComponent, { RecentItem } from 'components/common/recent-list.component';
 import SearchableMenuComponent from 'components/common/searchable-menu.component';
 import React from 'react';
 import { AiOutlineCheck, AiOutlineClose, AiOutlineDown } from 'react-icons/ai';
 import withStyles, { WithStylesProps } from 'react-jss';
 import { connect, Dispatch } from 'react-redux';
 import { GitmojiDefinition, GITMOJIS } from 'shared/presets/gitmojis';
-import { AppState, EditorState } from 'state';
+import { AppState, PresetState } from 'state';
 
-import { GitmojiSelectAction, ToggleShortcodeAction } from './state/editor.action';
+import { GitmojiSelectAction, ToggleShortcodeAction } from './state/preset.action';
 
 const styles = (theme: CommitComposerTheme) => ({
   menu: {
+    border: `1px solid ${theme.lighter}`,
     display: 'block',
     [`@media only screen and (min-width: ${theme.screenMD})`]: {
       maxWidth: 380,
@@ -89,7 +90,7 @@ const styles = (theme: CommitComposerTheme) => ({
 
 export interface OwnProps {}
 export interface ReduxProps {
-  editor: EditorState;
+  preset: PresetState;
 }
 export interface DispatchProps {
   gitmojiSelected: (gitmoji: GitmojiDefinition) => void;
@@ -129,7 +130,7 @@ class GitmojiPickerComponent extends React.Component<Props, State> {
   }
 
   render(): JSX.Element {
-    const { classes, editor, toggleShortcode } = this.props;
+    const { classes, preset, toggleShortcode } = this.props;
     const { hovered, visible } = this.state;
 
     const menu = (
@@ -138,21 +139,23 @@ class GitmojiPickerComponent extends React.Component<Props, State> {
           itemClassName={classes.recentItem}
           className={classes.recentList}
           onClick={(key) => this.handleClick(key)}
-          items={editor.recentGitmojis.map((x) => ({
-            item: x.shortcode,
-            title: x.description,
-            display: (
-              <span aria-label={x.shortcode} role="img">
-                {x.icon}
-              </span>
-            ),
-          }))}
+          items={preset.recentGitmojis.map(
+            (x): RecentItem => ({
+              item: x.shortcode,
+              tooltip: x.description,
+              display: (
+                <span aria-label={x.shortcode} role="img">
+                  {x.icon}
+                </span>
+              ),
+            }),
+          )}
         />
         <SearchableMenuComponent
           focus={visible}
           className={classes.items}
           searchBarClassName={classNames(classes.searchBar, {
-            [classes.noTopPadding]: Boolean(editor.recentGitmojis?.length),
+            [classes.noTopPadding]: Boolean(preset.recentGitmojis?.length),
           })}
           onClick={(key) => this.handleClick(key)}
           items={GITMOJIS.map((x) => ({
@@ -169,7 +172,7 @@ class GitmojiPickerComponent extends React.Component<Props, State> {
             <Typography.Text className={classes.actionText}>Shortcode:</Typography.Text>
             <Switch
               size="small"
-              defaultChecked={editor.useShortcode}
+              defaultChecked={preset.useShortcode}
               checkedChildren={<AiOutlineCheck />}
               unCheckedChildren={<AiOutlineClose />}
               onChange={(x) => toggleShortcode(x)}
@@ -208,8 +211,8 @@ class GitmojiPickerComponent extends React.Component<Props, State> {
 }
 
 function mapStateToProps(state: AppState): ReduxProps {
-  const { editor } = state;
-  return { editor };
+  const { preset } = state;
+  return { preset };
 }
 
 function mapDispatchToProps(dispatch: Dispatch): DispatchProps {