Nt/plausible

ios/Podfile.lock

@@ -1129,9 +1129,9 @@ PODS:
     - glog
     - RCT-Folly (= 2022.05.16.00)
     - React-Core
-  - react-native-config (1.5.1):
-    - react-native-config/App (= 1.5.1)
-  - react-native-config/App (1.5.1):
+  - react-native-config (1.5.3):
+    - react-native-config/App (= 1.5.3)
+  - react-native-config/App (1.5.3):
     - React-Core
   - react-native-create-thumbnail (1.6.4):
     - React-Core
@@ -1910,7 +1910,7 @@ SPEC CHECKSUMS:
   React-Mapbuffer: 9ee041e1d7be96da6d76a251f92e72b711c651d6
   react-native-background-timer: 17ea5e06803401a379ebf1f20505b793ac44d0fe
   react-native-cameraroll: 17e0fd2d851dc27bd7c57d71ab5fcfd3e6e55e52
-  react-native-config: 86038147314e2e6d10ea9972022aa171e6b1d4d8
+  react-native-config: 8f7283449bbb048902f4e764affbbf24504454af
   react-native-create-thumbnail: e022bcdcba8a0b4529a50d3fa1a832ec921be39d
   react-native-date-picker: db26a4dc48fe4e7c3c3afd5008519fad1091c524
   react-native-flipper: c33a4995958ef12a2b2f8290d63bed7adeed7634

src/components/basicHeader/view/basicHeaderView.tsx

@@ -133,6 +133,19 @@ const BasicHeaderView = ({
               {quickTitle || title}
             </Text>
           )}
