feat: post images (#265)

keep-starknet-strange · Jul 24, 2024 · 9f0d974 · 9f0d974
1 parent 0dc954e
commit 9f0d974
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 26 deletions.
diff --git a/JoyboyCommunity/src/modules/Post/index.tsx b/JoyboyCommunity/src/modules/Post/index.tsx
@@ -18,7 +18,7 @@ import {useProfile, useReact, useReactions, useReplyNotes, useStyles, useTheme}
 import {useTipModal} from '../../hooks/modals';
 import {useAuth} from '../../store/auth';
 import {MainStackNavigationProps} from '../../types';
-import {shortenPubkey} from '../../utils/helpers';
+import {getImageRatio, shortenPubkey} from '../../utils/helpers';
 import {getElapsedTimeStringFull} from '../../utils/timestamp';
 import stylesheet from './styles';
 
@@ -29,7 +29,6 @@ export type PostProps = {
 
 export const Post: React.FC<PostProps> = ({asComment, event}) => {
   const repostedEvent = undefined;
-  const postSource = undefined;
 
   const {theme} = useTheme();
   const styles = useStyles(stylesheet);
@@ -65,6 +64,16 @@ export const Post: React.FC<PostProps> = ({asComment, event}) => {
     return likesCount - dislikesCount;
   }, [reactions.data]);
 
+  const postSource = useMemo(() => {
+    if (!event?.tags) return;
+
+    const imageTag = event.tags.find((tag) => tag[0] === 'image');
+    if (!imageTag) return;
+
+    const dimensions = imageTag[2].split('x').map(Number);
+    return {uri: imageTag[1], width: dimensions[0], height: dimensions[1]};
+  }, [event?.tags]);
+
   // Animated style for the icon
   const animatedIconStyle = useAnimatedStyle(() => ({
     transform: [{scale: scale.value}],
@@ -185,7 +194,13 @@ export const Post: React.FC<PostProps> = ({asComment, event}) => {
           </Text>
 
           {postSource && (
-            <Image source={{uri: postSource}} resizeMode="cover" style={styles.contentImage} />
+            <Image
+              source={postSource}
+              style={[
+                styles.contentImage,
+                {aspectRatio: getImageRatio(postSource.width, postSource.height)},
+              ]}
+            />
           )}
         </Pressable>
       </View>

diff --git a/JoyboyCommunity/src/modules/Post/styles.ts b/JoyboyCommunity/src/modules/Post/styles.ts
@@ -48,8 +48,10 @@ export default ThemedStyleSheet((theme) => ({
   },
   contentImage: {
     width: '100%',
-    height: 160,
+    height: 'auto',
+    resizeMode: 'cover',
     borderRadius: 8,
+    overflow: 'hidden',
     marginTop: Spacing.small,
   },
 

diff --git a/JoyboyCommunity/src/screens/CreatePost/index.tsx b/JoyboyCommunity/src/screens/CreatePost/index.tsx
@@ -1,33 +1,61 @@
 import {useQueryClient} from '@tanstack/react-query';
+import * as ImagePicker from 'expo-image-picker';
 import {useState} from 'react';
-import {KeyboardAvoidingView, Pressable, TextInput, View} from 'react-native';
+import {Image, KeyboardAvoidingView, Pressable, TextInput, View} from 'react-native';
 import {SafeAreaView} from 'react-native-safe-area-context';
 
-import {CopyIcon, GalleryIcon, GifIcon, SendIconContained} from '../../assets/icons';
+import {GalleryIcon, SendIconContained} from '../../assets/icons';
 import {TextButton} from '../../components';
 import {useSendNote, useStyles, useTheme} from '../../hooks';
+import {useFileUpload} from '../../hooks/api';
 import {useToast} from '../../hooks/modals';
 import {CreatePostScreenProps} from '../../types';
+import {getImageRatio} from '../../utils/helpers';
 import stylesheet from './styles';
 
 export const CreatePost: React.FC<CreatePostScreenProps> = ({navigation}) => {
   const {theme} = useTheme();
   const styles = useStyles(stylesheet);
 
   const [note, setNote] = useState<string | undefined>();
+  const [image, setImage] = useState<ImagePicker.ImagePickerAsset | undefined>();
 
+  const fileUpload = useFileUpload();
   const sendNote = useSendNote();
   const queryClient = useQueryClient();
   const {showToast} = useToast();
 
-  const handleSendNote = () => {
+  const onGalleryPress = async () => {
+    const pickerResult = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ImagePicker.MediaTypeOptions.Images,
+      allowsEditing: true,
+      allowsMultipleSelection: false,
+      selectionLimit: 1,
+      exif: false,
+      quality: 0.75,
+    });
+
+    if (pickerResult.canceled || !pickerResult.assets.length) return;
+    setImage(pickerResult.assets[0]);
+  };
+
+  const handleSendNote = async () => {
     if (!note || note?.length == 0) {
       showToast({type: 'error', title: 'Please write your note'});
       return;
     }
 
+    let imageUrl: string | undefined;
+    if (image) {
+      const result = await fileUpload.mutateAsync(image);
+      if (result.data.url) imageUrl = result.data.url;
+    }
+
     sendNote.mutate(
-      {content: note},
+      {
+        content: note,
+        tags: image && imageUrl ? [['image', imageUrl, `${image.width}x${image.height}`]] : [],
+      },
       {
         onSuccess() {
           showToast({type: 'success', title: 'Note sent successfully'});
@@ -54,29 +82,32 @@ export const CreatePost: React.FC<CreatePostScreenProps> = ({navigation}) => {
 
       <KeyboardAvoidingView behavior="padding" style={styles.content}>
         <SafeAreaView edges={['bottom', 'left', 'right']} style={styles.content}>
-          <TextInput
-            style={styles.input}
-            value={note}
-            onChangeText={setNote}
-            autoFocus
-            multiline={true}
-            placeholder="Make a post"
-            placeholderTextColor={theme.colors.inputPlaceholder}
-          />
+          <View style={styles.form}>
+            <TextInput
+              style={styles.input}
+              value={note}
+              onChangeText={setNote}
+              autoFocus
+              multiline={true}
+              placeholder="Make a post"
+              placeholderTextColor={theme.colors.inputPlaceholder}
+            />
+
+            {image && (
+              <View style={styles.imageContainer}>
+                <Image
+                  source={{uri: image.uri}}
+                  style={[styles.image, {aspectRatio: getImageRatio(image.width, image.height)}]}
+                />
+              </View>
+            )}
+          </View>
 
           <View style={styles.buttons}>
             <View style={styles.mediaButtons}>
-              <Pressable>
+              <Pressable onPress={onGalleryPress}>
                 <GalleryIcon width="24" height="24" color={theme.colors.primary} />
               </Pressable>
-
-              <Pressable>
-                <GifIcon width="24" height="24" color={theme.colors.primary} />
-              </Pressable>
-
-              <Pressable>
-                <CopyIcon width="24" height="24" color={theme.colors.primary} />
-              </Pressable>
             </View>
 
             <Pressable style={styles.sendButton} onPress={handleSendNote}>

diff --git a/JoyboyCommunity/src/screens/CreatePost/styles.ts b/JoyboyCommunity/src/screens/CreatePost/styles.ts
@@ -24,6 +24,9 @@ export default ThemedStyleSheet((theme) => ({
     flex: 1,
     backgroundColor: theme.colors.background,
   },
+  form: {
+    flex: 1,
+  },
   input: {
     flex: 1,
     padding: Spacing.large,
@@ -33,6 +36,15 @@ export default ThemedStyleSheet((theme) => ({
     lineHeight: 24,
     ...Typography.medium,
   },
+  imageContainer: {
+    padding: Spacing.pagePadding,
+  },
+  image: {
+    width: '100%',
+    resizeMode: 'cover',
+    borderRadius: 8,
+    overflow: 'hidden',
+  },
 
   buttons: {
     position: 'relative',

diff --git a/JoyboyCommunity/src/utils/helpers.ts b/JoyboyCommunity/src/utils/helpers.ts
@@ -57,3 +57,7 @@ export const dataURLToBlob = (dataURL: string) => {
 
   return new Blob([ab], {type: mimeString});
 };
+
+export const getImageRatio = (width: number, height: number, minRatio = 0.75, maxRatio = 1.5) => {
+  return Math.max(minRatio, Math.min(maxRatio, width / height));
+};