- Notifications
You must be signed in to change notification settings - Fork929
feat: Workspaces Page Query Filter#1936
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.
By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.
Already on GitHub?Sign in to your account
Uh oh!
There was an error while loading.Please reload this page.
Changes from1 commit
File filter
Filter by extension
Conversations
Uh oh!
There was an error while loading.Please reload this page.
Jump to
Uh oh!
There was an error while loading.Please reload this page.
Diff view
Diff view
- Loading branch information
Uh oh!
There was an error while loading.Please reload this page.
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,16 +1,23 @@ | ||
import { useMachine, useActor} from "@xstate/react" | ||
import React, { useContext } from "react" | ||
import { workspacesMachine } from "../../xServices/workspaces/workspacesXService" | ||
import { WorkspacesPageView } from "./WorkspacesPageView" | ||
import { XServiceContext } from "../../xServices/StateContext" | ||
const WorkspacesPage: React.FC = () => { | ||
const xServices = useContext(XServiceContext) | ||
const [authState] = useActor(xServices.authXService) | ||
const { me } = authState.context | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others.Learn more. When you only need one thing out of an xservice, it's better to | ||
const [workspacesState] = useMachine(workspacesMachine) | ||
return ( | ||
<> | ||
<WorkspacesPageView | ||
loading={workspacesState.hasTag("loading")} | ||
workspaces={workspacesState.context.workspaces} | ||
me={me} | ||
error={workspacesState.context.getWorkspacesError} | ||
/> | ||
</> | ||
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -30,46 +30,58 @@ export const Language = { | ||
export interface WorkspacesPageViewProps { | ||
loading?: boolean | ||
workspaces?: TypesGen.Workspace[] | ||
me?: TypesGen.User | ||
error?: unknown | ||
} | ||
export const WorkspacesPageView: React.FC<WorkspacesPageViewProps> = (props) => { | ||
const styles = useStyles() | ||
const theme: Theme = useTheme() | ||
const [filteredWorkspaces, setFilteredWorkspaces] = useState<TypesGen.Workspace[] | undefined>(props.workspaces) | ||
const [query, setQuery] = useState<string>("owner:me") | ||
const updateQuery = (e: React.ChangeEvent<HTMLInputElement>) => { | ||
const input = e.target.value | ||
setQuery(input) | ||
if (input.length && props.workspaces?.length) { | ||
const owners: string[] = [] | ||
const newWorkspaces: TypesGen.Workspace[] = [] | ||
const phrases = input.split(" ") | ||
for (const p of phrases) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others.Learn more. We usually use things like | ||
if (p.startsWith("owner:")) { | ||
let v = p.slice("owner:".length) | ||
if (v === "me" && props.me) { | ||
v = props.me.username | ||
} | ||
owners.push(v) | ||
} | ||
} | ||
for (const w of props.workspaces) { | ||
for (const o of owners) { | ||
if (o === w.owner_name) { | ||
newWorkspaces.push(w) | ||
} | ||
} | ||
} | ||
setFilteredWorkspaces(newWorkspaces) | ||
} | ||
} | ||
const handleQueryChange = useCallback(updateQuery, [props.workspaces, props.me]) | ||
return ( | ||
<Stack spacing={4}> | ||
<Margins> | ||
<div className={styles.actions}> | ||
<form> | ||
<TextField | ||
onChange={handleQueryChange} | ||
value={query} | ||
fullWidth | ||
label="Filter" | ||
variant="outlined" | ||
/> | ||
</form> | ||
<Link underline="none" component={RouterLink} to="/workspaces/new"> | ||
<Button startIcon={<AddCircleOutline />}>{Language.createButton}</Button> | ||
</Link> | ||