TMA - 232 Create caption screen with image picker (#53)

* Added image picture functionality

* Created caption screen and uploads to moments endpoint consisting of the picture and caption only

Co-authored-by: Husam Salhab <47015061+hsalhab@users.noreply.github.com>

1 files changed, 156 insertions, 0 deletions

diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
new file mode 100644
index 00000000..3eb6c47b
--- /dev/null
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -0,0 +1,156 @@
+import React, {useState} from 'react';
+import {StyleSheet, View, Image, Alert} from 'react-native';
+import {Button} from 'react-native-elements';
+import {SearchBackground, TabsGradient, TaggBigInput} from '../../components';
+import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
+import AsyncStorage from '@react-native-community/async-storage';
+import {UserType} from '../../types';
+import {RouteProp} from '@react-navigation/native';
+import {ProfileStackParams} from 'src/routes';
+import {StackNavigationProp} from '@react-navigation/stack';
+import {CaptionScreenHeader} from '../../components/profile';
+import {MOMENTS_UPLOAD_ENDPOINT} from '../../constants';
+import {AuthContext} from '../../routes/authentication';
+
+const NO_USER: UserType = {
+  userId: '',
+  username: '',
+};
+
+/**
+ * Upload Screen to allow users to upload posts to Tagg
+ */
+type CaptionScreenRouteProp = RouteProp<ProfileStackParams, 'CaptionScreen'>;
+type CaptionScreenNavigationProp = StackNavigationProp<
+  ProfileStackParams,
+  'CaptionScreen'
+>;
+interface CaptionScreenProps {
+  route: CaptionScreenRouteProp;
+  navigation: CaptionScreenNavigationProp;
+}
+
+const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
+  const {title, image} = route.params;
+  const {
+    user: {userId},
+  } = React.useContext(AuthContext);
+  const [user, setUser] = useState<UserType>(NO_USER);
+  const [caption, setCaption] = React.useState('');
+
+  const handleCaptionUpdate = (caption: string) => {
+    setCaption(caption);
+  };
+
+  const handleShare = async () => {
+    try {
+      const token = await AsyncStorage.getItem('token');
+      if (!token) {
+        setUser(NO_USER);
+        return;
+      }
+      const request = new FormData();
+      const uri = image.path;
+      const name = image.filename;
+      request.append('image', {
+        uri: uri,
+        name: name,
+        type: 'image/jpg',
+      });
+      request.append('moment', title);
+      request.append('user_id', userId);
+      request.append('caption', caption);
+      let response = await fetch(MOMENTS_UPLOAD_ENDPOINT, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'multipart/form-data',
+          Authorization: 'Token ' + token,
+        },
+        body: request,
+      });
+      let statusCode = response.status;
+      if (statusCode === 200) {
+        navigation.navigate('Profile');
+      } else {
+        Alert.alert('An error occured while uploading. Please try again!');
+      }
+    } catch (err) {
+      Alert.alert('An error occured during authenticaion. Please login again!');
+    }
+  };
+  return (
+    <SearchBackground>
+      <View style={styles.contentContainer}>
+        <View style={styles.buttonsContainer}>
+          <Button
+            title="Cancel"
+            buttonStyle={styles.button}
+            onPress={() => {
+              navigation.navigate('Profile');
+            }}
+          />
+          <Button
+            title="Share"
+            titleStyle={styles.shareButtonTitle}
+            buttonStyle={styles.button}
+            onPress={handleShare}
+          />
+        </View>
+        <CaptionScreenHeader style={styles.header} {...{title: title}} />
+        <Image
+          style={styles.image}
+          source={{uri: image.path}}
+          resizeMode={'cover'}
+        />
+        <TaggBigInput
+          style={styles.text}
+          multiline
+          placeholder="Write something....."
+          placeholderTextColor="gray"
+          onChangeText={handleCaptionUpdate}
+        />
+      </View>
+      <TabsGradient />
+    </SearchBackground>
+  );
+};
+const styles = StyleSheet.create({
+  contentContainer: {
+    paddingTop: StatusBarHeight,
+    paddingBottom: SCREEN_HEIGHT,
+  },
+  buttonsContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginLeft: '5%',
+    marginRight: '5%',
+  },
+  button: {
+    backgroundColor: 'transparent',
+  },
+  shareButtonTitle: {
+    fontWeight: 'bold',
+    color: '#6EE7E7',
+  },
+  header: {
+    marginVertical: 20,
+  },
+  image: {
+    position: 'relative',
+    width: SCREEN_WIDTH,
+    aspectRatio: 1,
+    marginBottom: '3%',
+  },
+  text: {
+    position: 'relative',
+    backgroundColor: 'white',
+    width: '100%',
+    paddingLeft: '2%',
+    paddingRight: '2%',
+    paddingBottom: '1%',
+    paddingTop: '1%',
+    height: 60,
+  },
+});
+
+export default CaptionScreen;