From 67fcb0b963a9f38451a382803bcfaa5fb001cded Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Thu, 17 Jun 2021 23:04:57 -0700
Subject: Revamp Moment Post View

---
 src/components/profile/MomentMoreInfoDrawer.tsx | 7 -------
 1 file changed, 7 deletions(-)

(limited to 'src/components/profile')

diff --git a/src/components/profile/MomentMoreInfoDrawer.tsx b/src/components/profile/MomentMoreInfoDrawer.tsx
index a796ffd8..a8adcfda 100644
--- a/src/components/profile/MomentMoreInfoDrawer.tsx
+++ b/src/components/profile/MomentMoreInfoDrawer.tsx
@@ -169,7 +169,6 @@ const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
   return (
     <>
       <TouchableOpacity
-        style={styles.icon}
         onPress={() => {
           setIsOpen(true);
         }}>
@@ -184,10 +183,4 @@ const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
   );
 };
 
-const styles = StyleSheet.create({
-  icon: {
-    marginRight: '3%',
-  },
-});
-
 export default MomentMoreInfoDrawer;
-- 
cgit v1.2.3-70-g09d2


From 5449a11f4c404e505ba4369bbdbefd73eeda0be3 Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Fri, 18 Jun 2021 10:51:38 -0700
Subject: Add image manipulation for cropping

---
 ios/Podfile.lock                          | 10 ++++
 package.json                              |  1 +
 src/components/comments/ZoomInCropper.tsx | 85 ++++++++++++++++++++++++++++---
 src/components/moments/MomentPost.tsx     |  2 +-
 src/components/profile/PublicProfile.tsx  |  4 +-
 yarn.lock                                 | 19 +++++++
 6 files changed, 113 insertions(+), 8 deletions(-)

(limited to 'src/components/profile')

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index eec8a988..d668122e 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -346,6 +346,9 @@ PODS:
     - React-Core
   - react-native-netinfo (6.0.0):
     - React-Core
+  - react-native-photo-manipulator (1.2.4):
+    - React
+    - WCPhotoManipulator (~> 2.0.4)
   - react-native-safe-area-context (3.2.0):
     - React-Core
   - react-native-splash-screen (3.2.0):
@@ -484,6 +487,7 @@ PODS:
   - RNVectorIcons (7.1.0):
     - React
   - TOCropViewController (2.5.3)
+  - WCPhotoManipulator (2.0.4)
   - Yoga (1.14.0)
   - YogaKit (1.18.1):
     - Yoga (~> 1.14)
@@ -536,6 +540,7 @@ DEPENDENCIES:
   - react-native-image-picker (from `../node_modules/react-native-image-picker`)
   - react-native-image-resizer (from `../node_modules/react-native-image-resizer`)
   - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
