Implement possibility to delete users own images

components/galleryImage/GalleryImage.tsx

@@ -37,7 +37,7 @@ const GalleryImage: React.FC<Props> = (props: Props) => {
     }, [imageInView])
 
     const setImageToView = () => {
-        dispatch(loadImage(image, user?.token));
+        dispatch(loadImage(image, user && user.token ? user.token : undefined));
     }
 
     return (

models/Image.ts

@@ -3,7 +3,7 @@ import { Comment } from "./Comment";
 export interface Image {
     name: string;
     description: string;
-    canDelete: boolean;
+    userCanDelete: boolean;
     author: string;
     comments: Comment[];
     score: number;

store/actions/imagesActions.tsx

@@ -21,6 +21,9 @@ export enum ImagesActionTypes {
     UploadImage = '[Images] Upload Image',
     SetUploadSuccess = '[Images] Upload Success',
 
+    RemoveImage = '[Images] Remove Image',
+    RemoveImageSuccess = '[Images] Remove Image Success',
+
     SendComment = '[Images] Send Comment',
     AddComment = '[Images] Add Comment',
     RemoveComment = '[Images] Remove Comment',
@@ -37,6 +40,15 @@ interface SetImagesAction {
     payload: Image[];
 }
 
+interface RemoveImageAction {
+    type: ImagesActionTypes.RemoveImage,
+}
+
+interface RemoveImageSuccessAction {
+    type: ImagesActionTypes.RemoveImageSuccess,
+    payload: Image;
+}
+
 interface LoadUserImagesAction {
     type: ImagesActionTypes.LoadUserImages;
 }
@@ -71,7 +83,7 @@ interface UploadImageAction {
 
 interface SetUploadSuccessAction {
     type: ImagesActionTypes.SetUploadSuccess;
-    payload: { success?: boolean, image?: Image };
+    payload: { success?: boolean };
 }
 
 interface SendCommentAction {
@@ -97,14 +109,14 @@ const refreshImages = (state: boolean) => {
         type: ImagesActionTypes.RefreshImages,
         payload: state,
     }
-}
+};
 
 const refreshUserImages = (state: boolean) => {
     return {
         type: ImagesActionTypes.RefreshUserImages,
         payload: state,
     }
-}
+};
 
 const setImages = (images: Image[]) => {
     return {
@@ -125,7 +137,7 @@ const removeComment = (comment: Comment) => {
         type: ImagesActionTypes.RemoveComment,
         payload: { comment: comment }
     }
-}
+};
 
 const setImageToView = (image: Image) => {
     return {
@@ -134,18 +146,25 @@ const setImageToView = (image: Image) => {
     }
 };
 
-const uploadSuccess = (success: boolean, image: Image) => {
+const uploadSuccess = (success: boolean) => {
     return {
         type: ImagesActionTypes.SetUploadSuccess,
-        payload: { success: success, image: image },
+        payload: { success: success },
     }
-}
+};
 
-export const setUserImages = (images: Image[]) => {
+const setUserImages = (images: Image[]) => {
     return {
         type: ImagesActionTypes.SetUserImages,
         payload: images,
     }
+};
+
+const removeImageSuccess = (image: Image) => {
+    return {
+        type: ImagesActionTypes.RemoveImageSuccess,
+        payload: image,
+    }
 }
 
 export const loadImages = (
@@ -203,7 +222,9 @@ export const uploadImage = (
                 },
             });
 
-            dispatch<any>(uploadSuccess(true, image.data as Image));
+            dispatch<any>(loadUserImages(token));
+            dispatch<any>(loadImages(token));
+            dispatch<any>(uploadSuccess(true));
         } catch (err) {
             console.log(err);
         }
@@ -275,4 +296,23 @@ export const loadImage = (
     }
 }
 
-export type ImagesActions = LoadImagesAction | SetImagesAction | SetUserImagesAction | SetImageInViewAction | SetUploadSuccessAction | RefreshUserImagesAction | RefreshImagesAction | AddCommentAction | RemoveCommentAction;
+export const deleteImage = (
+    image: Image, token: string
+): ThunkAction<Promise<void>, {}, {}, RemoveImageAction> => {
+    return async(
+        dispatch: ThunkDispatch<{}, {}, RemoveImageSuccessAction>
+    ): Promise<void> => {
+        try {
+            await api.delete(`/image/${token}/${image.id}`);
+            dispatch<any>(removeImageSuccess(image));
+        } catch (err) {
+            console.log(err);
+        }
+    }
+}
+
+export type ImagesActions = 
+    LoadImagesAction | SetImagesAction | SetUserImagesAction | 
+    SetImageInViewAction | SetUploadSuccessAction | RefreshUserImagesAction | 
+    RefreshImagesAction | AddCommentAction | RemoveCommentAction |
+    RemoveImageSuccessAction;

store/actions/userActions.tsx

@@ -2,7 +2,7 @@ import { ThunkAction, ThunkDispatch } from "redux-thunk";
 import { api } from "../../utils";
 import { User } from "../../models";
 import { AnyAction } from "redux";
-import { setUserImages } from "../actions/imagesActions";
+import { ImagesActionTypes } from "../actions/imagesActions";
 
 export enum UserActionTypes {
     SetUser = '[User] Set User',
@@ -54,7 +54,10 @@ export const logoutUser = (): ThunkAction<Promise<void>, {}, {}, LogoutAction> =
     return async(
         dispatch: ThunkDispatch<{}, {}, AnyAction>
     ): Promise<void> => {
-        dispatch<any>(setUserImages([]));
+        dispatch<any>({
+            type: ImagesActionTypes.SetUserImages,
+            payload: [],
+        });
         dispatch<any>(setUser(undefined));
     }
 }

store/reducers/imagesReducer.tsx

@@ -79,14 +79,14 @@ export const imagesReducer: Reducer<ImagesState, ImagesActions> = (state: Images
             return {
                 ...state,
                 uploadSuccess: action.payload.success,
-                images: [
-                    ...state.images,
-                    action.payload.image
-                ],
-                userImages: [
-                    ...state.userImages,
-                    action.payload.image
-                ]
+            }
+
+        case ImagesActionTypes.RemoveImageSuccess:
+            return {
+                ...state,
+                imageInView: undefined,
+                images: state.images.filter(img => img.id !== action.payload.id),
+                userImages: state.userImages.filter(img => img.id !== action.payload.id)
             }
 
         default:

views/image/Image.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { Entypo as EntypoIcon, MaterialIcons as MaterialIcon, Ionicons as IonIcon } from '@expo/vector-icons';
 import { Image, SafeAreaView, Text, View, ScrollView, TextInput, TouchableOpacity, Platform } from 'react-native';
@@ -13,11 +13,13 @@ import { Image as ImageModel, Comment } from '../../models';
 
 import ImageComment from '../../components/comment/Comment';
 import Header from '../../components/header/Header';
-import { sendComment, voteImage } from '../../store/actions/imagesActions';
+import { sendComment, voteImage, deleteImage } from '../../store/actions/imagesActions';
 import { selectUser } from '../../store/reducers/userReducer';
 import { selectImageInView } from '../../store/reducers/imagesReducer';
 
-const ImageView: NavigationStackScreenComponent = () => {
+const ImageView: NavigationStackScreenComponent = (props) => {
+    const { navigation } = props;
+
     const dispatch = useDispatch();
     const user = useSelector(selectUser);
     const keyboardHeight = useSelector(selectKeyboardHeight);
@@ -31,6 +33,12 @@ const ImageView: NavigationStackScreenComponent = () => {
         ? 'ios-send'
         : 'md-send';
 
+    useEffect(() => {
+        if (!image) {
+            navigation.pop();
+        }
+    }, [image])
+
     const addComment = () => {
         if (!user || !user.token) { return; }
 
@@ -47,6 +55,12 @@ const ImageView: NavigationStackScreenComponent = () => {
         dispatch(voteImage(user.token, image, upVote, upVote && image.userUpVoted || !upVote && image.userDownVoted));
     }
 
+    const removeImage = () => {
+        if (!user || !user.token) { return; }
+
+        dispatch(deleteImage(image, user.token));
+    }
+
     return !image ? null : (
         <SafeAreaView style={styles.container}>
             <ScrollView style={imageStyles.scrollContainer}>
@@ -67,8 +81,8 @@ const ImageView: NavigationStackScreenComponent = () => {
                             <EntypoIcon style={imageStyles.voteButton} name={'arrow-bold-down'} size={25} color={image.userDownVoted ? '#d10000' : '#eeeeee'} />
                         </TouchableOpacity>
                     </View>
-                    { !image.canDelete ? undefined : 
-                        <TouchableOpacity onPress={() => addVote(false)}>
+                    { !image.userCanDelete ? undefined : 
+                        <TouchableOpacity onPress={() => removeImage()}>
                             <MaterialIcon name={'delete'} size={25} color={'#eeeeee'} /> 
                         </TouchableOpacity>
                     }