Merge pull request #2164 from ecency/sa/getting-started-tooltip

[WIP] Getting Started Tooltip

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

package.json

@@ -101,8 +101,8 @@
     "react-native-linear-gradient": "^2.4.2",
     "react-native-matomo-sdk": "feruzm/react-native-matomo-sdk",
     "react-native-modal": "^11.5.6",
+    "react-native-modal-popover": "^2.1.0",
     "react-native-modal-dropdown": "^1.0.2",
-    "react-native-modal-popover": "^2.0.1",
     "react-native-modal-translucent": "^5.0.0",
     "react-native-navigation-bar-color": "^1.0.0",
     "react-native-os": "^1.0.1",

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';
 import VideoPlayer from './videoPlayer/videoPlayerView';
 
 // Basic UI Elements
@@ -235,5 +236,6 @@ export {
   PostHtmlRenderer,
   QuickProfileModal,
   QuickReplyModal,
+  Tooltip,
   VideoPlayer,
 };

src/components/markdownEditor/view/markdownEditorView.js

@@ -36,6 +36,7 @@ import {
   Modal,
   SnippetsModal,
   UploadsGalleryModal,
+  Tooltip,
 } from '../../index';
 
 import { ThemeContainer } from '../../../containers';
@@ -48,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;
 
@@ -88,6 +90,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(
@@ -302,17 +305,29 @@ const MarkdownEditorView = ({
         onLoadDraftPress();
       };
       return (
-        <AnimatedView style={styles.floatingContainer} animation="bounceInRight">
-          <MainButton
-            style={{ width: isLoading ? null : 120 }}
-            onPress={_onPress}
-            iconName="square-edit-outline"
-            iconType="MaterialCommunityIcons"
-            iconColor="white"
-            text="DRAFT"
-            isLoading={isLoading}
-          />
-        </AnimatedView>
+        <>
+          <AnimatedView
+            style={styles.floatingContainer}
+            animation="bounceInRight"
+            onAnimationEnd={() => tooltipRef.current?.openTooltip()}
+          >
+            <Tooltip
+              ref={tooltipRef}
+              text={intl.formatMessage({ id: 'walkthrough.load_draft_tooltip' })}
+              walkthroughIndex={walkthrough.EDITOR_DRAFT_BTN}
+            >
+              <MainButton
+                style={{ width: isLoading ? null : 120 }}
+                onPress={_onPress}
+                iconName="square-edit-outline"
+                iconType="MaterialCommunityIcons"
+                iconColor="white"
+                text="DRAFT"
+                isLoading={isLoading}
+              />
+            </Tooltip>
+          </AnimatedView>
+        </>
       );
     }
   };

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',
+  },
+});

src/components/tooltip/tooltipView.tsx

@@ -0,0 +1,68 @@
+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/walkthroughActions';
+import { Walkthrough } from '../../redux/reducers/walkthroughReducer';
+
+import styles from './tooltipStyles';
+interface TooltipProps {
+  children?: any;
+  text?: string;
+  walkthroughIndex?: number;
+}
+const Tooltip = ({ children, text, walkthroughIndex }: TooltipProps, ref) => {
+  const {
+    openPopover,
+    closePopover,
+    popoverVisible,
+    touchableRef,
+    popoverAnchorRect,
+  } = usePopover();
+
+  const dispatch = useDispatch();
+  const tooltipState = useSelector((state) => state.walkthrough.walkthroughMap);
+  const tooltipRegistered = tooltipState.get(walkthroughIndex);
+
+
+  useImperativeHandle(ref, () => ({
+    openTooltip() {
+      if (!tooltipRegistered) {
+        openPopover();
+      }
+      if (tooltipRegistered && !tooltipRegistered.isShown) {
+        openPopover();
+      }
+    },
+    closeTooltip() {
+      if (!tooltipRegistered || (tooltipRegistered && !tooltipRegistered.isShown)) {
+        const walkthrough: Walkthrough = {
+          walkthroughIndex: walkthroughIndex,
+          isShown: true,
+        };
+        dispatch(registerTooltip(walkthrough));
+      }
+      closePopover();
+    },
+  }));
+
+  return (
+    <>
+      <View ref={touchableRef}>{children}</View>
+      <Popover
+        backgroundStyle={styles.overlay}
+        contentStyle={styles.popoverDetails}
+        arrowStyle={styles.arrow}
+        visible={popoverVisible}
+        onClose={ref?.current?.closeTooltip}
+        fromRect={popoverAnchorRect}
+        placement="top"
+        supportedOrientations={['portrait', 'landscape']}
+      >
+        <Text>{text}</Text>
+      </Popover>
+    </>
+  );
+};
+
+export default forwardRef(Tooltip as any);

src/config/locales/en-US.json

@@ -716,5 +716,8 @@
     "comment": "Comment",
     "reply": "REPLY",
     "close":"CLOSE"
+  },
+  "walkthrough":{
+    "load_draft_tooltip": "Load your lastest draft here"
   }
 }

src/redux/actions/walkthroughActions.ts

@@ -0,0 +1,7 @@
+import { REGISTER_TOOLTIP } from '../constants/constants';
+import { Walkthrough } from '../reducers/walkthroughReducer';
+
+export const registerTooltip = (walkthrough: Walkthrough) => ({
+  payload: walkthrough,
+  type: REGISTER_TOOLTIP,
+});

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';

src/redux/constants/walkthroughConstants.ts

@@ -0,0 +1,3 @@
+export const walkthrough = {
+  EDITOR_DRAFT_BTN: 1,
+};

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 walkthroughReducer from './walkthroughReducer';
 
 export default combineReducers({
   account: accountReducer,
@@ -21,4 +22,5 @@ export default combineReducers({
   communities,
   user,
   cache: cacheReducer,
+  walkthrough: walkthroughReducer,
 });

src/redux/reducers/walkthroughReducer.ts

@@ -0,0 +1,31 @@
+import { REGISTER_TOOLTIP } from '../constants/constants';
+
+export interface WalkthroughItem {
+  walkthroughIndex:number,
+  isShown?:boolean,
+}
+interface State {
+  walkthroughMap: Map<number, WalkthroughItem>
+}
+
+const initialState:State = {
+  walkthroughMap:new Map(),
+};
+export default function (state = initialState, action) {
+  console.log('action : ', action);
+  
+  const { type, payload } = action;
+  switch (type) {
+    case REGISTER_TOOLTIP:
+      if(!state.walkthroughMap){
+        state.walkthroughMap = new Map<number, WalkthroughItem>();
+    }
+      state.walkthroughMap.set(payload.walkthroughIndex, payload);
+      return {
+        ...state,
+      };
+
+    default:
+      return state;
+  }
+}

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

yarn.lock

@@ -6837,7 +6837,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==
@@ -8631,12 +8631,12 @@ react-native-modal-dropdown@^1.0.2:
   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: