New nav component and a new hook

[dewanshDT]

Changes:
added the new nav component, which was broken into several smaller components and a new hook useSketchActions

I have verified that this pull request:

• has no linting errors (npm run lint)
• has no test errors (npm run test)
• is from a uniquely-named feature branch and is up to date with the develop branch.

[lindapaiste]

Excellent work! There is only one thing which needs to change, and it's my fault 🤦‍♀️ because I told you that none of my Redux changes mattered...but I forgot about changing the toast from two actions to one. I will come up with a patch for that which just changes the actions and doesn't involve Redux Toolkit.

[lindapaiste]

FYI that second condition is the negative of canEditProjectName/selectCanEditSketch.

[lindapaiste]

Ok here's the fix I came up with for the Redux actions which will allow you to use dispatch(showToast('Toast.SketchSaved')); here without refactoring other components and actions which still use two separate actions. Replace the existing showToast function:

p5.js-web-editor/client/modules/IDE/actions/toast.js

Lines 9 to 16 in b22cc0a

	export function showToast(time) {
	return (dispatch) => {
	dispatch({
	type: ActionTypes.SHOW_TOAST
	});
	setTimeout(() => dispatch(hideToast()), time);
	};
	}

with this:

/**
 * Temporary fix until #2206 is merged.
 * Supports legacy two-action syntax:
 *    dispatch(setToastText('Toast.SketchFailedSave'));
 *    dispatch(showToast(1500));
 * And also supports proposed single-action syntax with message and optional timeout.
 *    dispatch(showToast('Toast.SketchFailedSave'));
 *    dispatch(showToast('Toast.SketchSaved', 5500));
 */
export function showToast(textOrTime, timeout = 1500) {
  return (dispatch) => {
    let time = timeout;
    if (typeof textOrTime === 'string') {
      // eslint-disable-next-line no-use-before-define
      dispatch(setToastText(textOrTime));
    } else {
      time = textOrTime;
    }
    dispatch({
      type: ActionTypes.SHOW_TOAST
    });
    setTimeout(() => dispatch(hideToast()), time);
  };
}

[dewanshDT]

Ok here's the fix I came up with for the Redux actions which will allow you to use dispatch(showToast('Toast.SketchSaved')); here without refactoring other components and actions which still use two separate actions. Replace the existing showToast function:

p5.js-web-editor/client/modules/IDE/actions/toast.js

Lines 9 to 16 in b22cc0a

	export function showToast(time) {
	return (dispatch) => {
	dispatch({
	type: ActionTypes.SHOW_TOAST
	});
	setTimeout(() => dispatch(hideToast()), time);
	};
	}

with this:

/**
 * Temporary fix until #2206 is merged.
 * Supports legacy two-action syntax:
 *    dispatch(setToastText('Toast.SketchFailedSave'));
 *    dispatch(showToast(1500));
 * And also supports proposed single-action syntax with message and optional timeout.
 *    dispatch(showToast('Toast.SketchFailedSave'));
 *    dispatch(showToast('Toast.SketchSaved', 5500));
 */
export function showToast(textOrTime, timeout = 1500) {
  return (dispatch) => {
    let time = timeout;
    if (typeof textOrTime === 'string') {
      // eslint-disable-next-line no-use-before-define
      dispatch(setToastText(textOrTime));
    } else {
      time = textOrTime;
    }
    dispatch({
      type: ActionTypes.SHOW_TOAST
    });
    setTimeout(() => dispatch(hideToast()), time);
  };
}

Okay 👍

[dewanshDT]

hey @lindapaiste! just made all the suggested changes to the PR please check it out.