-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Implement the image uploading and displaying logic (#14)
- Loading branch information
1 parent
08f0bb2
commit 62e6b4a
Showing
21 changed files
with
1,797 additions
and
107 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,107 @@ | ||
| import * as ExpoImagePicker from "expo-image-picker"; | ||
| import React from "react"; | ||
| import { Alert } from "react-native"; | ||
| import theme from "theme"; | ||
|
|
||
| import { Ionicons } from "@expo/vector-icons"; | ||
| import { BUTTON_HIT_SLOP } from "components/HeaderBar"; | ||
| import logging from "config/logging"; | ||
| import { CustomUserEvents } from "modules/app/types"; | ||
| import { getUserId } from "modules/auth/AuthSlice"; | ||
| import { Image } from "modules/notes/types"; | ||
| import { useAppSelector } from "store/helpers/storeHooks"; | ||
| import styled from "styled-components/native"; | ||
| import { addCrashlyticsLog } from "utils/addCrashlyticsLog"; | ||
| import { logUserEvent } from "utils/logUserEvent"; | ||
|
|
||
| import FormLabel from "./FormLabel"; | ||
|
|
||
| const alertError = () => { | ||
| Alert.alert("Something went wrong", "Please try again"); | ||
| }; | ||
|
|
||
| type Props = { | ||
| noteId?: string; | ||
| setCurrentImages: React.Dispatch<React.SetStateAction<Image[]>>; | ||
| }; | ||
|
|
||
| const ImagePicker = ({ noteId, setCurrentImages }: Props): JSX.Element => { | ||
| const userId = useAppSelector(getUserId); | ||
|
|
||
| const onPress = async (isCamera = false) => { | ||
| logUserEvent( | ||
| isCamera | ||
| ? CustomUserEvents.MAKE_A_PHOTO | ||
| : CustomUserEvents.PICK_IMAGE_FROM_GALLERY, | ||
| ); | ||
| addCrashlyticsLog(`User tries to ${isCamera ? "make" : "pick"} an image`); | ||
|
|
||
| const pickerResult = await (isCamera | ||
| ? ExpoImagePicker.launchCameraAsync() | ||
| : ExpoImagePicker.launchImageLibraryAsync({ | ||
| mediaTypes: ExpoImagePicker.MediaTypeOptions.Images, | ||
| orderedSelection: true, | ||
| selectionLimit: 20, | ||
| allowsMultipleSelection: true, | ||
| quality: 1, | ||
| })); | ||
|
|
||
| try { | ||
| if (pickerResult.canceled || !userId) return; | ||
|
|
||
| const newImagesUri = pickerResult.assets.map((image) => ({ | ||
| _id: image.uri, | ||
| author: userId, | ||
| url: image.uri, | ||
| noteId: noteId || undefined, | ||
| })); | ||
|
|
||
| setCurrentImages((prev) => [...prev, ...newImagesUri]); | ||
| } catch (e) { | ||
| logging.error(e); | ||
| addCrashlyticsLog(e as string); | ||
| alertError(); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <Section> | ||
| <ButtonsContainer> | ||
| <ButtonContainer | ||
| onPress={() => onPress(false)} | ||
| mr={12} | ||
| hitSlop={BUTTON_HIT_SLOP} | ||
| > | ||
| <Ionicons name="image" size={26} color={theme.colors.cyan500} /> | ||
| </ButtonContainer> | ||
| <ButtonContainer | ||
| onPress={() => onPress(true)} | ||
| hitSlop={BUTTON_HIT_SLOP} | ||
| > | ||
| <Ionicons name="camera" size={26} color={theme.colors.cyan500} /> | ||
| </ButtonContainer> | ||
| </ButtonsContainer> | ||
|
|
||
| <FormLabel label="Images" /> | ||
| </Section> | ||
| ); | ||
| }; | ||
|
|
||
| const Section = styled.View` | ||
| flex-direction: row; | ||
| flex: 1; | ||
| align-center: center; | ||
| justify-content: center; | ||
| margin: 4px 0px 0; | ||
| `; | ||
|
|
||
| const ButtonsContainer = styled.View` | ||
| flex-direction: row; | ||
| align-items: center; | ||
| `; | ||
|
|
||
| const ButtonContainer = styled.TouchableOpacity<{ mr?: number }>` | ||
| margin-right: ${({ mr }) => mr ?? 0}px; | ||
| `; | ||
|
|
||
| export default React.memo(ImagePicker); |
Oops, something went wrong.