Group Chat custom avatar not saved when navigating back to invite members page

[marcaaron]

Coming from https://github.com/Expensify/App/pull/39757#issuecomment-2052659550

1. Create a new group chat
2. Choose a picture for custom avatar
3. Go back to member invite page
4. Proceed again
5. Create chat

Expected:

Avatar image should be saved.

Actual

Picture is not taken into consideration.

[marcaaron]

I am guessing this is because the file ref needs to be cached outside the component lifecycle or some other strategy to achieve it. Feels like a minor issue that can be easily solved.

[s77rt]

No progress yet. Focused on QBO

[marcaaron]

Gonna take this one External so we can make some progress.

[melvin-bot[bot]]

Triggered auto assignment to @adelekennedy (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot[bot]]

Job added to Upwork: https://www.upwork.com/jobs/~014f246ab8eb2607ee

[melvin-bot[bot]]

Current assignee @s77rt is eligible for the External assigner, not assigning anyone new.

[neonbhai]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Group Chat custom avatar not saved when navigating back to invite members page

What is the root cause of that problem?

When creating the group, we use the outdated fileRef.current which is undefined when coming back.

https://github.com/Expensify/App/blob/406139cf2120b25c28643f1e728d531fd8848a60/src/pages/NewChatConfirmPage.tsx#L96

What changes do you think we should make in order to solve the problem?

We should use stashedLocalAvatarImage which takes the saved picture from the NEW_GROUP_CHAT_DRAFT Onyx key when creating the groupChat

https://github.com/Expensify/App/blob/406139cf2120b25c28643f1e728d531fd8848a60/src/pages/NewChatConfirmPage.tsx#L107

[s77rt]

@neonbhai Thanks for the proposal. Your RCA makes sense but the solution won't work. In onyx we only store the url and we want to pass the whole image.

[s77rt]

Still looking for proposals

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[adelekennedy]

still waiting for proposals - @marcaaron @s77rt is this a more complex issue than originally thought?

[s77rt]

@adelekennedy I didn't check in depth but it shouldn't be that hard, no need to adjust the bounty yet

[marcaaron]

Agree, I think we just haven't found the obvious solution yet - but let's see.

[melvin-bot[bot]]

@s77rt @marcaaron @adelekennedy this issue is now 4 weeks old, please consider:

• Finding a contributor to fix the bug
• Closing the issue if BZ has been unable to add the issue to a VIP or Wave project
• If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!

[adelekennedy]

still waiting

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[adelekennedy]

gonna just keep waiting on this as it's pretty edge-casey. Going to move this to weekly so we don't keep getting dinged

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[s77rt]

Still looking for proposals...

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[adelekennedy]

still pending proposals @neonbhai can you update your proposal with @s77rt feedback?

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[wildan-m]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Group Chat custom avatar not saved when navigating back to invite members page

What is the root cause of that problem?

The screen remounts every time we navigate, causing the fileRef to be re-initialized upon returning.

What changes do you think we should make in order to solve the problem?

We can follow receipt flow to keep the avatar image persist by re-reading stored uri.

In src/pages/NewChatConfirmPage.tsx change fileRef to state, add avatarFile as createGroup dependency and add useEffect to re-read the stored file when re-mounts.

   const [avatarFile, setAvatarFile] = useState<File | CustomRNImageManipulatorResult | undefined>();    
 ..............

   useEffect(() => {
        if (!stashedLocalAvatarImage) {
            return;
        }

        const onSuccess = (file: File) => {
            setAvatarFile(file)
        };


        const onFailure = () => {
            setAvatarFile(undefined);
            Report.setGroupDraft({avatarUri: null, avatarFileName: null, avatarFileType: null});
        };
        FileUtils.readFileAsync(stashedLocalAvatarImage.toString(), newGroupDraft?.avatarFileName ?? '', onSuccess, onFailure, newGroupDraft?.avatarFileType ?? '');

    }, []);

Branch to test

What alternative solutions did you explore? (Optional)

We can move fileRef to a context to make it persist while navigate.

Create src/hooks/useFileRef.tsx

useFileRef.tsx

import React, { createContext, useContext, useRef, ReactNode } from 'react';
import type {CustomRNImageManipulatorResult} from '@libs/cropOrRotateImage/types';

// Define the type for the context
type FileRefContextType = React.MutableRefObject<File | CustomRNImageManipulatorResult | undefined> | null;

// Create the context
const FileRefContext = createContext<FileRefContextType>(null);

// Custom hook to access the context
const useFileRef = (): FileRefContextType => useContext(FileRefContext);

// Define the type for the provider props
type FileRefProviderProps = {
    children: ReactNode;
};

// Provider component to manage the fileRef value
const FileRefProvider = ({ children }: FileRefProviderProps) => {
    const fileRef = useRef<File | CustomRNImageManipulatorResult | undefined>(null);

    return (
        <FileRefContext.Provider value={fileRef}>
            {children}
        </FileRefContext.Provider>
    );
};

export { FileRefProvider, useFileRef }

Wrap RHP stack navigator with FileRefProvider

            <View style={styles.RHPNavigatorContainer(isSmallScreenWidth)}>
                <FileRefProvider>
                    <Stack.Navigator
 .....

fileRef in NewChatConfirmPage will use useFileRef

function NewChatConfirmPage({newGroupDraft, allPersonalDetails}: NewChatConfirmPageProps) {
    const optimisticReportID = useRef<string>(ReportUtils.generateReportID());
    const fileRef = useFileRef();

Clean up

    const createGroup = useCallback(() => {
        if (!newGroupDraft) {
            return;
        }

        const logins: string[] = (newGroupDraft.participants ?? []).map((participant) => participant.login);
        Report.navigateToAndOpenReport(logins, true, newGroupDraft.reportName ?? '', newGroupDraft.avatarUri ?? '', fileRef &&fileRef.current, optimisticReportID.current, true);
        if (fileRef) {
            fileRef.current = undefined;
        }

Branch to test.

[s77rt]

@wildan-m Thanks for the proposal. Your RCA makes sense but the solution is over-engineered. We already have this flow working well with receipts. Let's follow the same approach.

[wildan-m]

@s77rt receipt has different case, perform back navigation from image preview will force the user to re-upload the scanned receipt, but group chat will expect we re-visit the image preview page without re-uploading the image.

[s77rt]

@wildan-m If you start the money request process from the FAB you can go back to the participants page

[wildan-m]

@s77rt thanks for the hints. I've updated my propsal.

Change log: Move prev solution to alternative, add new main solution that mimic receipt upload behavior.

[s77rt]

@wildan-m Thanks for looking into this. The solution looks good to me 👍.

🎀 👀 🎀 C+ reviewed Link to proposal

[melvin-bot[bot]]

Triggered auto assignment to @MonilBhavsar, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[wildan-m]

@MonilBhavsar, do we need to consider anything else before we proceed?