+  - react-native-photo-manipulator (from `../node_modules/react-native-photo-manipulator`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - react-native-splash-screen (from `../node_modules/react-native-splash-screen`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
@@ -593,6 +598,7 @@ SPEC REPOS:
     - OpenSSL-Universal
     - PromisesObjC
     - TOCropViewController
+    - WCPhotoManipulator
     - YogaKit
 
 EXTERNAL SOURCES:
@@ -646,6 +652,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-image-resizer"
   react-native-netinfo:
     :path: "../node_modules/@react-native-community/netinfo"
+  react-native-photo-manipulator:
+    :path: "../node_modules/react-native-photo-manipulator"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
   react-native-splash-screen:
@@ -756,6 +764,7 @@ SPEC CHECKSUMS:
   react-native-image-picker: 474cf2c33c2b6671da53d293a16c97995f0aec15
   react-native-image-resizer: 13ac4af788f88af36d0353a1324401ebabd04fe4
   react-native-netinfo: e849fc21ca2f4128a5726c801a82fc6f4a6db50d
+  react-native-photo-manipulator: e44c14a28bf7c9b7657a0e0ac79327c1a4d8fe2c
   react-native-safe-area-context: f0906bf8bc9835ac9a9d3f97e8bde2a997d8da79
   react-native-splash-screen: 200d11d188e2e78cea3ad319964f6142b6384865
   React-RCTActionSheet: 53ea72699698b0b47a6421cb1c8b4ab215a774aa
@@ -786,6 +795,7 @@ SPEC CHECKSUMS:
   RNSVG: 551acb6562324b1d52a4e0758f7ca0ec234e278f
   RNVectorIcons: bc69e6a278b14842063605de32bec61f0b251a59
   TOCropViewController: 20a14b6a7a098308bf369e7c8d700dc983a974e6
+  WCPhotoManipulator: 45b7be19b75c9edf6d2b44f2f61dbc3673862a8f
   Yoga: 7d13633d129fd179e01b8953d38d47be90db185a
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
diff --git a/package.json b/package.json
index 01c79a37..1617adec 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
     "react-native-image-resizer": "^1.4.4",
     "react-native-inappbrowser-reborn": "^3.5.0",
     "react-native-linear-gradient": "^2.5.6",
+    "react-native-photo-manipulator": "^1.2.4",
     "react-native-picker-select": "^7.0.0",
     "react-native-push-notifications": "^3.0.10",
     "react-native-reanimated": "2.0.0-rc.0",
diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx
index 54acc26e..79047b41 100644
--- a/src/components/comments/ZoomInCropper.tsx
+++ b/src/components/comments/ZoomInCropper.tsx
@@ -2,13 +2,21 @@ import {RouteProp} from '@react-navigation/core';
 import {useFocusEffect} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
 import React, {useCallback, useEffect, useState} from 'react';
-import {Dimensions, Image, StyleSheet, TouchableOpacity} from 'react-native';
+import {
+  Dimensions,
+  Image,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import {normalize} from 'react-native-elements';
-import ImageZoom from 'react-native-image-pan-zoom';
+import ImageZoom, {IOnMove} from 'react-native-image-pan-zoom';
 import CloseIcon from '../../assets/ionicons/close-outline.svg';
 import {MainStackParams} from '../../routes';
-import {HeaderHeight, SCREEN_WIDTH} from '../../utils';
-import {TaggSquareButton} from '../common';
+import {HeaderHeight, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {LoadingIndicator, TaggSquareButton} from '../common';
+import PhotoManipulator from 'react-native-photo-manipulator';
+import {trackPromise} from 'react-promise-tracker';
 
 type ZoomInCropperRouteProps = RouteProp<MainStackParams, 'ZoomInCropper'>;
 type ZoomInCropperNavigationProps = StackNavigationProp<
@@ -51,6 +59,70 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
       );
     }
   }, []);