+
+          {rightIconName && !isHasSearch && (
+            <IconButton
+              size={25}
+              onPress={() => handleRightIconPress()}
+              iconStyle={[styles.rightIcon, rightIconStyle]}
+              style={rightIconBtnStyle}
+              name={rightIconName}
+              iconType={iconType}
+              isLoading={isLoadingRightIcon}
+            />
+          )}
+
           {isHasDropdown && (
             <View>
               {dropdownComponent ? (
@@ -148,18 +161,6 @@ const BasicHeaderView = ({
             </View>
           )}
 
-          {rightIconName && !isHasSearch && (
-            <IconButton
-              size={25}
-              onPress={() => handleRightIconPress()}
-              iconStyle={[styles.rightIcon, rightIconStyle]}
-              style={rightIconBtnStyle}
-              name={rightIconName}
-              iconType={iconType}
-              isLoading={isLoadingRightIcon}
-            />
-          )}
-
           {enableViewModeToggle && (
             <IconButton
               size={24}

src/components/index.tsx

@@ -44,6 +44,7 @@ import { SearchModal } from './searchModal';
 import { SettingsItem } from './settingsItem';
 import { SideMenu } from './sideMenu';
 import { ProposalVoteRequest } from './proposalVoteRequest';
+import { StatsPanel } from './statsPanel';
 
 import CommunityCard from './communityCard';
 
@@ -219,6 +220,7 @@ export {
   SpinIndicator,
   SquareButton,
   StickyBar,
+  StatsPanel,
   SummaryArea,
   SelectionList,
   TabBar,

src/components/organisms/index.ts

@@ -1,2 +1,3 @@
 export * from './quickProfileModal';
 export * from './inputSupportModal';
+export * from './postStatsModal';

src/components/organisms/postStatsModal/children/deviceStats.tsx

@@ -0,0 +1,45 @@
+import React, { useMemo } from 'react';
+import { View, Text, ViewStyle, useWindowDimensions } from 'react-native';
+import { usePostStatsByDevice } from '../../../../providers/queries';
+import styles from '../styles/deviceStats.styles';
+import { Bar as ProgressBar } from 'react-native-progress';
+import EStyleSheet from 'react-native-extended-stylesheet';
+import Animated, { SlideInLeft } from 'react-native-reanimated';
+
+export const DeviceStats = ({ urlPath }: { urlPath: string }) => {
+  const statsByDevice = usePostStatsByDevice(urlPath);
+
+  const dims = useWindowDimensions();
+
+  const _barStyle = {
+    borderRadius: 12,
+    alignSelf: 'stretch',
+    marginHorizontal: 8,
+    borderWidth:0
+  } as ViewStyle
+
+  const _barWidth = dims.width - 96;
+
+  const total = useMemo(() =>
+    statsByDevice.data?.reduce((prevVal, item) => prevVal + item.stats.pageviews, 0) || 1, [statsByDevice.data])
+
+return (
+  <View style={styles.container}>
+    {statsByDevice.data?.map((stat, index) => (
+      <Animated.View key={stat.device} style={styles.statWrapper} entering={SlideInLeft.delay(100 * (index + 1))}>
+        <Text style={styles.statLabel}>{stat.device !== '(not set)' ? stat.device : 'Other'}</Text>
+        <ProgressBar
+          progress={stat.stats.pageviews / total}
+          width={_barWidth}
+          height={10}
+          style={_barStyle}
+          unfilledColor={EStyleSheet.value('$primaryLightBackground')}
+          color={EStyleSheet.value('$iconColor')}
+          indeterminate={statsByDevice.isLoading}
+          useNativeDriver={true}
+        />
+      </Animated.View>
+    ))}
+  </View>
+);
+};

src/components/organisms/postStatsModal/children/index.ts

@@ -0,0 +1,2 @@
+export * from './postStatsContent';
+export * from './deviceStats';

src/components/organisms/postStatsModal/children/postStatsContent.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { Text, View } from 'react-native';
+
+import { MainButton } from '../../..';
+import styles from '../styles/postStatsModal.styles';
+import { usePostStatsQuery } from '../../../../providers/queries';
+import { StatsItem, StatsPanel } from '../../../statsPanel';
+import { DeviceStats } from './deviceStats';
+import Animated, { FadeInDown } from 'react-native-reanimated';
+
+
+interface QuickProfileContentProps {
+  urlPath: string;
+  onPromotePress: () => void;
+}
+
+export const PostStatsContent = ({ urlPath, onPromotePress }: QuickProfileContentProps) => {
+  const intl = useIntl();
+  const statsQuery = usePostStatsQuery(urlPath);
+
+  const _durationValue = Math.floor((statsQuery.data?.visit_duration || 0) / 1000);
+  const statsData1 = [
+    { label: intl.formatMessage({ id: 'stats.viewers' }), value: statsQuery.data?.visitors },
+    { label: intl.formatMessage({ id: 'stats.pageviews' }), value: statsQuery.data?.pageviews },
+    { label: intl.formatMessage({ id: 'stats.duration' }), value: _durationValue },
+  ] as StatsItem[];
+
+
+  const _renderActionPanel = () => (
+    <Animated.View entering={FadeInDown.delay(500)}>
+
+      <Text style={styles.promoteText}>
+        { intl.formatMessage({id:'stats.promote_title'})}
+        <Text style={styles.promoteSubText}>
+          {intl.formatMessage({id:"stats.promote_message"})}</Text>
+      </Text>
+
+      <MainButton
+        style={styles.button}
+        text={intl.formatMessage({ id: 'stats.promote' })}
+        onPress={onPromotePress}
+      />
+    </Animated.View>
+
+  )
+
+  return (
+    <View style={styles.modalStyle}>
+      <StatsPanel data={statsData1} intermediate={statsQuery.isLoading} />
+      <DeviceStats urlPath={urlPath} />
+
+      {_renderActionPanel()}
+    </View>
+  );
+};

src/components/organisms/postStatsModal/container/postStatsModal.tsx

@@ -0,0 +1,68 @@
+import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import ActionSheet from 'react-native-actions-sheet';
+import EStyleSheet from 'react-native-extended-stylesheet';
+import { useNavigation } from '@react-navigation/native';
+import { PostStatsContent } from '../children';
+import styles from '../styles/postStatsModal.styles';
+import ROUTES from '../../../../constants/routeNames';
+import { useAppSelector } from '../../../../hooks';
+
+interface PostStatsModalProps {
+  post: any;
+}
+
+export const PostStatsModal = forwardRef(({ post }: PostStatsModalProps, ref) => {
+  const navigation = useNavigation();
+
+  const sheetModalRef = useRef<ActionSheet>();
+
+  const isLoggedIn = useAppSelector((state) => state.application.isLoggedIn);
+  const isPinCodeOpen = useAppSelector((state) => state.application.isPinCodeOpen);
+
+  const [urlPath, setUrlPath] = useState('');
+
+  useImperativeHandle(ref, () => ({
+    show(_urlPath: string) {
+      setUrlPath(_urlPath);
+      sheetModalRef.current?.show();
+    },
+  }));
+
+  const _onPromotePress = () => {
+    if (!isLoggedIn) {
+      return;
+    }
+
+    const routeName = ROUTES.SCREENS.REDEEM;
+    const params = {
+      from: 1,
+      permlink: `${post.author}/${post.permlink}`,
+      redeemType: 'promote',
+    };
+
+    sheetModalRef.current?.hide();
+    if (isPinCodeOpen) {
+      navigation.navigate({
+        name: ROUTES.SCREENS.PINCODE,
+        params: {
+          navigateTo: routeName,
+          navigateParams: params,
+        },
+      });
+      return;
+    }
+
+    navigation.navigate(routeName, params);
+  };
+
+  return (
+    <ActionSheet
+      ref={sheetModalRef}
+      gestureEnabled={true}
+      containerStyle={styles.sheetContent}
+      indicatorColor={EStyleSheet.value('$primaryWhiteLightBackground')}
+    >
+      <PostStatsContent urlPath={urlPath} onPromotePress={_onPromotePress} />
+    </ActionSheet>
+  );
+});

src/components/organisms/postStatsModal/index.ts

@@ -0,0 +1 @@
+export * from './container/postStatsModal';

src/components/organisms/postStatsModal/styles/deviceStats.styles.ts

@@ -0,0 +1,27 @@
+import { TextStyle, ViewStyle } from 'react-native';
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+  container: {
+    marginHorizontal: 16,
+    marginTop: 24,
+  } as ViewStyle,
+
+  statWrapper: {
+    marginTop: 8,
+  } as ViewStyle,
+
+  statValue: {
+    color: '$primaryBlack',
+    fontSize: 16,
+    fontWeight: 'normal',
+  } as TextStyle,
+
+  statLabel: {
+    color: '$primaryBlack',
+    fontSize: 14,
+    marginLeft:8,
+    marginVertical:2,
+    fontWeight: 'normal',
+  } as TextStyle,
+});

src/components/organisms/postStatsModal/styles/postStatsModal.styles.ts

@@ -0,0 +1,43 @@
+import { TextStyle, ViewStyle } from 'react-native';
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+  modalStyle: {
+    backgroundColor: '$primaryBackgroundColor',
+    margin: 0,
+    paddingTop: 32,
+    marginHorizontal: 24,
+  },
+
+  sheetContent: {
+    backgroundColor: '$primaryBackgroundColor',
+  },
+
+  container: {
+    alignItems: 'center',
+    marginHorizontal: 16,
+  } as ViewStyle,
+
+  button: {
+    marginTop: 16,
+    backgroundColor: '$primaryBlue',
+    paddingHorizontal: 44,
+    paddingVertical: 16,
+    borderRadius: 32,
+    justifyContent: 'center',
+    alignItems: 'center',
+  } as ViewStyle,
+
+  promoteText:{
+    marginTop:32,
+    marginHorizontal:24,
+    color: '$primaryBlack', 
+    fontWeight: '700' 
+  } as TextStyle,
+
+  promoteSubText:{
+    color: '$iconColor', 
+    fontWeight: '500' 
+  } as TextStyle
+
+});

src/components/organisms/quickProfileModal/children/quickProfileContent.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { View, Alert } from 'react-native';
-import { ProfileStats, StatsData } from './profileStats';
-import { MainButton } from '../../..';
+import { StatsItem } from 'components/statsPanel';
+import { MainButton, StatsPanel } from '../../..';
 import { addFavorite, checkFavorite, deleteFavorite } from '../../../../providers/ecency/ecency';
 import { followUser, getFollows, getRelationship, getUser } from '../../../../providers/hive/dhive';
 import { getRcPower, getVotingPower } from '../../../../utils/manaBar';
@@ -209,7 +209,7 @@ export const QuickProfileContent = ({ username, onClose }: QuickProfileContentPr
     { label: intl.formatMessage({ id: 'profile.follower' }), value: _followerCount },
     { label: intl.formatMessage({ id: 'profile.following' }), value: _followingCount },
     { label: intl.formatMessage({ id: 'profile.post' }), value: _postCount },
-  ] as StatsData[];
+  ] as StatsItem[];
 
   const statsData2 = [
     {
@@ -218,7 +218,7 @@ export const QuickProfileContent = ({ username, onClose }: QuickProfileContentPr
       suffix: '%',
     },
     { label: intl.formatMessage({ id: 'profile.reputation' }), value: _reputation },
-  ] as StatsData[];
+  ] as StatsItem[];
 
   return (
     <View style={styles.modalStyle}>
@@ -230,8 +230,8 @@ export const QuickProfileContent = ({ username, onClose }: QuickProfileContentPr
         isLoading={isLoading}
         onPress={_openFullProfile}
       />
-      <ProfileStats data={statsData1} intermediate={!isProfileLoaded} />
-      <ProfileStats horizontalMargin={16} data={statsData2} intermediate={!isProfileLoaded} />
+      <StatsPanel style={styles.statsPanel} data={statsData1} intermediate={!isProfileLoaded} />
+      <StatsPanel style={styles.statsPanel} data={statsData2} intermediate={!isProfileLoaded} />
       <MainButton
         style={styles.button}
         text={intl.formatMessage({ id: 'profile.view_full' })}