Update useCreateEvent hook to handle photo library image URIs #387
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 1 Skipped Deployment
|
WalkthroughThe pull request modifies the Changes
Sequence DiagramsequenceDiagram
participant User
participant Hook as useCreateEvent
participant MediaLib as MediaLibrary
User->>Hook: Provide image URI
alt Photo Library URI
Hook->>MediaLib: getAssetInfoAsync(assetId)
MediaLib-->>Hook: Return local file URI
else Regular URI
Hook->>Hook: Use original URI
end
Hook->>Hook: Validate and process image
Possibly related PRs
Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
coderabbitai
bot
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
apps/expo/src/hooks/useCreateEvent.ts (1)
Line range hint
134-139: Move API configuration to environment variables.The Bytescale API endpoint and authorization token should be moved to environment variables for better security and configuration management.
+const UPLOAD_API_URL = process.env.UPLOAD_API_URL ?? "https://api.bytescale.com/v2/accounts/12a1yek/uploads/binary"; +const UPLOAD_API_KEY = process.env.UPLOAD_API_KEY ?? "public_12a1yekATNiLj4VVnREZ8c7LM8V8"; response = await FileSystem.uploadAsync( - "https://api.bytescale.com/v2/accounts/12a1yek/uploads/binary", + UPLOAD_API_URL, manipulatedImage.uri, { uploadType: FileSystem.FileSystemUploadType.BINARY_CONTENT, httpMethod: "POST", headers: { "Content-Type": "image/jpeg", - Authorization: "Bearer public_12a1yekATNiLj4VVnREZ8c7LM8V8", + Authorization: `Bearer ${UPLOAD_API_KEY}`, }, }, );
🧹 Nitpick comments (3)
apps/expo/src/hooks/useCreateEvent.ts (3)
89-92: Consider making the asset ID extraction more robust.The current implementation assumes a specific URI format. Consider adding more validation or using a URL parsing utility to handle potential variations in the URI format.
-const assetId = imageUri.replace("ph://", "").split("/")[0]; +const assetId = new URL(imageUri.replace("ph://", "https://")).pathname.split("/")[0];
111-111: Consider adding file cleanup.After successful upload, consider cleaning up the temporary manipulated image file to free up device storage.
// 4. Create event +try { const result = (await eventFromImage.mutateAsync({ imageUrl: fileUrl, // ... other props })) as CreateEventResult; + // Clean up temporary file + if (manipulatedImage?.uri.startsWith('file://')) { + await FileSystem.deleteAsync(manipulatedImage.uri, { idempotent: true }); + } return result.eventId; +} catch (error) { + // Clean up on error too + if (manipulatedImage?.uri.startsWith('file://')) { + await FileSystem.deleteAsync(manipulatedImage.uri, { idempotent: true }); + } + throw error; +}
108-114: Add file size validation before manipulation.Consider adding a file size check before proceeding with image manipulation to prevent processing of extremely large files.
+const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB // 1. Manipulate image let manipulatedImage; try { + const fileInfo = await FileSystem.getInfoAsync(fileUri); + if (fileInfo.size && fileInfo.size > MAX_FILE_SIZE) { + throw new Error(`File size exceeds ${MAX_FILE_SIZE / (1024 * 1024)}MB limit`); + } manipulatedImage = await ImageManipulator.manipulateAsync( fileUri, [{ resize: { width: 1284 } }], { compress: 0.8, format: ImageManipulator.SaveFormat.JPEG }, );
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/expo/src/hooks/useCreateEvent.ts(2 hunks)
🔇 Additional comments (1)
apps/expo/src/hooks/useCreateEvent.ts (1)
4-4: LGTM! Import statement follows the established pattern.The import follows the same pattern as other expo-related imports in the file.
Summary by CodeRabbit
New Features
Bug Fixes