Feat: Implement upload and delete fuctionality to s3 for images and videos #28
Conversation
WalkthroughThe updates integrate AWS S3 for file uploads and deletions, replacing Supabase storage across multiple components in the admin section. Modifications were made to conditionally render UI elements based on user roles, and environmental variables were added for S3 configuration. Additionally, development settings were updated, and a sitemap was introduced for improved site structuring. Changes
Sequence Diagram(s)sequenceDiagram
participant Admin as Admin UI
participant S3 as AWS S3
participant Config as Config Files
Admin->>Admin: User initiates image upload
Admin->>S3: uploadFileTos3(file)
S3-->>Admin: S3 URL
Admin->>S3: deleteFileFroms3(filePath)
S3-->>Admin: Deletion confirmation
Admin->>Config: Load AWS S3 configurations
Admin-->>Admin: Display S3-hosted image
Poem
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 as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 25
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (2)
admin/public/logo.icois excluded by!**/*.icowebsite/public/logo.icois excluded by!**/*.ico
Files selected for processing (22)
- admin/components/Sidebar/index.tsx (2 hunks)
- admin/next.config.mjs (1 hunks)
- admin/package.json (1 hunks)
- admin/pages/categories/add/index.tsx (2 hunks)
- admin/pages/categories/edit/[id].tsx (2 hunks)
- admin/pages/categories/index.tsx (2 hunks)
- admin/pages/dishes/add/index.tsx (2 hunks)
- admin/pages/dishes/edit/[id].tsx (3 hunks)
- admin/pages/dishes/index.tsx (4 hunks)
- admin/pages/menus/add/index.tsx (2 hunks)
- admin/pages/menus/edit/[id].tsx (2 hunks)
- admin/pages/menus/index.tsx (2 hunks)
- admin/pages/profile/index.tsx (2 hunks)
- admin/pages/restaurants/add/index.tsx (2 hunks)
- admin/pages/restaurants/edit/[id].tsx (3 hunks)
- admin/pages/restaurants/index.tsx (3 hunks)
- admin/pages/settings/index.tsx (8 hunks)
- admin/utils/image.ts (2 hunks)
- website/hooks/useScrollReset.tsx (1 hunks)
- website/next.config.mjs (1 hunks)
- website/pages/category/restaurant.tsx (2 hunks)
- website/public/sitemap.xml (1 hunks)
Files skipped from review due to trivial changes (5)
- admin/next.config.mjs
- admin/package.json
- website/hooks/useScrollReset.tsx
- website/next.config.mjs
- website/public/sitemap.xml
Additional context used
Biome
admin/pages/restaurants/edit/[id].tsx
[error] 87-87: Shouldn't redeclare 'i'. Consider to delete it or rename it.
'i' is defined here:
(lint/suspicious/noRedeclare)
admin/pages/dishes/edit/[id].tsx
[error] 126-126: Shouldn't redeclare 'i'. Consider to delete it or rename it.
'i' is defined here:
(lint/suspicious/noRedeclare)
[error] 169-169: Shouldn't redeclare 'i'. Consider to delete it or rename it.
'i' is defined here:
(lint/suspicious/noRedeclare)
admin/pages/settings/index.tsx
[error] 183-183: Shouldn't redeclare 'i'. Consider to delete it or rename it.
'i' is defined here:
(lint/suspicious/noRedeclare)
[error] 337-337: This variable is used before its declaration.
The variable is declared here:
(lint/correctness/noInvalidUseBeforeDeclaration)
[error] 338-338: Shouldn't redeclare 'i'. Consider to delete it or rename it.
'i' is defined here:
(lint/suspicious/noRedeclare)
[error] 394-394: Shouldn't redeclare 'i'. Consider to delete it or rename it.
'i' is defined here:
(lint/suspicious/noRedeclare)
Additional comments not posted (23)
admin/utils/image.ts (1)
10-16: Ensure AWS credentials are securely managed.The AWS credentials are being accessed from environment variables. Ensure that these environment variables are securely managed and not exposed in the client-side code.
website/pages/category/restaurant.tsx (1)
Line range hint
81-136: Ensure the newdivelement maintains functionality.The
Swipercomponent has been replaced with adivelement for rendering menu items. Ensure that the newdivelement maintains the intended functionality, such as scrolling and layout.admin/pages/categories/add/index.tsx (1)
Line range hint
13-62: Ensure proper error handling for file upload.The
uploadFileTos3function is used for uploading images. Ensure that any errors thrown by this function are properly handled to provide feedback to the user.admin/pages/categories/edit/[id].tsx (1)
12-13: Ensure proper error handling for file upload and deletion.The
uploadFileTos3anddeleteFileFroms3functions are used for handling images. Ensure that any errors thrown by these functions are properly handled to provide feedback to the user.admin/pages/restaurants/index.tsx (2)
29-29: Consistent String UsageThe change from single quotes to double quotes for the
ordermethod argument improves consistency. Good job!
77-77: S3 Deletion LogicThe function correctly deletes images from S3 before deleting the restaurant record. This ensures no orphaned images remain in S3. Good implementation!
admin/pages/menus/add/index.tsx (1)
69-75: Image Upload to S3The image upload logic is correctly implemented, converting the image to WebP format and uploading it to S3. The image URL construction is also handled properly. Good job!
admin/pages/menus/edit/[id].tsx (1)
84-92: Image Upload and Deletion in S3The function correctly handles the uploading of new images and deletion of old images from S3. The image URL construction is also handled properly. Good job!
admin/pages/categories/index.tsx (2)
Line range hint
29-29: Consistent String UsageThe change from single quotes to double quotes for the
ordermethod argument improves consistency. Good job!
78-78: S3 Deletion LogicThe function correctly deletes images from S3 before deleting the category record. This ensures no orphaned images remain in S3. Good implementation!
admin/pages/menus/index.tsx (1)
10-10: Import statement looks good.The import
deleteFileFroms3is necessary and correctly used in the file.admin/pages/restaurants/edit/[id].tsx (1)
13-14: Import statements look good.The imports
deleteFileFroms3anduploadFileTos3are necessary and correctly used in the file.admin/pages/dishes/index.tsx (2)
8-8: Import statement looks good.The import
deleteFileFroms3is necessary and correctly used in the file.
41-42: Ensure the select query is fetching the required data.The select query now includes additional fields (
id, name, images, video, video_thumbnail, price, menus(*)). Ensure these fields are required and correctly used in the file.Verification successful
The select query is fetching the required data.
The fields
id, name, images, video, video_thumbnail, price, menusare all used within theadmin/pages/dishes/index.tsxfile, confirming their necessity.
id: Used in multiple places for identification and operations.name: Displayed in the UI.images: Used for displaying images and handling image deletion.video: Used for displaying videos and handling video deletion.video_thumbnail: Used for displaying video thumbnails and handling their deletion.price: Displayed in the UI.menus: Referenced and displayed in the UI.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of the selected fields in the codebase. # Test: Search for the usage of the selected fields. Expect: Only relevant occurances. rg --type javascript --pattern $'id, name, images, video, video_thumbnail, price, menus(*)'Length of output: 504
Script:
#!/bin/bash # Description: Verify the usage of the selected fields in the codebase. # Test: Search for the usage of the selected fields. Expect: Only relevant occurrences. rg 'id' --type js rg 'name' --type js rg 'images' --type js rg 'video' --type js rg 'video_thumbnail' --type js rg 'price' --type js rg 'menus' --type jsLength of output: 153
Script:
#!/bin/bash # Description: Verify the usage of the selected fields in the admin/pages/dishes/index.tsx file. # Test: Search for the usage of the selected fields in the specific file. rg 'id' admin/pages/dishes/index.tsx rg 'name' admin/pages/dishes/index.tsx rg 'images' admin/pages/dishes/index.tsx rg 'video' admin/pages/dishes/index.tsx rg 'video_thumbnail' admin/pages/dishes/index.tsx rg 'price' admin/pages/dishes/index.tsx rg 'menus' admin/pages/dishes/index.tsxLength of output: 3534
admin/pages/restaurants/add/index.tsx (1)
14-14: Import statement looks good.The import
uploadFileTos3is necessary and correctly used in the file.admin/pages/profile/index.tsx (3)
10-11: LGTM! Import changes are appropriate.The import statements for
deleteFileFroms3anduploadFileTos3are correct and align with the PR objectives.
94-100: LGTM! File upload logic is correct.The logic for uploading the file to S3 using
uploadFileTos3is correct.
103-103: LGTM! File deletion logic is correct.The logic for deleting the previous file from S3 using
deleteFileFroms3is correct.admin/pages/dishes/add/index.tsx (4)
15-15: LGTM! Import changes are appropriate.The import statement for
uploadFileTos3is correct and aligns with the PR objectives.
99-100: LGTM! File upload logic for images is correct.The logic for uploading images to S3 using
uploadFileTos3is correct.
116-117: LGTM! File upload logic for video thumbnails is correct.The logic for uploading video thumbnails to S3 using
uploadFileTos3is correct.
118-124: LGTM! File upload logic for videos is correct.The logic for uploading videos to S3 using
uploadFileTos3is correct.admin/components/Sidebar/index.tsx (1)
131-176: LGTM! Ensure proper testing for conditional rendering.The conditional rendering logic for the
/categorieslink based on theroleprop looks good. Ensure that this change is properly tested to verify that the link is only visible to users with the "super-admin" role.
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (2)
- admin/.env.example (1 hunks)
- admin/utils/image.ts (2 hunks)
Files skipped from review as they are similar to previous changes (1)
- admin/utils/image.ts
Additional comments not posted (1)
admin/.env.example (1)
9-11: Ensure Security Best Practices for Environment VariablesThe new environment variables for AWS S3 bucket access include sensitive information like access keys. Ensure that these variables are not exposed in the client-side code and are securely managed.
Confirm that these environment variables are only used server-side and are not exposed to the client.
Summary by CodeRabbit
New Features
Improvements
Chores
reactStrictModeand removed domains configuration in next.config files for admin and website projects.