Function WorkspacesPage

site/src/pages/WorkspacesPage/WorkspacesPage.tsx:57–258

()

type BatchAction = "delete" | "update";

const WorkspacesPage: FC = () => {
	const queryClient = useQueryClient();
	// We have to be careful with how we use useSearchParams or any other
	// derived hooks. The URL is global state, but each call to useSearchParams
	// creates a different, contradictory source of truth for what the URL
	// should look like. We need to make sure that we only mount the hook once
	// per page
	const [searchParams, setSearchParams] = useSafeSearchParams();
	// Always need to make sure that we reset the checked workspaces each time
	// the filtering or pagination changes, as that will almost always change
	// which workspaces are shown on screen and which can be interacted with
	const [checkedWorkspaceIds, setCheckedWorkspaceIds] = useState(
		new Set<string>(),
	);
	const resetChecked = () => {
		if (checkedWorkspaceIds.size !== 0) {
			setCheckedWorkspaceIds(new Set());
		}
	};

	const pagination = usePagination({
		searchParams,
		onSearchParamsChange: (newParams) => {
			setSearchParams(newParams);
			resetChecked();
		},
	});
	const { permissions, user: me } = useAuthenticated();
	const templatesQuery = useQuery(templates());
	const workspacePermissionsQuery = useQuery(
		workspacePermissionsByOrganization(
			templatesQuery.data?.map((template) => template.organization_id),
			me.id,
		),
	);

	// Filter templates based on workspace creation permission
	const filteredTemplates = useMemo(() => {
		if (!templatesQuery.data || !workspacePermissionsQuery.data) {
			return templatesQuery.data;
		}

		return templatesQuery.data.filter((template) => {
			const workspacePermission =
				workspacePermissionsQuery.data[template.organization_id];
			return workspacePermission?.createWorkspaceForUserID;
		});
	}, [templatesQuery.data, workspacePermissionsQuery.data]);

	const filterState = useWorkspacesFilter({
		searchParams,
		onSearchParamsChange: setSearchParams,
		onFilterChange: () => {
			pagination.goToPage(1);
			resetChecked();
		},
	});