URGENT: how to update the URL parameters with new value without page refresh or reloads?

[kausik10]

I have a component defined like this:

export type FileUploadModalProps = {
    children?: ReactNode;
    folderId?: string | number | undefined;
    updateFiles: (files: string[]) => void;
};

const FileUploadModal = Component(
    ({ folderId, updateFiles }: FileUploadModalProps, env) => {
        const [selectedSubfolder, setSelectedSubfolder] =
            useState<EntityAccessor>();

        const folders: EntityListAccessor = useEntityListSubTree("folders");
        const foldersArr .........
        const folderEntity ......

        const subfolders: EntityListAccessor | undefined =
            folderEntity?.getEntityList("subfolders");

         const subfoldersArr = Array.from(subfolders);
         ........
         
        const selectedSubfolderId = selectedSubfolder
            ?.getField("id")
            .valueOnServer?.toString();

        return (
            <AlertDialog>
                <AlertDialogTrigger asChild>
                    <Button variant="outline" size="sm">
                      ......
                    </Button>
                </AlertDialogTrigger>
                <AlertDialogContent>
                   .......
                    {subfoldersArr.length > 0 ? (
                        <div className="space-y-4">
                            <Label>Vyberte podložku:</Label>

                            {subfoldersArr.map((subfolder) => {
                                const subfolderId =
                                 ...
                                const subfolderName =
                                   ...

                                const isSelected =
                                    selectedSubfolder
                                        ?.getField("id")
                                        .valueOnServer?.toString() ===
                                    subfolderId;
                                return (
                                    <>
                                        <Button
                                            key={subfolderId}
                                            variant={
                                                isSelected
                                                    ? "default"
                                                    : "outline"
                                            }
                                            onClick={() => {
                                            
                                                   setSelectedSubfolder(subfolder);
                                                   
                                                /**
                                                
                                                UPDATE THE URL parameters with this value of subfolder
                                                
                                                i.e.
                                                
                                                Currently, the URL parameters contain
                                                
                                                id=...&personId=....&folderId=...
                                                
                                                What I want ideally is
                                                
                                                        id=...&personId=....&folderId=...&subfolderId=$subfolderId
                                                
                                             **/
                                             
                                            }}
                                            
                                            size="sm"
                                            className="w-full"
                                        >
                                            {subfolderName}
                                        </Button>
                                    </>
                                );
                            })}

                            {selectedSubfolder &&
                                (selectedSubfolderId ? (
                                    <div className="mt-4">
                                        <FileRepeaterField
                                            field={`files[approvedAt=null && folder.id=$folderId && subfolder.id="${selectedSubfolderId}"]`}
                                           ...
                                            hookChildren={
                                                <FileUploadTrigger
                                                    onSuccess={updateFiles}
                                                />
                                            }
                                        />
                                    </div>
                                ) : (
                                    <div className="mt-4">
                                        <FileRepeaterField
                                            field={`files[approvedAt=null && folder.id=$folderId]`}
                                          ...
                                            hookChildren={
                                                <FileUploadTrigger
                                                    onSuccess={updateFiles}
                                                />
                                            }
                                        />
                                    </div>
                                ))}
                        </div>
                    ) : (
                        No subfolders for the given folder.
                        
                    )}
                    <AlertDialogFooter>
                        <AlertDialogCancel asChild>
                            <Button variant="outline">Zrušit</Button>
                        </AlertDialogCancel>
                    </AlertDialogFooter>
                </AlertDialogContent>
            </AlertDialog>
        );
    },
    () => {
        return (
            <>
                <EntityListSubTree
                    entities={{
                        entityName: "Folder",
                    }}
                    orderBy={"name asc"}
                    alias="folders"
                >
                    <Field field={"name"} />
                    <HasMany field={"subfolders"}>
                        <Field field={"id"} />
                        <Field field={"name"} />
                    </HasMany>
                </EntityListSubTree>
            </>
        );
    }
);

Ideally, when I select a subfolder then I want the FileRepeaterField to be displayed. However, I get a Static Render issue mentioning that I provided subfolder however there exists a parameter with (all other fields except subfolder).

What would be great is to have the flexibility to add the subfolderId to the URL with the parameter name subfolderId so that I could fetch it from the URL directly for other operations.

