add my datasets tab (#965)

* adding new tab for my datasets, does not work yet

* new tab

* pagination should be fixed for my datasets tab

* admin mode should still just return 'mine'

* using just listDatasets.
need to remove unnecessary 'myDatasets'

* removing mydatasets

* removing mydatasets

* adding state and actions for my datasets

* changing tab back to 'datasets' from 'my datasets' needs to change the value of 'mine' and list datasets

* just need an else

* previous is no longer selectable when moving to my datasets. we start on the first page

* switch to first page when switch to 'datasets'

* run precommit

* combine useEffect logic

---------

Co-authored-by: Chen Wang <[email protected]>

Author: tcnichol

backend/app/routers/datasets.py

@@ -219,7 +219,7 @@ async def get_datasets(
     admin=Depends(get_admin),
     admin_mode: bool = Depends(get_admin_mode),
 ):
-    if admin and admin_mode:
+    if admin and admin_mode and not mine:
         datasets_and_count = await DatasetDBViewList.aggregate(
             [_get_page_query(skip, limit, sort_field="created", ascending=False)],
         ).to_list()

frontend/src/actions/dataset.js

@@ -261,6 +261,25 @@ export function fetchDatasets(skip = 0, limit = 21, mine = false) {
 	};
 }
 
+export const RECEIVE_MY_DATASETS = "RECEIVE_MY_DATASETS";
+
+export function fetchMyDatasets(skip = 0, limit = 21, mine = true) {
+	return (dispatch) => {
+		// TODO: Parameters for dates? paging?
+		return V2.DatasetsService.getDatasetsApiV2DatasetsGet(skip, limit, mine)
+			.then((json) => {
+				dispatch({
+					type: RECEIVE_MY_DATASETS,
+					datasets: json,
+					receivedAt: Date.now(),
+				});
+			})
+			.catch((reason) => {
+				dispatch(handleErrors(reason, fetchMyDatasets(skip, limit, mine)));
+			});
+	};
+}
+
 export const CREATE_DATASET = "CREATE_DATASET";
 
 export function datasetCreated(formData, licenseId, licenseFormData) {

frontend/src/components/Explore.tsx

@@ -43,20 +43,30 @@ export const Explore = (): JSX.Element => {
 	const [currPageNum, setCurrPageNum] = useState<number>(1);
 	const [limit] = useState<number>(config.defaultDatasetPerPage);
 	// TODO add switch to turn on and off "mine" dataset
-	const [mine] = useState<boolean>(false);
+	const [mine, setMine] = useState<boolean>(false);
 	const [selectedTabIndex, setSelectedTabIndex] = useState(0);
 	const [errorOpen, setErrorOpen] = useState(false);
 
 	// Admin mode will fetch all datasets
 	useEffect(() => {
-		listDatasets((currPageNum - 1) * limit, limit, mine);
-	}, [adminMode, deletedDataset]);
+		if (adminMode) listDatasets(0, limit, true);
+		else listDatasets((currPageNum - 1) * limit, limit, mine);
+	}, [adminMode, deletedDataset, mine, currPageNum, limit]);
 
 	// switch tabs
 	const handleTabChange = (
 		_event: React.ChangeEvent<{}>,
 		newTabIndex: number
 	) => {
+		if (newTabIndex === 1) {
+			setMine(true);
+			setCurrPageNum(1);
+			listDatasets(0, limit, true);
+		} else {
+			setMine(false);
+			setCurrPageNum(1);
+			listDatasets(0, limit, false);
+		}
 		setSelectedTabIndex(newTabIndex);
 	};
 
@@ -80,6 +90,7 @@ export const Explore = (): JSX.Element => {
 							aria-label="dashboard tabs"
 						>
 							<Tab sx={tab} label="Datasets" {...a11yProps(0)} />
+							<Tab sx={tab} label="My Datasets" {...a11yProps(1)} />
 						</Tabs>
 					</Box>
 					<TabPanel value={selectedTabIndex} index={0}>
@@ -137,6 +148,61 @@ export const Explore = (): JSX.Element => {
 							<></>
 						)}
 					</TabPanel>