+
+  const handleNext = () => {
+    console.log('x0: ', x0, 'x1: ', x1, 'y0: ', y0, 'y1: ', y1);
+    if (
+      x0 !== undefined &&
+      x1 !== undefined &&
+      y0 !== undefined &&
+      y1 !== undefined &&
+      image.sourceURL
+    ) {
+      console.log('x0x1y0y1');
+      PhotoManipulator.crop(image.sourceURL, {
+        x: x0,
+        y: y1,
+        width: Math.abs(x0 - x1),
+        height: Math.abs(y0 - y1),
+      })
+        .then((croppedURL) => console.log('croppedURL: ', croppedURL))
+        .catch((err) => console.log('err: ', err));
+    }
+    console.log('crop photo and send to caption screen');
+  };
+
+  const [x0, setX0] = useState<number>();
+  const [x1, setX1] = useState<number>();
+  const [y0, setY0] = useState<number>();
+  const [y1, setY1] = useState<number>();
+
+  const onMove = (position: IOnMove) => {
+    Image.getSize(
+      image.path,
+      (w, h) => {
+        const x = position.positionX;
+        const y = position.positionY;
+        const scale = position.scale;
+        const screen_ratio = SCREEN_HEIGHT / SCREEN_WIDTH;
+        let x0 = w / 2 - x * (w / SCREEN_WIDTH) - w / 2 / scale;
+        let x1 = w / 2 - x * (w / SCREEN_WIDTH) + w / 2 / scale;
+        if (x0 < 0) {
+          x0 = 0;
+        }
+        if (x1 > w) {
+          x1 = w;
+        }
+        const x_distance = Math.abs(x1 - x0);
+        const y_distance = screen_ratio * x_distance;
+        let y0 = h / 2 - y * (h / SCREEN_HEIGHT) + y_distance / 2;
+        let y1 = h / 2 - y * (h / SCREEN_HEIGHT) - y_distance / 2;
+        if (y0 > h) {
+          y0 = h;
+        }
+        if (y1 < 0) {
+          y1 = 0;
+        }
+        console.log('onMove x0: ', x0, 'x1: ', x1, 'y0: ', y0, 'y1: ', y1);
+        setX0(x0);
+        setX1(x1);
+        setY0(y0);
+        setY1(y1);
+      },
+      (err) => console.log(err),
+    );
+  };
+
   return (
     <>
       <TouchableOpacity
@@ -63,7 +135,8 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
         cropWidth={Dimensions.get('window').width}
         cropHeight={Dimensions.get('window').height}
         imageWidth={SCREEN_WIDTH}
-        imageHeight={SCREEN_WIDTH / aspectRatio}>
+        imageHeight={SCREEN_WIDTH / aspectRatio}
+        onMove={onMove}>
         <Image
           style={{width: SCREEN_WIDTH, height: SCREEN_WIDTH / aspectRatio}}
           source={{
@@ -72,7 +145,7 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
         />
       </ImageZoom>
       <TaggSquareButton
-        onPress={() => console.log('Navigate to caption screen')}
+        onPress={handleNext}
         title={'Next'}
         buttonStyle={'normal'}
         buttonColor={'blue'}
diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index 3840cb08..0f105c0d 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -115,7 +115,7 @@ const MomentPost: React.FC<MomentPostProps> = ({
   );
   const [commentPreview, setCommentPreview] =
     useState<MomentCommentPreviewType | null>(moment.comment_preview);
-  const {keyboardVisible, scrollTo} = useContext(MomentContext);
+  const {keyboardVisible} = useContext(MomentContext);
   const [hideText, setHideText] = useState(false);
 
   const [isFullScreen, setIsFullScreen] = useState<boolean>(false);
diff --git a/src/components/profile/PublicProfile.tsx b/src/components/profile/PublicProfile.tsx
index 8a80c56f..6b991d7c 100644
--- a/src/components/profile/PublicProfile.tsx
+++ b/src/components/profile/PublicProfile.tsx
@@ -87,7 +87,9 @@ const PublicProfile: React.FC<ContentProps> = ({
               scrollViewRef.current
             ) {
               setScrollEnabled(false);
-              scrollViewRef.current.scrollTo({y: 0});
+              if (scrollViewRef && scrollViewRef.current) {
+                scrollViewRef.current.scrollTo({y: 0});
+              }
               navigation.navigate('MomentUploadPrompt', {
                 screenType,
                 momentCategory: momentCategories[0],
diff --git a/yarn.lock b/yarn.lock
index c7f8ff47..8b270336 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2303,6 +2303,11 @@ color-convert@^2.0.1:
   dependencies:
     color-name "~1.1.4"
 
+color-convert@~0.5.0:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd"
+  integrity sha1-vbbGnOZg+t/+CwAHzER+G59ygr0=
+
 color-name@1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
@@ -6018,6 +6023,13 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
+parse-color@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/parse-color/-/parse-color-1.0.0.tgz#7b748b95a83f03f16a94f535e52d7f3d94658619"
+  integrity sha1-e3SLlag/A/FqlPU15S1/PZRlhhk=
+  dependencies:
+    color-convert "~0.5.0"
+
 parse-json@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
@@ -6500,6 +6512,13 @@ react-native-markdown-package@1.8.1:
     react-native-lightbox "^0.7.0"
     simple-markdown "^0.7.1"
 
+react-native-photo-manipulator@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/react-native-photo-manipulator/-/react-native-photo-manipulator-1.2.4.tgz#60da9c68c815695c43fa3ed8c77bd9f08d076158"
+  integrity sha512-EGkDxmVfom52G2jDWvY+rzzHVTlXLCfBs+IQut+VaH7TtShxQekzzqxFRr0Pch/0I5s6Vt+gjrhFZBIv7FweVg==
+  dependencies:
+    parse-color "^1.0.0"
+
 react-native-picker-select@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/react-native-picker-select/-/react-native-picker-select-7.0.0.tgz#4808a1177f997e234bb8505849dfffe1a01fedac"
-- 
cgit v1.2.3-70-g09d2


From 706a6c77971a10d8d45d1b3e189eadc28f89841e Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Tue, 22 Jun 2021 08:44:12 -0700
Subject: Fix lint errors

---
 src/components/comments/CommentsCount.tsx       | 39 +++++++++++++------------
 src/components/comments/ZoomInCropper.tsx       |  3 +-
 src/components/moments/MomentPost.tsx           |  4 +--
 src/components/profile/MomentMoreInfoDrawer.tsx |  1 -
 src/screens/main/NotificationsScreen.tsx        |  5 ++--
 src/screens/onboarding/BasicInfoOnboarding.tsx  |  5 ++--
 src/screens/profile/IndividualMoment.tsx        | 16 +++-------
 7 files changed, 34 insertions(+), 39 deletions(-)

(limited to 'src/components/profile')

diff --git a/src/components/comments/CommentsCount.tsx b/src/components/comments/CommentsCount.tsx
index cb30fe76..90514193 100644
--- a/src/components/comments/CommentsCount.tsx
+++ b/src/components/comments/CommentsCount.tsx
@@ -1,6 +1,6 @@
 import {useNavigation} from '@react-navigation/core';
 import React from 'react';
-import {Text} from 'react-native';
+import {StyleSheet, Text} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import CommentsIcon from '../../assets/icons/moment-comment-icon.svg';
 import {MomentPostType, ScreenType} from '../../types';
@@ -15,12 +15,7 @@ const CommentsCount: React.FC<CommentsCountProps> = ({moment, screenType}) => {
   const navigation = useNavigation();
   return (
     <TouchableOpacity
-      style={{
-        minWidth: 50,
-        flexDirection: 'column',
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}
+      style={styles.countContainer}
       onPress={() =>
         navigation.navigate('MomentCommentsScreen', {
           moment_id: moment.moment_id,
@@ -28,20 +23,26 @@ const CommentsCount: React.FC<CommentsCountProps> = ({moment, screenType}) => {
         })
       }>
       <CommentsIcon width={25} height={25} />
-      <Text
-        style={{
-          fontWeight: '500',
-          fontSize: normalize(11),
-          lineHeight: normalize(13),
-          letterSpacing: normalize(0.05),
-          textAlign: 'center',
-          color: 'white',
-          marginTop: normalize(5),
-        }}>
-        {moment.comments_count}
-      </Text>
+      <Text style={styles.count}>{moment.comments_count}</Text>
     </TouchableOpacity>
   );
 };
 
+const styles = StyleSheet.create({
+  countContainer: {
+    minWidth: 50,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  count: {
+    fontWeight: '500',
+    fontSize: normalize(11),
+    lineHeight: normalize(13),
+    letterSpacing: normalize(0.05),
+    textAlign: 'center',
+    color: 'white',
+    marginTop: normalize(5),
+  },
+});
 export default CommentsCount;
diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx
index f3fb5c05..25301e6a 100644
--- a/src/components/comments/ZoomInCropper.tsx
+++ b/src/components/comments/ZoomInCropper.tsx
@@ -130,7 +130,7 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
         <CloseIcon height={25} width={25} color={'white'} />
       </TouchableOpacity>
       <ImageZoom
-        style={{backgroundColor: 'black'}}
+        style={styles.zoomView}
         cropWidth={SCREEN_WIDTH}
         cropHeight={SCREEN_HEIGHT}
         imageWidth={SCREEN_WIDTH}
@@ -180,4 +180,5 @@ const styles = StyleSheet.create({
     letterSpacing: normalize(1.3),
     textAlign: 'center',
   },
+  zoomView: {backgroundColor: 'black'},
 });
diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index 26490315..e069089c 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -236,13 +236,13 @@ const MomentPost: React.FC<MomentPostProps> = ({
                         value: moment.caption,
                         styles: styles.captionText,
                         partTypes: mentionPartTypes('white'),
-                        onPress: (user: UserType) =>
+                        onPress: (userLocal: UserType) =>
                           navigateToProfile(
                             state,
                             dispatch,
                             navigation,
                             screenType,
-                            user,
+                            userLocal,
                           ),
                       })}
                   </>
diff --git a/src/components/profile/MomentMoreInfoDrawer.tsx b/src/components/profile/MomentMoreInfoDrawer.tsx
index a8adcfda..dc4ebe32 100644
--- a/src/components/profile/MomentMoreInfoDrawer.tsx
+++ b/src/components/profile/MomentMoreInfoDrawer.tsx
@@ -3,7 +3,6 @@ import React, {useEffect, useState} from 'react';
 import {
   Alert,
   GestureResponderEvent,
-  StyleSheet,
   TextStyle,
   TouchableOpacity,
   ViewProps,
diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx
index 03842b0a..84c15f66 100644
--- a/src/screens/main/NotificationsScreen.tsx
+++ b/src/screens/main/NotificationsScreen.tsx
@@ -36,8 +36,9 @@ const NotificationsScreen: React.FC = () => {
   );
   const [refreshing, setRefreshing] = useState(false);
   // used for figuring out which ones are unread
-  const [lastViewed, setLastViewed] =
-    useState<moment.Moment | undefined>(undefined);
+  const [lastViewed, setLastViewed] = useState<moment.Moment | undefined>(
+    undefined,
+  );
   const {notifications} = useSelector(
     (state: RootState) => state.notifications,
   );
diff --git a/src/screens/onboarding/BasicInfoOnboarding.tsx b/src/screens/onboarding/BasicInfoOnboarding.tsx
index d5998ac1..4c8da021 100644
--- a/src/screens/onboarding/BasicInfoOnboarding.tsx
+++ b/src/screens/onboarding/BasicInfoOnboarding.tsx
@@ -71,8 +71,9 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => {
   const [invalidWithError, setInvalidWithError] = useState(
     'Please enter a valid ',
   );
-  const [autoCapitalize, setAutoCap] =
-    useState<'none' | 'sentences' | 'words' | 'characters' | undefined>('none');
+  const [autoCapitalize, setAutoCap] = useState<
+    'none' | 'sentences' | 'words' | 'characters' | undefined
+  >('none');
   const [fadeValue, setFadeValue] = useState<Animated.Value<number>>(
     new Animated.Value(0),
   );
diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index 2ad22db4..ca31ad5b 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -1,19 +1,14 @@
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
 import React, {useEffect, useRef, useState} from 'react';
-import {FlatList, Keyboard, StyleSheet} from 'react-native';
+import {FlatList, Keyboard} from 'react-native';
 import {useSelector} from 'react-redux';
 import {MomentPost, TabsGradient} from '../../components';
 import {AVATAR_DIM} from '../../constants';
 import {MainStackParams} from '../../routes';
 import {RootState} from '../../store/rootreducer';
 import {MomentPostType} from '../../types';
-import {
-  isIPhoneX,
-  normalize,
-  SCREEN_HEIGHT,
-  StatusBarHeight,
-} from '../../utils';
+import {isIPhoneX} from '../../utils';
 
 /**
  * Individual moment view opened when user clicks on a moment tile
@@ -38,10 +33,7 @@ interface IndividualMomentProps {
   navigation: IndividualMomentNavigationProp;
 }
 
-const IndividualMoment: React.FC<IndividualMomentProps> = ({
-  route,
-  navigation,
-}) => {
+const IndividualMoment: React.FC<IndividualMomentProps> = ({route}) => {
   const {
     userXId,
     screenType,
@@ -86,7 +78,7 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({
       <FlatList
         ref={scrollRef}
         data={momentData}
-        renderItem={({item, index}) => (
+        renderItem={({item}) => (
           <MomentPost
             key={item.moment_id}
             moment={item}
-- 
cgit v1.2.3-70-g09d2