Merge pull request #100 from wednesday-solutions/feat/posthog-integra…

…tion

feat: posthog integration

.env

@@ -1,3 +1,4 @@
 JSON_PLACEHOLDER_API="https://jsonplaceholder.typicode.com"
 SIMPSONS_API="https://thesimpsonsquoteapi.glitch.me/"
-SENTRY_DSN= "https://0fbf25b4bfb443b7ae58aa4baf34460e@o4505374929584128.ingest.us.sentry.io/4505374931812352"
+SENTRY_DSN= "https://0fbf25b4bfb443b7ae58aa4baf34460e@o4505374929584128.ingest.us.sentry.io/4505374931812352"
+POSTHOG_KEY= 'phc_36FDy4WZi046HbBsY3YEbrCWFBYOGppSNzUZTQUl1Qr'

app/navigators/appNavigator.js

@@ -1,9 +1,11 @@
 import React from 'react';
+import { PostHogProvider } from 'posthog-react-native';
 import { createStackNavigator } from '@react-navigation/stack';
 import SplashScreen from '@scenes/SplashScreen/';
 import ExampleScreen from '@scenes/ExampleScreen';
 import { NavigationContainer } from '@react-navigation/native';
 import { setTopLevelNavigator } from '@services/navigationService';
+import { getPostHogClient } from '@app/utils/posthogUtils';
 const Stack = createStackNavigator();
 /**
  * The root screen contains the application's navigation.
@@ -13,13 +15,15 @@ const Stack = createStackNavigator();
 export default function AppNavigator() {
   return (
     <NavigationContainer ref={setTopLevelNavigator}>
-      <Stack.Navigator
-        screenOptions={{ headerShown: false }}
-        initialRouteName="SplashScreen"
-      >
-        <Stack.Screen name="SplashScreen" component={SplashScreen} />
-        <Stack.Screen name="MainScreen" component={ExampleScreen} />
-      </Stack.Navigator>
+      <PostHogProvider client={getPostHogClient()}>
+        <Stack.Navigator
+          screenOptions={{ headerShown: false }}
+          initialRouteName="SplashScreen"
+        >
+          <Stack.Screen name="SplashScreen" component={SplashScreen} />
+          <Stack.Screen name="MainScreen" component={ExampleScreen} />
+        </Stack.Navigator>
+      </PostHogProvider>
     </NavigationContainer>
   );
 }

app/scenes/ExampleScreen/index.js

@@ -7,12 +7,14 @@ import {
 } from 'recoil';
 import styled from 'styled-components/native';
 import { useTranslation } from 'react-i18next';
+import { usePostHog } from 'posthog-react-native';
 
 import AppContainer from '@atoms/Container';
 import SimpsonsLoveWednesday from '@organisms/SimpsonsLoveWednesday';
 import If from '@app/components/atoms/If';
 import { conditionalOperatorFunction } from '@app/utils/common';
 import { LoadingStates } from '@app/utils/constants';
+import { POSTHOG_EVENTS } from '@app/utils/posthogEvents';
 
 import { userState, fetchUserSelector, fetchTriggerState } from './recoilState';
 
@@ -31,20 +33,19 @@ const CustomButtonParentView = styled(View)`
   align-self: center;
 `;
 
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\nCmd+D or shake for dev menu.',
-  android:
-    'Double tap R on your keyboard to reload,\nShake or press menu button for dev menu.'
-});
-
 const ExampleScreen = () => {
   const [user, setUser] = useRecoilState(userState);
   const setFetchTrigger = useSetRecoilState(fetchTriggerState);
   const userLoadable = useRecoilValueLoadable(fetchUserSelector);
+  const posthog = usePostHog();
   const { t } = useTranslation();
   const requestFetchUser = () => {
     setFetchTrigger(prev => prev + 1);
   };
+  const instructions = Platform.select({
+    ios: t('ios_instructions'),
+    android: t('android_instructions')
+  });
 
   useEffect(() => {
     requestFetchUser();
@@ -56,6 +57,11 @@ const ExampleScreen = () => {
     }
   }, [userLoadable?.contents?.character]);
 
+  const refreshButtonHandler = () => {
+    posthog.capture(POSTHOG_EVENTS.REFRESH_BUTTON_CLICKED);
+    requestFetchUser();
+  };
+
   return (
     <Container>
       <If
@@ -72,7 +78,10 @@ const ExampleScreen = () => {
               user={user}
             />
             <CustomButtonParentView>
-              <Button onPress={requestFetchUser} title={t('refresh')}></Button>
+              <Button
+                onPress={refreshButtonHandler}
+                title={t('refresh')}
+              ></Button>
             </CustomButtonParentView>
           </View>
         }

app/scenes/ExampleScreen/tests/index.test.js

@@ -14,7 +14,12 @@ jest.mock('recoil', () => ({
   useSetRecoilState: jest.fn(),
   useRecoilState: jest.fn()
 }));
-
+jest.mock('posthog-react-native', () => ({
+  usePostHog: jest.fn(() => ({
+    identify: jest.fn(),
+    capture: jest.fn()
+  }))
+}));
 describe('ExampleScreen', () => {
   const mockSetFetchTrigger = jest.fn();
   const mockSetUser = jest.fn();

app/scenes/RootScreen/tests/index.test.js

@@ -3,9 +3,14 @@ import { useRecoilValue } from 'recoil';
 import { render, waitFor } from '@testing-library/react-native';
 import { navigateAndReset } from '@app/services/navigationService';
 import { RootScreenTest } from '../index';
+import { PostHogProvider } from 'posthog-react-native';
 
 jest.mock('recoil');
 jest.mock('@app/services/navigationService');
+jest.mock('@app/utils/posthogUtils');
+jest.mock('posthog-react-native', () => ({
+  PostHogProvider: jest.fn(({ children }) => children)
+}));
 
 describe('<RootScreen />', () => {
   beforeEach(() => {

app/translations/en.json

@@ -5,5 +5,7 @@
   "because": "because",
   "wednesday_lover": "{{username}} loves Wednesday",
   "get_started": "To get started, edit App.js",
-  "refresh": "Refresh"
+  "refresh": "Refresh",
+  "ios_instructions": "Press Cmd+R to reload,\nCmd+D or shake for dev menu.",
+  "'android_instructions": "Double tap R on your keyboard to reload,\nShake or press menu button for dev menu."
 }

app/utils/posthogEvents.js

@@ -0,0 +1,3 @@
+export const POSTHOG_EVENTS = {
+  REFRESH_BUTTON_CLICKED: 'refresh_button_clicked'
+};

app/utils/posthogUtils.js

@@ -0,0 +1,19 @@
+import { set } from 'lodash';
+import PostHog from 'posthog-react-native';
+import { POSTHOG_KEY } from '@env';
+const posthog = {
+  client: null
+};
+
+export const getPostHogClient = () => {
+  if (!posthog.client) {
+    set(
+      posthog,
+      'client',
+      new PostHog(POSTHOG_KEY, {
+        // In-case of custom endpoint please add 'host' property here with url
+      })
+    );
+  }
+  return posthog.client;
+};

package.json

@@ -68,13 +68,15 @@
     "intl": "1.2.5",
     "lodash": "^4.17.15",
     "map-keys-deep": "^0.0.2",
+    "posthog-react-native": "^3.1.2",
     "prop-types": "^15.7.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-i18next": "^15.0.1",
     "react-intl": "2.8.0",
     "react-native": "0.73.6",
     "react-native-cli": "^2.0.1",
+    "react-native-device-info": "^11.1.0",
     "react-native-gesture-handler": "~2.16.0",
     "react-native-reanimated": "^3.7.1",
     "react-native-safe-area-context": "^4.9.0",

yarn.lock

@@ -2199,10 +2199,10 @@
   resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.1.1.tgz#1ec17e2edbec25c8306d424ecfbf13c7de1aaa31"
   integrity sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==
 
-"@react-native-async-storage/async-storage@1.23.1":
-  version "1.23.1"
-  resolved "https://registry.yarnpkg.com/@react-native-async-storage/async-storage/-/async-storage-1.23.1.tgz#cad3cd4fab7dacfe9838dce6ecb352f79150c883"
-  integrity sha512-Qd2kQ3yi6Y3+AcUlrHxSLlnBvpdCEMVGFlVBneVOjaFaPU61g1huc38g339ysXspwY1QZA2aNhrk/KlHGO+ewA==
+"@react-native-async-storage/async-storage@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@react-native-async-storage/async-storage/-/async-storage-2.0.0.tgz#22373f7f83132547701637fc574ddb83b83b384e"
+  integrity sha512-af6H9JjfL6G/PktBfUivvexoiFKQTJGQCtSWxMdivLzNIY94mu9DdiY0JqCSg/LyPCLGKhHPUlRQhNvpu3/KVA==
   dependencies:
     merge-options "^3.0.4"
 
@@ -3183,6 +3183,11 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.3.tgz#6209321eb2c1712a7e7466422b8cb1fc0d9dd5d8"
   integrity sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==
 
+"@types/use-sync-external-store@^0.0.3":
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43"
+  integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
+
 "@types/ws@^8.5.5":
   version "8.5.12"
   resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.12.tgz#619475fe98f35ccca2a2f6c137702d85ec247b7e"
@@ -10446,11 +10451,6 @@ mz@^2.7.0:
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
-[email protected]:
-  version "3.3.5"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.5.tgz#07ef5fb44ece2bc8574af317015e645d5f681422"
-  integrity sha512-nvgaJGpIANf4+VWJAaDGORQyMzhFkze8aXVdrHq+BaSvzfpOuponEysaVFKV/0Bca5V+3SBiDvRabEPbpalEBg==
-
 nanoid@^3.1.23, nanoid@^3.3.7:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
@@ -11426,6 +11426,11 @@ postcss@^8.3.5, postcss@^8.4.33, postcss@~8.4.32:
     picocolors "^1.0.1"
     source-map-js "^1.2.0"
 
+posthog-react-native@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/posthog-react-native/-/posthog-react-native-3.1.2.tgz#e2fcb2854960d367680dd8f4d218b4643a40f080"
+  integrity sha512-2yylwM6recNFF5uvx+TYzb2DDBgXDrLj7xqVY+mggwYn00vIkZD6E7d/LqmFhsH4ZqrMzORq8Xq5kWScLKSrgg==
+
 [email protected]:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/pre-commit/-/pre-commit-1.2.2.tgz#dbcee0ee9de7235e57f79c56d7ce94641a69eec6"
@@ -11790,6 +11795,11 @@ react-native-cli@^2.0.1:
     prompt "^0.2.14"
     semver "^5.0.3"
 
+react-native-device-info@^11.1.0:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/react-native-device-info/-/react-native-device-info-11.1.0.tgz#7db5c4e5a179dce761efac155a493aa0956a40ab"
+  integrity sha512-hzXJSObJdezEz0hF7MAJ3tGeoesuQWenXXt9mrQR9Mjb8kXpZ09rqSsZ/quNpJdZpQ3rYiFa3/0GFG5KNn9PBg==
+
 react-native-dotenv@^3.4.11:
   version "3.4.11"
   resolved "https://registry.yarnpkg.com/react-native-dotenv/-/react-native-dotenv-3.4.11.tgz#2e6c4eabd55d5f1bf109b3dd9141dadf9c55cdd4"
@@ -11920,6 +11930,14 @@ react-proxy@^1.1.7:
     lodash "^4.6.1"
     react-deep-force-update "^1.0.0"
 
+react-redux@^9.1.1:
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-9.1.2.tgz#deba38c64c3403e9abd0c3fbeab69ffd9d8a7e4b"
+  integrity sha512-0OA4dhM1W48l3uzmv6B7TXPCGmokUU4p1M44DGN2/D9a1FjVPukVjER1PcPX97jIg6aUeLq1XJo1IpfbgULn0w==
+  dependencies:
+    "@types/use-sync-external-store" "^0.0.3"
+    use-sync-external-store "^1.0.0"
+
 [email protected]:
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
@@ -13746,6 +13764,11 @@ use-latest-callback@^0.2.1:
   resolved "https://registry.yarnpkg.com/use-latest-callback/-/use-latest-callback-0.2.1.tgz#4d4e6a9e4817b13142834850dcfa8d24ca4569cf"
   integrity sha512-QWlq8Is8BGWBf883QOEQP5HWYX/kMI+JTbJ5rdtvJLmXTIh9XoHIO3PQcmQl8BU44VKxow1kbQUHa6mQSMALDQ==
 
+use-sync-external-store@^1.0.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz#c3b6390f3a30eba13200d2302dcdf1e7b57b2ef9"
+  integrity sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"