+					<TabPanel value={selectedTabIndex} index={1}>
+						<Grid container spacing={2}>
+							{datasets !== undefined ? (
+								datasets.map((dataset: DatasetOut) => {
+									return (
+										<Grid item key={dataset.id} xs={12} sm={6} md={4} lg={3}>
+											<DatasetCard
+												id={dataset.id}
+												name={dataset.name}
+												author={`${dataset.creator.first_name} ${dataset.creator.last_name}`}
+												created={dataset.created}
+												description={dataset.description}
+												thumbnailId={dataset.thumbnail_id}
+											/>
+										</Grid>
+									);
+								})
+							) : (
+								<></>
+							)}
+							{datasets.length === 0 ? (
+								<Grid container justifyContent="center">
+									<Box textAlign="center">
+										<p>
+											Nobody has created any datasets on this instance. Click
+											below to create a dataset!
+										</p>
+										<Button
+											component={RouterLink}
+											to="/create-dataset"
+											variant="contained"
+											sx={{ m: 2 }}
+										>
+											Create Dataset
+										</Button>
+									</Box>
+								</Grid>
+							) : (
+								<></>
+							)}
+						</Grid>
+						{datasets.length !== 0 ? (
+							<Box display="flex" justifyContent="center" sx={{ m: 1 }}>
+								<Pagination
+									count={Math.ceil(pageMetadata.total_count / limit)}
+									page={currPageNum}
+									onChange={handlePageChange}
+									shape="rounded"
+									variant="outlined"
+								/>
+							</Box>
+						) : (
+							<></>
+						)}
+					</TabPanel>
 					<TabPanel value={selectedTabIndex} index={4} />
 					<TabPanel value={selectedTabIndex} index={2} />
 					<TabPanel value={selectedTabIndex} index={3} />

frontend/src/reducers/dataset.ts

@@ -8,6 +8,7 @@ import {
 	RECEIVE_DATASET_ROLES,
 	RECEIVE_DATASETS,
 	RECEIVE_FOLDERS_FILES_IN_DATASET,
+	RECEIVE_MY_DATASETS,
 	REMOVE_DATASET_GROUP_ROLE,
 	REMOVE_DATASET_USER_ROLE,
 	RESET_CREATE_DATASET,
@@ -51,6 +52,7 @@ const defaultState: DatasetState = {
 	about: <Dataset>{ creator: <UserOut>{} },
 	datasetRole: <AuthorizationBase>{},
 	datasets: <Paged>{ metadata: <PageMetadata>{}, data: <Dataset[]>[] },
+	myDatasets: <Paged>{ metadata: <PageMetadata>{}, data: <Dataset[]>[] },
 	newDataset: <Dataset>{},
 	newFile: <FileOut>{},
 	newFiles: <FileOut[]>[],
@@ -112,6 +114,8 @@ const dataset = (state = defaultState, action: DataAction) => {
 			return Object.assign({}, state, { about: action.about });
 		case RECEIVE_DATASETS:
 			return Object.assign({}, state, { datasets: action.datasets });
+		case RECEIVE_MY_DATASETS:
+			return Object.assign({}, state, { myDatasets: action.myDatasets });
 		case CREATE_DATASET:
 			return Object.assign({}, state, { newDataset: action.dataset });
 		case RESET_CREATE_DATASET:

frontend/src/types/action.ts

@@ -88,6 +88,11 @@ interface RECEIVE_DATASETS {
 	datasets: Paged;
 }
 
+interface RECEIVE_MY_DATASETS {
+	type: "RECEIVE_MY_DATASETS";
+	myDatasets: Paged;
+}
+
 interface RECEIVE_PUBLIC_DATASETS {
 	type: "RECEIVE_PUBLIC_DATASETS";
 	publicDatasets: Dataset[];
@@ -661,6 +666,7 @@ export type DataAction =
 	| RECEIVE_DATASET_ABOUT
 	| RECEIVE_DATASET_ROLE
 	| RECEIVE_DATASETS
+	| RECEIVE_MY_DATASETS
 	| RECEIVE_PUBLIC_DATASETS
 	| RECEIVE_PUBLIC_DATASET_ABOUT
 	| RECEIVE_FILES_IN_PUBLIC_DATASET

frontend/src/types/data.ts

@@ -123,6 +123,7 @@ export interface DatasetState {
 	files: Paged;
 	folders: Paged;
 	datasets: Paged;
+	myDatasets: Paged;
 	deletedDataset: DatasetOut;
 	deletedFolder: FolderOut;
 	deletedFile: FileOut;