refactor: Team component folder structure (#3492)

theopensystemslab · Aug 5, 2024 · 6c02928 · 6c02928
1 parent 862b33e
commit 6c02928
Show file tree

Hide file tree

Showing 5 changed files with 117 additions and 109 deletions.
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Team/MembersTable.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Team/MembersTable.tsx
@@ -0,0 +1,86 @@
+import Chip from "@mui/material/Chip";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import React from "react";
+
+import { StyledAvatar, StyledTableRow } from "./styles";
+import { TeamMember } from "./types";
+
+export const MembersTable: React.FC<{ members: TeamMember[] }> = ({
+  members,
+}) => {
+  const roleLabels: Record<string, string> = {
+    platformAdmin: "Admin",
+    teamEditor: "Editor",
+    teamViewer: "Viewer",
+  };
+
+  const getRoleLabel = (role: string) => {
+    return roleLabels[role] || role;
+  };
+
+  if (members.length === 0) {
+    return (
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell>
+              <strong>No members found</strong>
+            </TableCell>
+          </TableRow>
+        </TableHead>
+      </Table>
+    );
+  }
+
+  return (
+    <TableContainer>
+      <Table>
+        <TableHead>
+          <StyledTableRow>
+            <TableCell sx={{ width: 300 }}>
+              <strong>User</strong>
+            </TableCell>
+            <TableCell sx={{ width: 200 }}>
+              <strong>Role</strong>
+            </TableCell>
+            <TableCell>
+              <strong>Email</strong>
+            </TableCell>
+          </StyledTableRow>
+        </TableHead>
+        <TableBody>
+          {members.map((member) => (
+            <StyledTableRow key={member.id}>
+              <TableCell
+                sx={{
+                  display: "flex",
+                  flexDirection: "row",
+                  alignItems: "center",
+                }}
+              >
+                <StyledAvatar>
+                  {member.firstName[0]}
+                  {member.lastName[0]}
+                </StyledAvatar>
+                {member.firstName} {member.lastName}
+              </TableCell>
+              <TableCell>
+                <Chip
+                  label={getRoleLabel(member.role)}
+                  size="small"
+                  sx={{ background: "#ddd" }}
+                />
+              </TableCell>
+              <TableCell>{member.email}</TableCell>
+            </StyledTableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Team/TeamMembers.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Team/TeamMembers.tsx
@@ -1,113 +1,10 @@
-import Avatar from "@mui/material/Avatar";
-import Chip from "@mui/material/Chip";
 import Container from "@mui/material/Container";
-import { styled } from "@mui/material/styles";
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableHead from "@mui/material/TableHead";
-import TableRow from "@mui/material/TableRow";
 import Typography from "@mui/material/Typography";
-import { Role, User } from "@opensystemslab/planx-core/types";
 import React from "react";
-import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 import SettingsSection from "ui/editor/SettingsSection";
 
-const StyledAvatar = styled(Avatar)(({ theme }) => ({
-  background: theme.palette.background.dark,
-  color: theme.palette.common.white,
-  fontSize: "1em",
-  fontWeight: FONT_WEIGHT_SEMI_BOLD,
-  marginRight: theme.spacing(1),
-}));
-
-const StyledTableRow = styled(TableRow)(({ theme }) => ({
-  "&:nth-of-type(even)": {
-    background: theme.palette.background.paper,
-  },
-}));
-
-export type TeamMember = Omit<User, "teams" | "isPlatformAdmin"> & {
-  role: Role;
-};
-
-const roleLabels: Record<string, string> = {
-  platformAdmin: "Admin",
-  teamEditor: "Editor",
-  teamViewer: "Viewer",
-};
-
-interface Props {
-  teamMembersByRole: Record<string, TeamMember[]>;
-}
-
-const MembersTable: React.FC<{ members: TeamMember[] }> = ({ members }) => {
-  const getRoleLabel = (role: string) => {
-    return roleLabels[role] || role;
-  };
-
-  if (members.length === 0) {
-    return (
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableCell>
-              <strong>No members found</strong>
-            </TableCell>
-          </TableRow>
-        </TableHead>
-      </Table>
-    );
-  }
-
-  return (
-    <TableContainer>
-      <Table>
-        <TableHead>
-          <StyledTableRow>
-            <TableCell sx={{ width: 300 }}>
-              <strong>User</strong>
-            </TableCell>
-            <TableCell sx={{ width: 200 }}>
-              <strong>Role</strong>
-            </TableCell>
-            <TableCell>
-              <strong>Email</strong>
-            </TableCell>
-          </StyledTableRow>
-        </TableHead>
-        <TableBody>
-          {members.map((member) => (
-            <StyledTableRow key={member.id}>
-              <TableCell
-                sx={{
-                  display: "flex",
-                  flexDirection: "row",
-                  alignItems: "center",
-                }}
-              >
-                <StyledAvatar>
-                  {member.firstName[0]}
-                  {member.lastName[0]}
-                </StyledAvatar>
-                {member.firstName} {member.lastName}
-              </TableCell>
-              <TableCell>
-                <Chip
-                  label={getRoleLabel(member.role)}
-                  size="small"
-                  sx={{ background: "#ddd" }}
-                />
-              </TableCell>
-              <TableCell>{member.email}</TableCell>
-            </StyledTableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
-  );
-};
+import { MembersTable } from "./MembersTable";
+import { Props, TeamMember } from "./types";
 
 export const TeamMembers: React.FC<Props> = ({ teamMembersByRole }) => {
   const platformAdmins = (teamMembersByRole.platformAdmin || []).filter(

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Team/styles.ts b/editor.planx.uk/src/pages/FlowEditor/components/Team/styles.ts
@@ -0,0 +1,18 @@
+import Avatar from "@mui/material/Avatar";
+import { styled } from "@mui/material/styles";
+import TableRow from "@mui/material/TableRow";
+import { FONT_WEIGHT_SEMI_BOLD } from "theme";
+
+export const StyledAvatar = styled(Avatar)(({ theme }) => ({
+  background: theme.palette.background.dark,
+  color: theme.palette.common.white,
+  fontSize: "1em",
+  fontWeight: FONT_WEIGHT_SEMI_BOLD,
+  marginRight: theme.spacing(1),
+}));
+
+export const StyledTableRow = styled(TableRow)(({ theme }) => ({
+  "&:nth-of-type(even)": {
+    background: theme.palette.background.paper,
+  },
+}));
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Team/types.ts b/editor.planx.uk/src/pages/FlowEditor/components/Team/types.ts
@@ -0,0 +1,9 @@
+import { Role, User } from "@opensystemslab/planx-core/types";
+
+export type TeamMember = Omit<User, "teams" | "isPlatformAdmin"> & {
+  role: Role;
+};
+
+export interface Props {
+  teamMembersByRole: Record<string, TeamMember[]>;
+}
diff --git a/editor.planx.uk/src/routes/teamMembers.tsx b/editor.planx.uk/src/routes/teamMembers.tsx
@@ -2,10 +2,8 @@ import { Role, User } from "@opensystemslab/planx-core/types";
 import gql from "graphql-tag";
 import { groupBy } from "lodash";
 import { compose, mount, NotFoundError, route, withData } from "navi";
-import {
-  TeamMember,
-  TeamMembers,
-} from "pages/FlowEditor/components/Team/TeamMembers";
+import { TeamMembers } from "pages/FlowEditor/components/Team/TeamMembers";
+import { TeamMember } from "pages/FlowEditor/components/Team/types";
 import { useStore } from "pages/FlowEditor/lib/store";
 import React from "react";