Merge pull request #125 from ente-io/first-upload-ux

dont show collection namer if not neccessary

src/components/pages/gallery/CollectionSelector.tsx

@@ -18,7 +18,7 @@ export const CollectionIcon = styled.div`
 
 export interface CollectionSelectorAttributes {
     callback: (collection) => void;
-    showNextModal: () => void;
+    showNextModal: (firstAlbum?: boolean) => void;
     title: string;
 }
 export type SetCollectionSelectorAttributes = React.Dispatch<
@@ -47,7 +47,7 @@ function CollectionSelector({
     useEffect(() => {
         if (directlyShowNextModal && attributes) {
             props.onHide();
-            attributes.showNextModal();
+            attributes.showNextModal(true);
         }
     }, [attributes]);
 

src/components/pages/gallery/Upload.tsx

@@ -23,6 +23,8 @@ import UploadManager, {
 import uploadManager from 'services/upload/uploadManager';
 import { METADATA_FOLDER_NAME } from 'services/exportService';
 
+const FIRST_ALBUM_NAME = 'my first album';
+
 interface Props {
     syncWithRemote: (force?: boolean, silent?: boolean) => Promise<void>;
     setBannerMessage;
@@ -93,7 +95,7 @@ export default function Upload(props: Props) {
         ) {
             props.setLoading(true);
 
-            let fileAnalysisResult;
+            let fileAnalysisResult: AnalysisResult;
             if (props.acceptedFiles?.length > 0) {
                 // File selection by drag and drop or selection of file.
                 fileAnalysisResult = analyseUploadFiles();
@@ -106,7 +108,7 @@ export default function Upload(props: Props) {
             props.setCollectionSelectorAttributes({
                 callback: uploadFilesToExistingCollection,
                 showNextModal: nextModal.bind(null, fileAnalysisResult),
-                title: 'upload to collection',
+                title: constants.UPLOAD_TO_COLLECTION,
             });
             props.setLoading(false);
         }
@@ -120,25 +122,38 @@ export default function Upload(props: Props) {
         setPercentComplete(0);
         setProgressView(true);
     };
-    const showCreateCollectionModal = (fileAnalysisResult?: AnalysisResult) => {
-        props.setCollectionNamerAttributes({
-            title: constants.CREATE_COLLECTION,
-            buttonText: constants.CREATE,
-            autoFilledName: fileAnalysisResult?.suggestedCollectionName,
-            callback: async (collectionName) => {
-                props.closeCollectionSelector();
-                await uploadFilesToNewCollections(
-                    UPLOAD_STRATEGY.SINGLE_COLLECTION,
-                    collectionName
-                );
-            },
-        });
+    const showCreateCollectionModal = (
+        fileAnalysisResult: AnalysisResult,
+        isFirstAlbum?: boolean
+    ) => {
+        const uploadToNewCollection = async (collectionName: string) => {
+            props.closeCollectionSelector();
+            await uploadFilesToNewCollections(
+                UPLOAD_STRATEGY.SINGLE_COLLECTION,
+                collectionName
+            );
+        };
+        if (fileAnalysisResult.suggestedCollectionName) {
+            uploadToNewCollection(fileAnalysisResult.suggestedCollectionName);
+        } else if (isFirstAlbum) {
+            uploadToNewCollection(FIRST_ALBUM_NAME);
+        } else {
+            props.setCollectionNamerAttributes({
+                title: constants.CREATE_COLLECTION,
+                buttonText: constants.CREATE,
+                autoFilledName: fileAnalysisResult?.suggestedCollectionName,
+                callback: uploadToNewCollection,
+            });
+        }
     };
 
-    const nextModal = (fileAnalysisResult: AnalysisResult) => {
+    const nextModal = (
+        fileAnalysisResult: AnalysisResult,
+        isFirstAlbum: boolean
+    ) => {
         fileAnalysisResult?.multipleFolders
             ? setChoiceModalView(true)
-            : showCreateCollectionModal(fileAnalysisResult);
+            : showCreateCollectionModal(fileAnalysisResult, isFirstAlbum);
     };
 
     function analyseUploadFiles(): AnalysisResult {

src/utils/strings/englishConstants.tsx

@@ -518,6 +518,7 @@ const englishConstants = {
     INPROGRESS_UPLOADS: 'uploads in progress',
     FILE_TOO_LARGE:
         'the file you are trying to upload is larger than the storage available, please upgrade your plan and try again',
+    UPLOAD_TO_COLLECTION: 'upload to collection',
 };
 
 export default englishConstants;