Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[WIP] Moves upload component to mobX #1732

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

[WIP] Moves upload component to mobX #1732

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,8 @@
"js-yaml": "^3.13.1",
"lodash-es": "^4.17.21",
"luxon": "^3.3.0",
"mobx": "^6.13.5",
alfonsomthd marked this conversation as resolved.
Show resolved Hide resolved
"mobx-react-lite": "^4.0.7",
"murmurhash-js": "^1.0.0",
"react": "^17.0.1",
"react-copy-to-clipboard": "5.x",
Expand Down
150 changes: 76 additions & 74 deletions packages/odf/components/s3-browser/objects-list/ObjectListWithSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,94 +2,96 @@ import * as React from 'react';
import { ObjectDetailsSidebar } from '@odf/core/components/s3-browser/object-details/ObjectDetailsSidebar';
import { ObjectCrFormat } from '@odf/core/types';
import { LoadingBox } from '@odf/shared/generic/status-box';
// eslint-disable-next-line import/no-extraneous-dependencies
import { configure } from 'mobx';
// eslint-disable-next-line import/no-extraneous-dependencies
import { observer } from 'mobx-react-lite';
import { useParams } from 'react-router-dom-v5-compat';
import { IAction } from '@patternfly/react-table';
import { NoobaaS3Context } from '../noobaa-context';
import UploadSidebar from '../upload-objects';
import { UploadProgress } from '../upload-objects';
import { FileUploadComponent } from '../upload-objects';
import { uploadStore } from '../upload-objects/store';
import { ObjectsList } from './ObjectsList';

type ObjectListWithSidebarProps = {
obj: { refresh: boolean; triggerRefresh: () => void };
};

export const ObjectListWithSidebar: React.FC<ObjectListWithSidebarProps> = ({
obj: { refresh, triggerRefresh },
}) => {
const [isUploadSidebarExpanded, setUploadSidebarExpanded] =
React.useState(false);
const [isObjectSidebarExpanded, setObjectSidebarExpanded] =
React.useState(false);
const [object, setObject] = React.useState<ObjectCrFormat>(null);
const [objectActions, setObjectActions] =
React.useState<React.MutableRefObject<IAction[]>>();
const [uploadProgress, setUploadProgress] = React.useState<UploadProgress>(
{}
);
const [completionTime, setCompletionTime] = React.useState<number>();
configure({
enforceActions: 'always',
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is also eslint-plugin-mobx that we can add to ensure healthy code.

computedRequiresReaction: true,
reactionRequiresObservable: true,
observableRequiresReaction: true,
disableErrorBoundaries: true,
});
Comment on lines +21 to +27
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we move it to store.ts ?


const abortAll = React.useCallback(() => {
Object.values(uploadProgress).forEach((upload) => upload?.abort?.());
}, [uploadProgress]);
export const ObjectListWithSidebar: React.FC<ObjectListWithSidebarProps> =
observer(({ obj: { refresh, triggerRefresh } }) => {
Copy link
Contributor

@GowthamShanmugam GowthamShanmugam Nov 27, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need an observer here, i am assuming obj has only two props refresh and triggerRefresh and both are used here and refresh is nothing but boolean only. so what exactly it is going to optimize?

const [isUploadSidebarExpanded, setUploadSidebarExpanded] =
React.useState(false);
const [isObjectSidebarExpanded, setObjectSidebarExpanded] =
React.useState(false);
const [object, setObject] = React.useState<ObjectCrFormat>(null);
const [objectActions, setObjectActions] =
React.useState<React.MutableRefObject<IAction[]>>();
const [completionTime, setCompletionTime] = React.useState<number>();

const { bucketName } = useParams();
const { bucketName } = useParams();

const { noobaaS3 } = React.useContext(NoobaaS3Context);
const { noobaaS3 } = React.useContext(NoobaaS3Context);

const closeObjectSidebar = () => setObjectSidebarExpanded(false);
const closeUploadSidebar = () => setUploadSidebarExpanded(false);
const showUploadSidebar = () => {
closeObjectSidebar();
setUploadSidebarExpanded(true);
};
const onRowClick = (
selectedObject: ObjectCrFormat,
actionItems: React.MutableRefObject<IAction[]>
) => {
if (selectedObject.isFolder) return;
closeUploadSidebar();
setObject(selectedObject);
setObjectActions(actionItems);
setObjectSidebarExpanded(true);
};
const closeObjectSidebar = () => setObjectSidebarExpanded(false);
const closeUploadSidebar = () => setUploadSidebarExpanded(false);
const showUploadSidebar = () => {
closeObjectSidebar();
setUploadSidebarExpanded(true);
};
const onRowClick = (
selectedObject: ObjectCrFormat,
actionItems: React.MutableRefObject<IAction[]>
) => {
if (selectedObject.isFolder) return;
closeUploadSidebar();
setObject(selectedObject);
setObjectActions(actionItems);
setObjectSidebarExpanded(true);
};

return (
<UploadSidebar
isExpanded={isUploadSidebarExpanded}
closeSidebar={closeUploadSidebar}
uploadProgress={uploadProgress}
completionTime={completionTime}
mainContent={
<>
<FileUploadComponent
client={noobaaS3}
bucketName={bucketName}
uploadProgress={uploadProgress}
setUploadProgress={setUploadProgress}
showSidebar={showUploadSidebar}
abortAll={abortAll}
setCompletionTime={setCompletionTime}
triggerRefresh={triggerRefresh}
/>
{refresh ? (
<ObjectDetailsSidebar
closeSidebar={closeObjectSidebar}
isExpanded={isObjectSidebarExpanded}
object={object}
objectActions={objectActions}
wrappedContent={
<ObjectsList
onRowClick={onRowClick}
closeObjectSidebar={closeObjectSidebar}
/>
}
return (
<UploadSidebar
isExpanded={isUploadSidebarExpanded}
closeSidebar={closeUploadSidebar}
completionTime={completionTime}
uploadStore={uploadStore}
mainContent={
<>
<FileUploadComponent
client={noobaaS3}
bucketName={bucketName}
showSidebar={showUploadSidebar}
setCompletionTime={setCompletionTime}
triggerRefresh={triggerRefresh}
uploadStore={uploadStore}
/>
) : (
<LoadingBox />
)}
</>
}
/>
);
};
{refresh ? (
<ObjectDetailsSidebar
closeSidebar={closeObjectSidebar}
isExpanded={isObjectSidebarExpanded}
object={object}
objectActions={objectActions}
wrappedContent={
<ObjectsList
onRowClick={onRowClick}
closeObjectSidebar={closeObjectSidebar}
/>
}
/>
) : (
<LoadingBox />
)}
</>
}
/>
);
});
Loading