I see that there is env.withParameter({subfolderId: selectedSubfolderId}). However, it doesn't update the URL and I can't use the $subfolderId`.

Could you help me with the solution? Thank you!

[jonasnobile]

Hi, you probably need to use extendTree to load files from subfolder. Check the playground to see example https://github.com/contember/contember/blob/main/packages/playground/admin/app/pages/extendTreeSingle.tsx

[kausik10]

Hi, the closest I've come across is being able to select the subfolder without running into StaticRender issue. That is, if I do something like this:

        const entity = "Client(id=$id)";

        const [state, { reload }] = useEntitySubTreeLoader(
            { entity },
            useMemo(
                () => (
                    <EntitySubTree entity={entity}> // passing the SubTree here..
                        <SubfolderFileUpload
                            subfolderId={selectedSubfolderId}
                            updateFiles={updateFiles}
                        />
                    </EntitySubTree>
                ),
                [selectedSubfolderId, updateFiles]
            )
        );

However, this only selects the subfolder but doesn't display the FileUpload which I want.

I have separated the FileRepeaterField to a separate component like this:

type SubfolderFileUploadProps = {
    folderId?: string | number | undefined;
    subfolderId?: string | number | undefined;
    updateFiles: (files: string[]) => void;
};

const SubfolderFileUpload = Component(
    ({ subfolderId, updateFiles }: SubfolderFileUploadProps) => {
        const field = subfolderId
            ? `files[approvedAt=null && folder.id=$folderId && subfolder.id="${subfolderId}"]`
            : `files[approvedAt=null && folder.id=$folderId]`;
        return (
            <>
                <FileRepeaterField
                    field={field}
                    baseField="meta"
                    urlField="url"
                    fileNameField="fileName"
                    fileTypeField="fileType"
                    fileSizeField="fileSize"
                    orderBy="meta.fileName desc"
                    dropzoneText="Sem přetáhněte dokumenty k nahrání"
                    hidePreviews
                    hookChildren={<FileUploadTrigger onSuccess={updateFiles} />}
                />
            </>
        );
    }
);

I believe that when using the useState to set the subFolder it's not recognized thus I'm getting this kind of issue.

.....
      const [selectedSubfolder, setSelectedSubfolder] =
            useState<EntityAccessor>();
            
            .........
        return (
            <TreeRootIdProvider treeRootId={state.treeRootId}>
                <AlertDialog>
                    .....
                        {subfoldersArr.length > 0 ? (
                            <div className="space-y-4">
                                <Label>Vyberte podložku:</Label>

                                {subfoldersArr.map((subfolder) => {
                                  ........
                                    return (
                                        <>
                                            <Button
                                                key={subfolderId}
                                                variant={
                                                    isSelected
                                                        ? "default"
                                                        : "outline"
                                                }
                                                onClick={() => {
                                                    setSelectedSubfolder(
                                                        subfolder
                                                    );
                                                }}
                                                size="sm"
                                                className="w-full"
                                            >
                                                {subfolderName}
                                            </Button>
                                        </>
                                    );
                                })}

                                {!selectedSubfolderId ? (
                                    <div className="mt-4">
                                        <p>Upload Directly to Folder</p>
                                        <EntitySubTree entity={entity}>
                                            <SubfolderFileUpload
                                                updateFiles={updateFiles}
                                            />
                                        </EntitySubTree>
                                    </div>
                                ) : (
                                    <>
                                     
                                        <EntitySubTree entity={entity}>
                                            <SubfolderFileUpload
                                                subfolderId={
                                                    selectedSubfolderId
                                                }
                                                updateFiles={updateFiles}
                                            />
                                        </EntitySubTree>
                                    </>
                                )}
                            </div>
                        ) : (
                            <p>Tato složka nemá žádné podložky.</p>
                        )}
                     ....
            </TreeRootIdProvider>
        );
    },
    () => {
        return (
            <>
                <EntityListSubTree
                   .......
                 ...........
            </>
        );
    }
);

I have just called the FileUploadModal from the ClientDetail component as

 <FileUploadModal
                    updateFiles={updateFiles}
                    folderId={folderId}
                />

The ClientDetail is called this way

export default () => {
..........

 return (
        <Binding>
            <EntitySubTree entity="Client(id=$id)" isCreating={false}>
              <ClientDetail
                    updateFiles={updateFiles}
                    .........
                />
             </EntitySubTree>
           </Binding>

}

It's a little different from the example you provided where the LoadSingle is bounded outside a SubTree.
But I presume that it shouldn't be an issue.

Could you please assist me in resolving this issue?
Thank you