From aa9bdd9d547a8e712a9ec15dac978e3875f5fa5d Mon Sep 17 00:00:00 2001 From: Sadaqat Ali Date: Fri, 28 Jan 2022 19:02:39 +0500 Subject: [PATCH 1/6] added tooltip component --- ios/Podfile.lock | 2 +- package.json | 2 +- src/components/index.js | 2 + .../markdownEditor/view/markdownEditorView.js | 32 ++++++++----- src/components/tooltip/tooltipStyles.ts | 26 ++++++++++ src/components/tooltip/tooltipView.tsx | 47 +++++++++++++++++++ yarn.lock | 12 ++--- 7 files changed, 104 insertions(+), 19 deletions(-) create mode 100644 src/components/tooltip/tooltipStyles.ts create mode 100644 src/components/tooltip/tooltipView.tsx diff --git a/ios/Podfile.lock b/ios/Podfile.lock index a160089bc..c052bc551 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -772,4 +772,4 @@ SPEC CHECKSUMS: PODFILE CHECKSUM: 9c48318ea254e2c78005a7a0c2d8bfc14ddd783d -COCOAPODS: 1.10.1 +COCOAPODS: 1.11.2 diff --git a/package.json b/package.json index 8ebc9f0ed..5d8de6504 100644 --- a/package.json +++ b/package.json @@ -101,7 +101,7 @@ "react-native-matomo-sdk": "feruzm/react-native-matomo-sdk", "react-native-modal": "^11.5.6", "react-native-modal-dropdown": "^1.0.1", - "react-native-modal-popover": "^2.0.1", + "react-native-modal-popover": "^2.1.0", "react-native-modal-translucent": "^5.0.0", "react-native-navigation-bar-color": "^1.0.0", "react-native-os": "^1.0.1", diff --git a/src/components/index.js b/src/components/index.js index 459ff3f4c..6baa26c5b 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -93,6 +93,7 @@ import { ForegroundNotification } from './foregroundNotification'; import { PostHtmlRenderer } from './postHtmlRenderer'; import { QuickProfileModal } from './organisms'; import QuickReplyModal from './quickReplyModal/quickReplyModalView'; +import Tooltip from './tooltip/tooltipView'; // Basic UI Elements import { @@ -234,4 +235,5 @@ export { PostHtmlRenderer, QuickProfileModal, QuickReplyModal, + Tooltip, }; diff --git a/src/components/markdownEditor/view/markdownEditorView.js b/src/components/markdownEditor/view/markdownEditorView.js index 6d7241413..9042e02a2 100644 --- a/src/components/markdownEditor/view/markdownEditorView.js +++ b/src/components/markdownEditor/view/markdownEditorView.js @@ -37,6 +37,7 @@ import { Modal, SnippetsModal, UploadsGalleryModal, + Tooltip, } from '../../index'; import { ThemeContainer } from '../../../containers'; @@ -86,6 +87,7 @@ const MarkdownEditorView = ({ const galleryRef = useRef(null); const clearRef = useRef(null); const uploadsGalleryModalRef = useRef(null); + const tooltipRef = useRef(null); const dispatch = useDispatch(); const isVisibleAccountsBottomSheet = useSelector( @@ -288,17 +290,25 @@ const MarkdownEditorView = ({ onLoadDraftPress(); }; return ( - - - + <> + tooltipRef.current?.openTooltip()} + > + + + + + ); } }; diff --git a/src/components/tooltip/tooltipStyles.ts b/src/components/tooltip/tooltipStyles.ts new file mode 100644 index 000000000..66bbb1011 --- /dev/null +++ b/src/components/tooltip/tooltipStyles.ts @@ -0,0 +1,26 @@ +import EStyleSheet from 'react-native-extended-stylesheet'; + +export default EStyleSheet.create({ + popoverDetails: { + flexDirection: 'row', + width: '$deviceWidth / 2', + borderRadius: 20, + padding: 16, + + backgroundColor: '$primaryBackgroundColor', + }, + arrow: { + borderTopColor: '$primaryBackgroundColor', + }, + popoverWrapper: { + flex: 1, + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + }, + overlay: {}, + popoverText: { + color: '$primaryDarkText', + textAlign: 'center', + }, +}); diff --git a/src/components/tooltip/tooltipView.tsx b/src/components/tooltip/tooltipView.tsx new file mode 100644 index 000000000..29cd8d856 --- /dev/null +++ b/src/components/tooltip/tooltipView.tsx @@ -0,0 +1,47 @@ +import React, { forwardRef, Fragment, useImperativeHandle } from 'react'; +import { View, Text, TouchableOpacity, Button } from 'react-native'; +import { Popover, usePopover } from 'react-native-modal-popover'; + +import styles from './tooltipStyles'; +interface TooltipProps { + children?: any; + text?: string; +} +const Tooltip = ({ children, text }: TooltipProps, ref) => { + const { + openPopover, + closePopover, + popoverVisible, + touchableRef, + popoverAnchorRect, + } = usePopover(); + + useImperativeHandle(ref, () => ({ + openTooltip() { + openPopover(); + }, + closeTooltip() { + closePopover(); + }, + })); + + return ( + <> + {children} + + {text} + + + ); +}; + +export default forwardRef(Tooltip as any); diff --git a/yarn.lock b/yarn.lock index 0ed7b3b59..1ea70a4fb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6812,7 +6812,7 @@ lodash.uniq@^4.5.0: resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M= -lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0: +lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0: version "4.17.21" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== @@ -8606,12 +8606,12 @@ react-native-modal-dropdown@^1.0.1: dependencies: prop-types "^15.6.0" -react-native-modal-popover@^2.0.1: - version "2.0.1" - resolved "https://registry.yarnpkg.com/react-native-modal-popover/-/react-native-modal-popover-2.0.1.tgz#119fb04606a205ffff41fc56666ea4c0cc833aa6" - integrity sha512-4aqjeNf3TNSUH4tK0t9ADNGqNQmY/xb0XKGtdNGhhdSZDp0oME36dj92AKxoFeU3AzfQdmd0ehOXvYUu7aaj8g== +react-native-modal-popover@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/react-native-modal-popover/-/react-native-modal-popover-2.1.0.tgz#45a2060012796f29184e6c41b787f14336d3b435" + integrity sha512-t7KMk1q5Hi3jkk3/0fpa3mA7E3TJLL/Uz48Fa07AlocjMbG3okim9fNPLf5dJGw4JlcYWxLMYeswEcTjKr0M1g== dependencies: - lodash "^4.17.20" + lodash "^4.17.21" prop-types "^15.7.2" react-native-modal-translucent@^5.0.0: From 66036d77e96c3db2e54be2fd79129790ec2adb18 Mon Sep 17 00:00:00 2001 From: Sadaqat Ali Date: Tue, 1 Feb 2022 08:35:35 +0500 Subject: [PATCH 2/6] fixed dropdown touch bug in seetings screen --- .../dropdownButton/view/dropdownButtonStyles.js | 4 ++++ .../dropdownButton/view/dropdownButtonView.tsx | 17 +++++++++++------ .../settingsItem/view/settingsItemStyles.js | 2 ++ .../settingsItem/view/settingsItemView.js | 1 + 4 files changed, 18 insertions(+), 6 deletions(-) diff --git a/src/components/dropdownButton/view/dropdownButtonStyles.js b/src/components/dropdownButton/view/dropdownButtonStyles.js index 4de9a3e5b..3b0327c54 100644 --- a/src/components/dropdownButton/view/dropdownButtonStyles.js +++ b/src/components/dropdownButton/view/dropdownButtonStyles.js @@ -82,4 +82,8 @@ export default EStyleSheet.create({ color: '$primaryDarkGray', textAlign: 'left', }, + childrenWrapper: { + flexDirection: 'row', + alignItems: 'center', + }, }); diff --git a/src/components/dropdownButton/view/dropdownButtonView.tsx b/src/components/dropdownButton/view/dropdownButtonView.tsx index bcab9f215..d7a0070b2 100644 --- a/src/components/dropdownButton/view/dropdownButtonView.tsx +++ b/src/components/dropdownButton/view/dropdownButtonView.tsx @@ -97,12 +97,17 @@ const DropdownButtonView = ({ adjustFrame={(style: any) => adjustDropdownFrame(style) } > {isHasChildIcon && !isLoading ? ( - - + + + {defaultText} + + + + ) : ( isHasChildIcon && diff --git a/src/components/settingsItem/view/settingsItemStyles.js b/src/components/settingsItem/view/settingsItemStyles.js index e49a5de81..2ea14f0c6 100644 --- a/src/components/settingsItem/view/settingsItemStyles.js +++ b/src/components/settingsItem/view/settingsItemStyles.js @@ -19,6 +19,7 @@ export default EStyleSheet.create({ paddingLeft: 16, paddingHorizontal: 14, color: '$primaryDarkGray', + flex: 1, }, rowTextStyle: { fontSize: 12, @@ -43,6 +44,7 @@ export default EStyleSheet.create({ flexGrow: 1, height: 'auto', width: 150, + justifyContent: 'center', }, textStyle: { color: '$primaryBlue', diff --git a/src/components/settingsItem/view/settingsItemView.js b/src/components/settingsItem/view/settingsItemView.js index 82d5d47c1..8f6b1fa6b 100644 --- a/src/components/settingsItem/view/settingsItemView.js +++ b/src/components/settingsItem/view/settingsItemView.js @@ -51,6 +51,7 @@ class SettingsItemView extends PureComponent { textStyle={styles.dropdownText} options={options} onSelect={(e) => handleOnChange(e, type, actionType)} + isHasChildIcon /> ); From 3f2b0d968d0dcf23e1468799098ac2836e8c1b51 Mon Sep 17 00:00:00 2001 From: Sadaqat Ali Date: Wed, 2 Feb 2022 22:21:20 +0500 Subject: [PATCH 3/6] register tooltip in redux --- .../markdownEditor/view/markdownEditorView.js | 2 +- src/components/tooltip/tooltipView.tsx | 17 ++++++++++----- src/redux/actions/tooltipsActions.ts | 6 ++++++ src/redux/constants/constants.js | 3 +++ src/redux/reducers/index.js | 2 ++ src/redux/reducers/tooltipsReducer.ts | 21 +++++++++++++++++++ 6 files changed, 45 insertions(+), 6 deletions(-) create mode 100644 src/redux/actions/tooltipsActions.ts create mode 100644 src/redux/reducers/tooltipsReducer.ts diff --git a/src/components/markdownEditor/view/markdownEditorView.js b/src/components/markdownEditor/view/markdownEditorView.js index f9d5b9d44..c862c78e1 100644 --- a/src/components/markdownEditor/view/markdownEditorView.js +++ b/src/components/markdownEditor/view/markdownEditorView.js @@ -307,7 +307,7 @@ const MarkdownEditorView = ({ animation="bounceInRight" onAnimationEnd={() => tooltipRef.current?.openTooltip()} > - + { +const Tooltip = ({ children, text, walkthroughId }: TooltipProps, ref) => { const { openPopover, closePopover, @@ -16,11 +19,15 @@ const Tooltip = ({ children, text }: TooltipProps, ref) => { popoverAnchorRect, } = usePopover(); + const dispatch = useDispatch(); + const isTooltipDone = useSelector((state) => state.tooltips.isDone); + useImperativeHandle(ref, () => ({ openTooltip() { - openPopover(); + !isTooltipDone && openPopover(); }, closeTooltip() { + !isTooltipDone && dispatch(registerTooltip(walkthroughId)); closePopover(); }, })); @@ -33,7 +40,7 @@ const Tooltip = ({ children, text }: TooltipProps, ref) => { contentStyle={styles.popoverDetails} arrowStyle={styles.arrow} visible={popoverVisible} - onClose={closePopover} + onClose={ref?.current?.closeTooltip} fromRect={popoverAnchorRect} placement="top" supportedOrientations={['portrait', 'landscape']} diff --git a/src/redux/actions/tooltipsActions.ts b/src/redux/actions/tooltipsActions.ts new file mode 100644 index 000000000..f7fd1ff22 --- /dev/null +++ b/src/redux/actions/tooltipsActions.ts @@ -0,0 +1,6 @@ +import { REGISTER_TOOLTIP } from '../constants/constants'; + +export const registerTooltip = (walkthroughId: string) => ({ + payload: walkthroughId, + type: REGISTER_TOOLTIP, +}); diff --git a/src/redux/constants/constants.js b/src/redux/constants/constants.js index 1356ede25..4d7321d87 100644 --- a/src/redux/constants/constants.js +++ b/src/redux/constants/constants.js @@ -107,3 +107,6 @@ export const TEMP_BENEFICIARIES_ID = 'temp-beneficiaries'; //CACHE export const PURGE_EXPIRED_CACHE = 'PURGE_EXPIRED_CACHE'; export const UPDATE_VOTE_CACHE = 'UPDATE_VOTE_CACHE'; + +// TOOLTIPS +export const REGISTER_TOOLTIP = 'REGISTER_TOOLTIP'; diff --git a/src/redux/reducers/index.js b/src/redux/reducers/index.js index a822a0345..5f73bc8a4 100644 --- a/src/redux/reducers/index.js +++ b/src/redux/reducers/index.js @@ -9,6 +9,7 @@ import user from './userReducer'; import customTabsReducer from './customTabsReducer'; import editorReducer from './editorReducer'; import cacheReducer from './cacheReducer'; +import tooltipsReducer from './tooltipsReducer'; export default combineReducers({ account: accountReducer, @@ -21,4 +22,5 @@ export default combineReducers({ communities, user, cache: cacheReducer, + tooltips: tooltipsReducer, }); diff --git a/src/redux/reducers/tooltipsReducer.ts b/src/redux/reducers/tooltipsReducer.ts new file mode 100644 index 000000000..18496ecb1 --- /dev/null +++ b/src/redux/reducers/tooltipsReducer.ts @@ -0,0 +1,21 @@ +import { REGISTER_TOOLTIP } from '../constants/constants'; + +const initialState = { + walkthroughId: null, + isDone: false, +}; + +export default function (state = initialState, action) { + const { type, payload } = action; + switch (type) { + case REGISTER_TOOLTIP: + return { + ...state, + walkthroughId: payload, + isDone: true, + }; + + default: + return state; + } +} From f408db9979de0d53102401d998c4fdfe0479a1d9 Mon Sep 17 00:00:00 2001 From: Sadaqat Ali Date: Tue, 8 Feb 2022 20:53:32 +0500 Subject: [PATCH 4/6] modified tooltips redux store to new format --- ios/Podfile.lock | 4 ++-- .../markdownEditor/view/markdownEditorView.js | 7 ++++++- src/components/tooltip/tooltipView.tsx | 18 +++++++++++----- src/config/locales/en-US.json | 3 ++- src/redux/actions/tooltipsActions.ts | 5 +++-- src/redux/constants/walkthroughConstants.ts | 3 +++ src/redux/reducers/tooltipsReducer.ts | 21 +++++++++++++------ 7 files changed, 44 insertions(+), 17 deletions(-) create mode 100644 src/redux/constants/walkthroughConstants.ts diff --git a/ios/Podfile.lock b/ios/Podfile.lock index c052bc551..c67e30b0e 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -335,7 +335,7 @@ PODS: - React - react-native-version-number (0.3.6): - React - - react-native-webview (11.2.3): + - react-native-webview (11.17.1): - React-Core - React-RCTActionSheet (0.63.4): - React-Core/RCTActionSheetHeaders (= 0.63.4) @@ -736,7 +736,7 @@ SPEC CHECKSUMS: react-native-splash-screen: 200d11d188e2e78cea3ad319964f6142b6384865 react-native-udp: ff9d13e523f2b58e6bc5d4d32321ac60671b5dc9 react-native-version-number: b415bbec6a13f2df62bf978e85bc0d699462f37f - react-native-webview: 6520e3e7b4933de76b95ef542c8d7115cf45b68e + react-native-webview: 162b6453d074e0b1c7025242bb7a939b6f72b9e7 React-RCTActionSheet: 89a0ca9f4a06c1f93c26067af074ccdce0f40336 React-RCTAnimation: 1bde3ecc0c104c55df246eda516e0deb03c4e49b React-RCTBlob: a97d378b527740cc667e03ebfa183a75231ab0f0 diff --git a/src/components/markdownEditor/view/markdownEditorView.js b/src/components/markdownEditor/view/markdownEditorView.js index 42109fe6a..947fff6de 100644 --- a/src/components/markdownEditor/view/markdownEditorView.js +++ b/src/components/markdownEditor/view/markdownEditorView.js @@ -49,6 +49,7 @@ import isAndroidOreo from '../../../utils/isAndroidOreo'; import { OptionsModal } from '../../atoms'; import { UsernameAutofillBar } from './usernameAutofillBar'; import applyUsername from './formats/applyUsername'; +import { walkthrough } from '../../../redux/constants/walkthroughConstants'; const MIN_BODY_INPUT_HEIGHT = 300; @@ -310,7 +311,11 @@ const MarkdownEditorView = ({ animation="bounceInRight" onAnimationEnd={() => tooltipRef.current?.openTooltip()} > - + { +const Tooltip = ({ children, text, walkthroughIndex }: TooltipProps, ref) => { const { openPopover, closePopover, @@ -20,14 +21,21 @@ const Tooltip = ({ children, text, walkthroughId }: TooltipProps, ref) => { } = usePopover(); const dispatch = useDispatch(); - const isTooltipDone = useSelector((state) => state.tooltips.isDone); + const tooltipState = useSelector((state) => state.tooltips.walkthroughMap); + const isTooltipShown = tooltipState[walkthroughIndex].isShown; useImperativeHandle(ref, () => ({ openTooltip() { - !isTooltipDone && openPopover(); + !isTooltipShown && openPopover(); }, closeTooltip() { - !isTooltipDone && dispatch(registerTooltip(walkthroughId)); + if (!isTooltipShown) { + const walkthrough: Walkthrough = { + walkthroughIndex: walkthroughIndex, + isShown: true, + }; + dispatch(registerTooltip(walkthrough)); + } closePopover(); }, })); diff --git a/src/config/locales/en-US.json b/src/config/locales/en-US.json index 7b3c0c2d7..08ca6b1f6 100644 --- a/src/config/locales/en-US.json +++ b/src/config/locales/en-US.json @@ -340,7 +340,8 @@ "done":"DONE", "draft_save_title":"Saving Draft", "draft_update":"Update current draft", - "draft_save_new":"Save as new draft" + "draft_save_new":"Save as new draft", + "load_draft_tooltip": "Load your lastest draft here" }, "snippets":{ "label_no_snippets":"No Snippets Found", diff --git a/src/redux/actions/tooltipsActions.ts b/src/redux/actions/tooltipsActions.ts index f7fd1ff22..77a4136ec 100644 --- a/src/redux/actions/tooltipsActions.ts +++ b/src/redux/actions/tooltipsActions.ts @@ -1,6 +1,7 @@ import { REGISTER_TOOLTIP } from '../constants/constants'; +import { Walkthrough } from '../reducers/tooltipsReducer'; -export const registerTooltip = (walkthroughId: string) => ({ - payload: walkthroughId, +export const registerTooltip = (walkthrough: Walkthrough) => ({ + payload: walkthrough, type: REGISTER_TOOLTIP, }); diff --git a/src/redux/constants/walkthroughConstants.ts b/src/redux/constants/walkthroughConstants.ts new file mode 100644 index 000000000..50d44f76a --- /dev/null +++ b/src/redux/constants/walkthroughConstants.ts @@ -0,0 +1,3 @@ +export const walkthrough = { + EDITOR_DRAFT_BTN: 1, +}; diff --git a/src/redux/reducers/tooltipsReducer.ts b/src/redux/reducers/tooltipsReducer.ts index 18496ecb1..946cdfd7c 100644 --- a/src/redux/reducers/tooltipsReducer.ts +++ b/src/redux/reducers/tooltipsReducer.ts @@ -1,18 +1,27 @@ import { REGISTER_TOOLTIP } from '../constants/constants'; -const initialState = { - walkthroughId: null, - isDone: false, -}; +export interface Walkthrough { + walkthroughIndex:number, + isShown?:boolean, +} +interface State { + walkthroughMap:{ + [key: number]: Walkthrough + } +} +const initialState:State = { + walkthroughMap:{} +}; export default function (state = initialState, action) { + console.log('action : ', action); + const { type, payload } = action; switch (type) { case REGISTER_TOOLTIP: + state.walkthroughMap[payload.walkthroughIndex] = payload return { ...state, - walkthroughId: payload, - isDone: true, }; default: From bdfa973e90c5171ef8d6fe6b6957a36bb7752527 Mon Sep 17 00:00:00 2001 From: Sadaqat Ali Date: Wed, 9 Feb 2022 13:38:30 +0500 Subject: [PATCH 5/6] added walkthrough transform and renamed --- src/components/tooltip/tooltipView.tsx | 18 ++++++++++++------ ...ooltipsActions.ts => walkthroughActions.ts} | 2 +- src/redux/reducers/index.js | 4 ++-- ...ooltipsReducer.ts => walkthroughReducer.ts} | 11 ++++++----- src/redux/store/store.ts | 8 +++++++- 5 files changed, 28 insertions(+), 15 deletions(-) rename src/redux/actions/{tooltipsActions.ts => walkthroughActions.ts} (74%) rename src/redux/reducers/{tooltipsReducer.ts => walkthroughReducer.ts} (65%) diff --git a/src/components/tooltip/tooltipView.tsx b/src/components/tooltip/tooltipView.tsx index 611cff7a1..3b875a610 100644 --- a/src/components/tooltip/tooltipView.tsx +++ b/src/components/tooltip/tooltipView.tsx @@ -2,8 +2,8 @@ import React, { forwardRef, useImperativeHandle } from 'react'; import { View, Text } from 'react-native'; import { Popover, usePopover } from 'react-native-modal-popover'; import { useDispatch, useSelector } from 'react-redux'; -import { registerTooltip } from '../../redux/actions/tooltipsActions'; -import { Walkthrough } from '../../redux/reducers/tooltipsReducer'; +import { registerTooltip } from '../../redux/actions/walkthroughActions'; +import { Walkthrough } from '../../redux/reducers/walkthroughReducer'; import styles from './tooltipStyles'; interface TooltipProps { @@ -21,15 +21,21 @@ const Tooltip = ({ children, text, walkthroughIndex }: TooltipProps, ref) => { } = usePopover(); const dispatch = useDispatch(); - const tooltipState = useSelector((state) => state.tooltips.walkthroughMap); - const isTooltipShown = tooltipState[walkthroughIndex].isShown; + const tooltipState = useSelector((state) => state.walkthrough.walkthroughMap); + const tooltipRegistered = tooltipState.get(walkthroughIndex); + useImperativeHandle(ref, () => ({ openTooltip() { - !isTooltipShown && openPopover(); + if (!tooltipRegistered) { + openPopover(); + } + if (tooltipRegistered && !tooltipRegistered.isShown) { + openPopover(); + } }, closeTooltip() { - if (!isTooltipShown) { + if (!tooltipRegistered || (tooltipRegistered && !tooltipRegistered.isShown)) { const walkthrough: Walkthrough = { walkthroughIndex: walkthroughIndex, isShown: true, diff --git a/src/redux/actions/tooltipsActions.ts b/src/redux/actions/walkthroughActions.ts similarity index 74% rename from src/redux/actions/tooltipsActions.ts rename to src/redux/actions/walkthroughActions.ts index 77a4136ec..8c0f842d7 100644 --- a/src/redux/actions/tooltipsActions.ts +++ b/src/redux/actions/walkthroughActions.ts @@ -1,5 +1,5 @@ import { REGISTER_TOOLTIP } from '../constants/constants'; -import { Walkthrough } from '../reducers/tooltipsReducer'; +import { Walkthrough } from '../reducers/walkthroughReducer'; export const registerTooltip = (walkthrough: Walkthrough) => ({ payload: walkthrough, diff --git a/src/redux/reducers/index.js b/src/redux/reducers/index.js index 5f73bc8a4..972a9fbbb 100644 --- a/src/redux/reducers/index.js +++ b/src/redux/reducers/index.js @@ -9,7 +9,7 @@ import user from './userReducer'; import customTabsReducer from './customTabsReducer'; import editorReducer from './editorReducer'; import cacheReducer from './cacheReducer'; -import tooltipsReducer from './tooltipsReducer'; +import walkthroughReducer from './walkthroughReducer'; export default combineReducers({ account: accountReducer, @@ -22,5 +22,5 @@ export default combineReducers({ communities, user, cache: cacheReducer, - tooltips: tooltipsReducer, + walkthrough: walkthroughReducer, }); diff --git a/src/redux/reducers/tooltipsReducer.ts b/src/redux/reducers/walkthroughReducer.ts similarity index 65% rename from src/redux/reducers/tooltipsReducer.ts rename to src/redux/reducers/walkthroughReducer.ts index 946cdfd7c..ef9df9861 100644 --- a/src/redux/reducers/tooltipsReducer.ts +++ b/src/redux/reducers/walkthroughReducer.ts @@ -5,13 +5,11 @@ export interface Walkthrough { isShown?:boolean, } interface State { - walkthroughMap:{ - [key: number]: Walkthrough - } + walkthroughMap: Map } const initialState:State = { - walkthroughMap:{} + walkthroughMap:new Map(), }; export default function (state = initialState, action) { console.log('action : ', action); @@ -19,7 +17,10 @@ export default function (state = initialState, action) { const { type, payload } = action; switch (type) { case REGISTER_TOOLTIP: - state.walkthroughMap[payload.walkthroughIndex] = payload + if(!state.walkthroughMap){ + state.walkthroughMap = new Map(); + } + state.walkthroughMap.set(payload.walkthroughIndex, payload); return { ...state, }; diff --git a/src/redux/store/store.ts b/src/redux/store/store.ts index 4b670207a..bd92b215f 100644 --- a/src/redux/store/store.ts +++ b/src/redux/store/store.ts @@ -12,6 +12,12 @@ const transformCacheVoteMap = createTransform( {whitelist:['cache']} ); +const transformWalkthroughMap = createTransform( + (inboundState:any) => ({ ...inboundState, walkthroughMap : Array.from(inboundState.walkthroughMap)}), + (outboundState) => ({ ...outboundState, walkthroughMap:new Map(outboundState.walkthroughMap)}), + {whitelist:['walkthrough']} +); + // Middleware: Redux Persist Config const persistConfig = { // Root @@ -21,7 +27,7 @@ const persistConfig = { // Blacklist (Don't Save Specific Reducers) blacklist: ['nav', 'application', 'communities', 'user'], timeout: 0, - transforms:[transformCacheVoteMap] + transforms:[transformCacheVoteMap,transformWalkthroughMap] }; // Middleware: Redux Persist Persisted Reducer From 7c0727868dbbd743c21b11f97806f7f8329c8b04 Mon Sep 17 00:00:00 2001 From: Sadaqat Ali Date: Wed, 9 Feb 2022 13:45:10 +0500 Subject: [PATCH 6/6] added separate translation for walkthrough --- src/components/markdownEditor/view/markdownEditorView.js | 2 +- src/config/locales/en-US.json | 6 ++++-- src/redux/reducers/walkthroughReducer.ts | 6 +++--- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/markdownEditor/view/markdownEditorView.js b/src/components/markdownEditor/view/markdownEditorView.js index 947fff6de..a85a083c9 100644 --- a/src/components/markdownEditor/view/markdownEditorView.js +++ b/src/components/markdownEditor/view/markdownEditorView.js @@ -313,7 +313,7 @@ const MarkdownEditorView = ({ > + walkthroughMap: Map } const initialState:State = { @@ -18,7 +18,7 @@ export default function (state = initialState, action) { switch (type) { case REGISTER_TOOLTIP: if(!state.walkthroughMap){ - state.walkthroughMap = new Map(); + state.walkthroughMap = new Map(); } state.walkthroughMap.set(payload.walkthroughIndex, payload); return {