-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
12 changed files
with
230 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,142 @@ | ||
| import type { MetaFunction } from "@remix-run/node"; | ||
| import { useLoaderData, useRevalidator } from "@remix-run/react"; | ||
| import { | ||
| BreadCrumbs, | ||
| Button, | ||
| CyberstormLink, | ||
| Dialog, | ||
| PageHeader, | ||
| SettingItem, | ||
| Table, | ||
| } from "@thunderstore/cyberstorm"; | ||
| import { faPlus } from "@fortawesome/pro-solid-svg-icons"; | ||
| import styles from "./TeamsLayout.module.css"; | ||
| import rootStyles from "../../RootLayout.module.css"; | ||
| import { getDapper } from "cyberstorm/dapper/sessionUtils"; | ||
| import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; | ||
| import { useEffect, useState } from "react"; | ||
| import { CreateTeamForm } from "@thunderstore/cyberstorm-forms"; | ||
| import { currentUserSchema } from "@thunderstore/dapper-ts"; | ||
|
|
||
| export const meta: MetaFunction<typeof loader | typeof clientLoader> = ({ | ||
| data, | ||
| }) => { | ||
| return [ | ||
| { title: `Teams of ${data?.currentUser.username}` }, | ||
| { name: "description", content: `Teams of ${data?.currentUser.username}` }, | ||
| ]; | ||
| }; | ||
|
|
||
| export async function loader() { | ||
| const dapper = await getDapper(); | ||
| const currentUser = await dapper.getCurrentUser(); | ||
| return { | ||
| currentUser: currentUser as typeof currentUserSchema._type, | ||
| }; | ||
| } | ||
|
|
||
| export async function clientLoader() { | ||
| const dapper = await getDapper(true); | ||
| const currentUser = await dapper.getCurrentUser(); | ||
| if (!currentUser.username) { | ||
| throw new Response("Not logged in.", { status: 401 }); | ||
| } else { | ||
| return { | ||
| currentUser: currentUser as typeof currentUserSchema._type, | ||
| }; | ||
| } | ||
| } | ||
|
|
||
| clientLoader.hydrate = true; | ||
|
|
||
| // REMIX TODO: The "Create team" form is missing data refetching after creating a team | ||
| // Copy the stuff from package liking | ||
| export default function Teams() { | ||
| const { currentUser } = useLoaderData<typeof loader | typeof clientLoader>(); | ||
| const [dialogOpen, setOpenDialog] = useState(false); | ||
| const revalidator = useRevalidator(); | ||
| const [isRefetching, setIsRefetching] = useState(false); | ||
|
|
||
| useEffect(() => { | ||
| setIsRefetching(false); | ||
| }, [currentUser]); | ||
|
|
||
| // REMIX TODO: Move current user to stand-alone loader and revalidate only currentUser | ||
| async function createTeamRevalidate() { | ||
| if (!isRefetching) { | ||
| setIsRefetching(true); | ||
| revalidator.revalidate(); | ||
| } | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <BreadCrumbs> | ||
| <CyberstormLink linkId="Teams">Teams</CyberstormLink> | ||
| </BreadCrumbs> | ||
| <header className={rootStyles.pageHeader}> | ||
| <PageHeader title="Teams" /> | ||
| </header> | ||
| <main className={rootStyles.main}> | ||
| <SettingItem | ||
| title="Teams" | ||
| description="Manage your teams" | ||
| additionalLeftColumnContent={ | ||
| <Dialog.Root | ||
| open={dialogOpen} | ||
| onOpenChange={setOpenDialog} | ||
| title="Create Team" | ||
| trigger={ | ||
| <Button.Root colorScheme="primary" paddingSize="large"> | ||
| <Button.ButtonLabel>Create team</Button.ButtonLabel> | ||
| <Button.ButtonIcon> | ||
| <FontAwesomeIcon icon={faPlus} /> | ||
| </Button.ButtonIcon> | ||
| </Button.Root> | ||
| } | ||
| > | ||
| <CreateTeamForm | ||
| dialogOnChange={setOpenDialog} | ||
| updateTrigger={createTeamRevalidate} | ||
| /> | ||
| </Dialog.Root> | ||
| } | ||
| content={ | ||
| <div className={styles.contentWrapper}> | ||
| <Table | ||
| headers={[ | ||
| { value: "Team Name", disableSort: false }, | ||
| { value: "Role", disableSort: false }, | ||
| { value: "Members", disableSort: false }, | ||
| ]} | ||
| rows={currentUser.teams.map((team) => [ | ||
| { | ||
| value: ( | ||
| <CyberstormLink | ||
| linkId="TeamSettings" | ||
| key={team.name} | ||
| team={team.name} | ||
| > | ||
| <span className={styles.nameColumn}>{team.name}</span> | ||
| </CyberstormLink> | ||
| ), | ||
| sortValue: team.name, | ||
| }, | ||
| { | ||
| value: team.role, | ||
| sortValue: team.role, | ||
| }, | ||
| { | ||
| value: team.member_count, | ||
| sortValue: team.member_count, | ||
| }, | ||
| ])} | ||
| variant="itemList" | ||
| /> | ||
| </div> | ||
| } | ||
| /> | ||
| </main> | ||
| </> | ||
| ); | ||
| } |
18 changes: 18 additions & 0 deletions
18
apps/cyberstorm-remix/app/settings/teams/TeamsLayout.module.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| .contentWrapper { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: var(--gap--16); | ||
| } | ||
|
|
||
| .boldText { | ||
| font-weight: var(--font-weight-bold); | ||
| } | ||
|
|
||
| /* TODO: Text in header row and content rows are not aligned */ | ||
|
|
||
| /* TODO: why do we have this hover color, and should it apply to hover | ||
| on the whole row, not just one column? | ||
| */ | ||
| .nameColumn:hover { | ||
| color: rgb(57 233 170); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters