Merge pull request #394 from Zuehlke/feat/move-to-hooks

refactor: use hooks instead of hoc

Author: Cybertron01Z

client/src/components/ActionLog/ActionLog.jsx

@@ -1,5 +1,5 @@
 import React, {useContext} from 'react';
-import {connect} from 'react-redux';
+import {useSelector} from 'react-redux';
 import PropTypes from 'prop-types';
 
 import {SIDEBAR_ACTIONLOG} from '../../state/actions/uiStateActions';
@@ -17,8 +17,11 @@ import {
 /**
  * The ActionLog displays a chronological list of "actions" (backend events)
  */
-const ActionLog = ({actionLog, shown}) => {
+const ActionLog = () => {
   const {t} = useContext(L10nContext);
+  const shown = useSelector(state => getCurrentSidebarIfAny(state) === SIDEBAR_ACTIONLOG);
+  const actionLog = useSelector(getActionLog);
+  
   return (
     <StyledActionLog $shown={shown}>
       <h4>{t('log')}</h4>
@@ -42,7 +45,4 @@ ActionLog.propTypes = {
   actionLog: PropTypes.array
 };
 
-export default connect((state) => ({
-  shown: getCurrentSidebarIfAny(state) === SIDEBAR_ACTIONLOG,
-  actionLog: getActionLog(state)
-}))(ActionLog);
+export default ActionLog;

client/src/components/Backlog/Backlog.jsx

@@ -1,6 +1,5 @@
 import React, {useState, useEffect, useContext} from 'react';
-import {connect} from 'react-redux';
-import PropTypes from 'prop-types';
+import {useSelector, useDispatch} from 'react-redux';
 import {useDrag} from 'react-dnd';
 import {getEmptyImage} from 'react-dnd-html5-backend';
 
@@ -23,27 +22,30 @@ import {StyledBacklog, StyledBacklogWidthDragHandle} from './_styled';
  * if trash is active, only a list of "trashed" stories is displayed
  *
  */
-const Backlog = ({
-  backlogShown,
-  backlogWidth,
-  setBacklogWidth,
-  trashedStoriesCount,
-  activeStoriesCount
-}) => {
+const Backlog = () => {
   const {t} = useContext(L10nContext);
+  const dispatch = useDispatch();
+
+  const backlogShown = useSelector(isBacklogShown);
+  const backlogWidth = useSelector(getBacklogWidth);
+  const trashedStoriesCount = useSelector(state => getTrashedStories(state).length);
+  const activeStoriesCount = useSelector(state => getActiveStories(state).length);
+
   const [showTrash, setShowTrash] = useState(false);
 
+  const handleSetBacklogWidth = (width) => dispatch(setBacklogWidth(width));
+
   // There is no corresponding drop / useDrop.
   // We just need the dragging functionality, and set the new width of the backlog on "end(...)"
   const [, drag, preview] = useDrag(
     () => ({
       type: DRAG_ITEM_TYPES.backlogWidthHandle,
       end: (item, monitor) => {
         const {x} = monitor.getSourceClientOffset();
-        setBacklogWidth(Math.max(DEFAULT_BACKLOG_WIDTH, x + 1));
+        handleSetBacklogWidth(Math.max(DEFAULT_BACKLOG_WIDTH, x + 1));
       }
     }),
-    [setBacklogWidth]
+    [handleSetBacklogWidth]
   );
 
   useEffect(() => {
@@ -75,20 +77,4 @@ const Backlog = ({
   );
 };
 
-Backlog.propTypes = {
-  backlogShown: PropTypes.bool,
-  backlogWidth: PropTypes.number,
-  setBacklogWidth: PropTypes.func.isRequired,
-  trashedStoriesCount: PropTypes.number.isRequired,
-  activeStoriesCount: PropTypes.number.isRequired
-};
-
-export default connect(
-  (state) => ({
-    backlogShown: isBacklogShown(state),
-    backlogWidth: getBacklogWidth(state),
-    trashedStoriesCount: getTrashedStories(state).length,
-    activeStoriesCount: getActiveStories(state).length
-  }),
-  {setBacklogWidth}
-)(Backlog);
+export default Backlog;

client/src/components/Backlog/BacklogActive.jsx

@@ -1,6 +1,5 @@
 import React, {useCallback, useState, useEffect, useContext} from 'react';
-import {connect} from 'react-redux';
-import PropTypes from 'prop-types';
+import {useSelector, useDispatch} from 'react-redux';
 import {useDrop} from 'react-dnd';
 
 import {trashStories, setSortOrder} from '../../state/actions/commandActions';
@@ -88,8 +87,12 @@ const useStoryDnD = (sortedStories, setSortedStories, setSorting, setSortOrder)
 /**
  * List of active stories. Accepts drops of csv files for importing stories. Provides means to filter and sort active stories.
  */
-const BacklogActive = ({activeStories, selectedStoryId, trashStories, setSortOrder}) => {
+const BacklogActive = () => {
   const {t} = useContext(L10nContext);
+  const dispatch = useDispatch();
+
+  const activeStories = useSelector(getActiveStories);
+  const selectedStoryId = useSelector(getSelectedStoryId);
 
   const {highlightedStoryId, setHighlightedStoryId} = useHighlightedStory(
     selectedStoryId,
@@ -99,13 +102,22 @@ const BacklogActive = ({activeStories, selectedStoryId, trashStories, setSortOrd
   const {filterQuery, setFilterQuery, sorting, setSorting, sortedStories, setSortedStories} =
     useStorySortingAndFiltering(activeStories);
 
+  const handleSetSortOrder = useCallback(
+    (storyIds) => dispatch(setSortOrder(storyIds)),
+    [dispatch]
+  );
+
   const {dndFindStory, dndMoveStory, dndDragEnd, containerDropRef} = useStoryDnD(
     sortedStories,
     setSortedStories,
     setSorting,
-    setSortOrder
+    handleSetSortOrder
   );
 
+  const onTrashAll = () => {
+    dispatch(trashStories(sortedStories.map((story) => story.id)));
+  };
+
   return (
     <StyledBacklogActive ref={containerDropRef}>
       <BacklogFileDropWrapper>
@@ -141,26 +153,6 @@ const BacklogActive = ({activeStories, selectedStoryId, trashStories, setSortOrd
       </BacklogFileDropWrapper>
     </StyledBacklogActive>
   );
-
-  /**
-   * do only trash the currently visible stories (after filtering was applied)
-   */
-  function onTrashAll() {
-    trashStories(sortedStories.map((story) => story.id));
-  }
-};
-
-BacklogActive.propTypes = {
-  activeStories: PropTypes.array,
-  selectedStoryId: PropTypes.string,
-  trashStories: PropTypes.func.isRequired,
-  setSortOrder: PropTypes.func.isRequired
 };
 
-export default connect(
-  (state) => ({
-    activeStories: getActiveStories(state),
-    selectedStoryId: getSelectedStoryId(state)
-  }),
-  {trashStories, setSortOrder}
-)(BacklogActive);
+export default BacklogActive;

client/src/components/Backlog/BacklogFileDropWrapper.jsx

@@ -1,5 +1,5 @@
 import React, {useCallback, createContext} from 'react';
-import {connect} from 'react-redux';
+import {useDispatch} from 'react-redux';
 import PropTypes from 'prop-types';
 import {useDropzone} from 'react-dropzone';
 
@@ -25,12 +25,15 @@ export const OpenFileDialogContext = createContext(() => {});
 /**
  * Handles CSV and JSON file drop & importing
  */
-const BacklogFileDropWrapper = ({importCsvFile, children}) => {
+const BacklogFileDropWrapper = ({children}) => {
+  const dispatch = useDispatch();
+
   const onDrop = useCallback((acceptedFiles) => {
     if (acceptedFiles?.length > 0) {
-      importCsvFile(acceptedFiles[0]);
+      dispatch(importCsvFile(acceptedFiles[0]));
     }
-  }, []);
+  }, [dispatch]);
+
   const {getRootProps, isDragActive, isDragAccept, isDragReject, open} = useDropzone({
     onDrop,
     multiple: false,
@@ -52,8 +55,7 @@ const BacklogFileDropWrapper = ({importCsvFile, children}) => {
 };
 
 BacklogFileDropWrapper.propTypes = {
-  importCsvFile: PropTypes.func.isRequired,
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
 };
 
-export default connect(() => ({}), {importCsvFile})(BacklogFileDropWrapper);
+export default BacklogFileDropWrapper;

client/src/components/Backlog/BacklogTrash.jsx

@@ -1,6 +1,5 @@
 import React, {useContext} from 'react';
-import {connect} from 'react-redux';
-import PropTypes from 'prop-types';
+import {useSelector} from 'react-redux';
 
 import TrashedStory from './TrashedStory';
 import {getTrashedStories} from '../../state/stories/storiesSelectors';
@@ -11,8 +10,9 @@ import {L10nContext} from '../../services/l10n';
 /**
  * List of trashed stories
  */
-const BacklogTrash = ({trashedStories}) => {
+const BacklogTrash = () => {
   const {t} = useContext(L10nContext);
+  const trashedStories = useSelector(getTrashedStories);
   const hasTrashedStories = trashedStories.length > 0;
 
   return (
@@ -29,10 +29,4 @@ const BacklogTrash = ({trashedStories}) => {
   );
 };
 
-BacklogTrash.propTypes = {
-  trashedStories: PropTypes.array
-};
-
-export default connect((state) => ({
-  trashedStories: getTrashedStories(state)
-}))(BacklogTrash);
+export default BacklogTrash;

client/src/components/Backlog/Story.jsx

@@ -1,5 +1,5 @@
 import React, {useContext} from 'react';
-import {connect} from 'react-redux';
+import {useSelector, useDispatch} from 'react-redux';
 import PropTypes from 'prop-types';
 import {useDrag, useDrop} from 'react-dnd';
 
@@ -29,17 +29,17 @@ const Story = ({
   story,
   isHighlighted,
   onStoryClicked,
-  selectedStoryId,
-  selectStory,
-  editStory,
-  trashStory,
-  isWaiting,
-  isStoryEstimated,
   dndDragEnd,
   dndMoveStory,
   dndFindStory
 }) => {
   const {t, format} = useContext(L10nContext);
+  const dispatch = useDispatch();
+  
+  const selectedStoryId = useSelector(getSelectedStoryId);
+  const isWaiting = useSelector(state => isThisStoryWaiting(state, story.id));
+  const isStoryEstimated = useSelector(state => isThisStoryEstimated(state, story.id));
+  
   const isSelected = selectedStoryId === story.id;
   const hasConsensus = hasStoryConsensus(story);
 
@@ -70,6 +70,20 @@ const Story = ({
     [dndFindStory, dndMoveStory]
   );
 
+  const triggerSelect = () => {
+    dispatch(selectStory(story.id));
+  };
+
+  const triggerEdit = (e) => {
+    e.stopPropagation(); // make sure to stop bubbling up. we do not want to trigger story select
+    dispatch(editStory(story.id));
+  };
+
+  const triggerTrash = (e) => {
+    e.stopPropagation(); // make sure to stop bubbling up. we do not want to trigger story select
+    dispatch(trashStory(story.id));
+  };
+
   return (
     <StyledStory
       ref={(node) => drag(drop(node))}
@@ -138,42 +152,15 @@ const Story = ({
       }
     </StyledStory>
   );
-
-  function triggerSelect() {
-    selectStory(story.id);
-  }
-
-  function triggerEdit(e) {
-    e.stopPropagation(); // make sure to stop bubbling up. we do not want to trigger story select
-    editStory(story.id);
-  }
-
-  function triggerTrash(e) {
-    e.stopPropagation(); // make sure to stop bubbling up. we do not want to trigger story select
-    trashStory(story.id);
-  }
 };
 
 Story.propTypes = {
   story: PropTypes.object,
-  isWaiting: PropTypes.bool,
   isHighlighted: PropTypes.bool,
-  isStoryEstimated: PropTypes.bool,
-  selectedStoryId: PropTypes.string,
   onStoryClicked: PropTypes.func,
-  selectStory: PropTypes.func,
-  editStory: PropTypes.func,
-  trashStory: PropTypes.func,
   dndDragEnd: PropTypes.func,
   dndMoveStory: PropTypes.func,
   dndFindStory: PropTypes.func
 };
 
-export default connect(
-  (state, props) => ({
-    selectedStoryId: getSelectedStoryId(state),
-    isWaiting: isThisStoryWaiting(state, props.story.id),
-    isStoryEstimated: isThisStoryEstimated(state, props.story.id)
-  }),
-  {selectStory, editStory, trashStory}
-)(Story);
+export default Story;