Skip to content

Commit 770a9b7

Browse files
lihebilihebi
authored
functional refactor & fix: remove state.role (#542)
1 parent 9947480 commit 770a9b7

File tree

12 files changed

+140
-257
lines changed

12 files changed

+140
-257
lines changed

‎packages/ui/src/components/Canvas.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -431,7 +431,8 @@ function CanvasImpl() {
431431
);
432432

433433
const repoId = useStore(store, (state) => state.repoId);
434-
const isGuest = useStore(store, (state) => state.role === "GUEST");
434+
435+
const editMode = useStore(store, (state) => state.editMode);
435436

436437
const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
437438
const shareOpen = useStore(store, (state) => state.shareOpen);
@@ -656,9 +657,9 @@ function CanvasImpl() {
656657
zoomOnScroll={false}
657658
panOnScroll={true}
658659
connectionMode={ConnectionMode.Loose}
659-
nodesDraggable={!isGuest}
660+
nodesDraggable={editMode === "edit"}
660661
// disable node delete on backspace when the user is a guest.
661-
deleteKeyCode={isGuest ? null : "Backspace"}
662+
deleteKeyCode={editMode === "view" ? null : "Backspace"}
662663
multiSelectionKeyCode={isMac ? "Meta" : "Control"}
663664
selectionMode={SelectionMode.Partial}
664665
// TODO restore previous viewport
@@ -682,7 +683,7 @@ function CanvasImpl() {
682683
}}
683684
nodeBorderRadius={2}
684685
/>
685-
<Controls showInteractive={!isGuest} />
686+
<Controls showInteractive={editMode === "edit"} />
686687

687688
<HelperLines
688689
horizontal={helperLineHorizontal}

‎packages/ui/src/components/CanvasContextMenu.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,35 +36,36 @@ export function CanvasContextMenu(props) {
3636
const store = useContext(RepoContext);
3737
if (!store) throw new Error("Missing BearContext.Provider in the tree");
3838

39-
const isGuest = useStore(store, (state) => state.role === "GUEST");
39+
const editMode = useStore(store, (state) => state.editMode);
40+
const editing = editMode === "edit";
4041
return (
4142
<Box sx={paneMenuStyle(props.x, props.y)}>
4243
<MenuList className="paneContextMenu">
43-
{!isGuest && (
44+
{editing && (
4445
<MenuItem onClick={props.addCode} sx={ItemStyle}>
4546
<ListItemIcon sx={{ color: "inherit" }}>
4647
<CodeIcon />
4748
</ListItemIcon>
4849
<ListItemText>New Code</ListItemText>
4950
</MenuItem>
5051
)}
51-
{!isGuest && (
52+
{editing && (
5253
<MenuItem onClick={props.addRich} sx={ItemStyle}>
5354
<ListItemIcon sx={{ color: "inherit" }}>
5455
<NoteIcon />
5556
</ListItemIcon>
5657
<ListItemText>New Note</ListItemText>
5758
</MenuItem>
5859
)}
59-
{!isGuest && (
60+
{editing && (
6061
<MenuItem onClick={props.addScope} sx={ItemStyle}>
6162
<ListItemIcon sx={{ color: "inherit" }}>
6263
<PostAddIcon />
6364
</ListItemIcon>
6465
<ListItemText>New Scope</ListItemText>
6566
</MenuItem>
6667
)}
67-
{!isGuest && (
68+
{editing && (
6869
<MenuItem onClick={props.handleImportClick} sx={ItemStyle}>
6970
<ListItemIcon sx={{ color: "inherit" }}>
7071
<FileUploadTwoToneIcon />

‎packages/ui/src/components/MyMonaco.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -391,7 +391,6 @@ export const MyMonaco = memo<MyMonacoProps>(function MyMonaco({
391391
console.debug("[perf] rendering MyMonaco", id);
392392
const store = useContext(RepoContext);
393393
if (!store) throw new Error("Missing BearContext.Provider in the tree");
394-
const readOnly = useStore(store, (state) => state.role === "GUEST");
395394
const showLineNumbers = useStore(store, (state) => state.showLineNumbers);
396395
const yjsRun = useStore(store, (state) => state.yjsRun);
397396
const apolloClient = useApolloClient();

‎packages/ui/src/components/ShareProjDialog.tsx

Lines changed: 25 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ function reducer(state, action) {
102102
}
103103
}
104104

105-
function CollaboratorList({ repoId, collaborators, dispatch, isOwner }) {
105+
function CollaboratorList({ repoId, collaborators, dispatch }) {
106106
const store = useContext(RepoContext);
107107
if (!store) throw new Error("Missing BearContext.Provider in the tree");
108108
const apolloClient = useApolloClient();
@@ -153,22 +153,20 @@ function CollaboratorList({ repoId, collaborators, dispatch, isOwner }) {
153153
{collaborators?.map((collab) => (
154154
<ListItem
155155
secondaryAction={
156-
isOwner && (
157-
<IconButton
158-
edge="end"
159-
aria-label="delete"
160-
onClick={() =>
161-
deleteCollaborator({
162-
variables: {
163-
repoId: repoId,
164-
collaboratorId: collab.id,
165-
},
166-
})
167-
}
168-
>
169-
<CloseIcon />
170-
</IconButton>
171-
)
156+
<IconButton
157+
edge="end"
158+
aria-label="delete"
159+
onClick={() =>
160+
deleteCollaborator({
161+
variables: {
162+
repoId: repoId,
163+
collaboratorId: collab.id,
164+
},
165+
})
166+
}
167+
>
168+
<CloseIcon />
169+
</IconButton>
172170
}
173171
sx={{ "&:hover": { backgroundColor: "#f5f5f5" } }}
174172
key={collab.id}
@@ -240,7 +238,6 @@ export function ShareProjDialog({
240238
const isPublic = useStore(store, (state) => state.isPublic);
241239
const collaborators = useStore(store, (state) => state.collaborators);
242240
const setShareOpen = useStore(store, (state) => state.setShareOpen);
243-
const isOwner = useStore(store, (state) => state.role === "OWNER");
244241
const title = useStore(store, (state) => state.repoName || "Untitled");
245242
const url = `${window.location.protocol}//${window.location.host}/repo/${id}`;
246243
const inputRef = React.useRef<HTMLInputElement>(null);
@@ -309,18 +306,16 @@ export function ShareProjDialog({
309306
<HelpOutlineOutlinedIcon fontSize="small" />
310307
</IconButton>
311308
</Tooltip>
312-
{isOwner && (
313-
<Button
314-
sx={{ float: "right" }}
315-
onClick={() => {
316-
updateVisibility({
317-
variables: { repoId: id, isPublic: !isPublic },
318-
});
319-
}}
320-
>
321-
Make it {isPublic ? "private" : "public"}
322-
</Button>
323-
)}
309+
<Button
310+
sx={{ float: "right" }}
311+
onClick={() => {
312+
updateVisibility({
313+
variables: { repoId: id, isPublic: !isPublic },
314+
});
315+
}}
316+
>
317+
Make it {isPublic ? "private" : "public"}
318+
</Button>
324319
</DialogContentText>
325320

326321
{showHelp && (
@@ -337,7 +332,6 @@ export function ShareProjDialog({
337332
<CollaboratorList
338333
repoId={id}
339334
collaborators={collaborators}
340-
isOwner={isOwner}
341335
dispatch={dispatch}
342336
/>
343337

@@ -355,7 +349,6 @@ export function ShareProjDialog({
355349
variant="standard"
356350
fullWidth
357351
inputRef={inputRef}
358-
disabled={!isOwner}
359352
/>
360353
<DialogActions>
361354
<Button
@@ -374,7 +367,6 @@ export function ShareProjDialog({
374367
}
375368
addCollaborator({ variables: { repoId: id, email } });
376369
}}
377-
disabled={!isOwner}
378370
>
379371
Share
380372
</Button>

‎packages/ui/src/components/Sidebar.tsx

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -972,7 +972,6 @@ export const Sidebar = () => {
972972
// FIXME: improve the implementation logic
973973
const store = useContext(RepoContext);
974974
if (!store) throw new Error("Missing BearContext.Provider in the tree");
975-
const isGuest = useStore(store, (state) => state.role === "GUEST");
976975
return (
977976
<>
978977
<MyKBar />
@@ -982,14 +981,11 @@ export const Sidebar = () => {
982981
}}
983982
>
984983
<Stack>
985-
{!isGuest && (
986-
<Box>
987-
{/* <SyncStatus /> */}
988-
<YjsSyncStatus />
989-
<Divider />
990-
<YjsRuntimeStatus />
991-
</Box>
992-
)}
984+
<Box>
985+
<YjsSyncStatus />
986+
<Divider />
987+
<YjsRuntimeStatus />
988+
</Box>
993989
<Divider />
994990
<Typography variant="h6">Export to ..</Typography>
995991
<ExportButtons />

‎packages/ui/src/components/nodes/Code.tsx

Lines changed: 20 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -391,7 +391,8 @@ function MyFloatingToolbar({ id, layout, setLayout }) {
391391
const yjsRunChain = useStore(store, (state) => state.yjsRunChain);
392392
const apolloClient = useApolloClient();
393393
// right, bottom
394-
const isGuest = useStore(store, (state) => state.role === "GUEST");
394+
const editMode = useStore(store, (state) => state.editMode);
395+
const editing = editMode === "edit";
395396

396397
const zoomLevel = useReactFlowStore((s) => s.transform[2]);
397398
const iconFontSize = zoomLevel < 1 ? `${1.5 * (1 / zoomLevel)}rem` : `1.5rem`;
@@ -411,7 +412,7 @@ function MyFloatingToolbar({ id, layout, setLayout }) {
411412
>
412413
<DragIndicatorIcon fontSize="inherit" />
413414
</Box>
414-
{!isGuest && (
415+
{editing && (
415416
<Tooltip title="Run (shift-enter)">
416417
<IconButton
417418
onClick={() => {
@@ -422,7 +423,7 @@ function MyFloatingToolbar({ id, layout, setLayout }) {
422423
</IconButton>
423424
</Tooltip>
424425
)}
425-
{!isGuest && (
426+
{editing && (
426427
<Tooltip title="Run chain">
427428
<IconButton
428429
onClick={() => {
@@ -433,7 +434,7 @@ function MyFloatingToolbar({ id, layout, setLayout }) {
433434
</IconButton>
434435
</Tooltip>
435436
)}
436-
{!isGuest && (
437+
{editing && (
437438
<Tooltip style={{ fontSize: iconFontSize }} title="Delete">
438439
<ConfirmDeleteButton
439440
handleConfirm={() => {
@@ -482,16 +483,7 @@ export const CodeNode = memo<NodeProps>(function ({
482483
// right, bottom
483484
const [layout, setLayout] = useState("bottom");
484485
const setPodName = useStore(store, (state) => state.setPodName);
485-
const { width, height, parent } = useReactFlowStore((s) => {
486-
const node = s.nodeInternals.get(id)!;
487-
488-
return {
489-
width: node.width,
490-
height: node.height,
491-
parent: node.parentNode,
492-
};
493-
}, shallow);
494-
const isGuest = useStore(store, (state) => state.role === "GUEST");
486+
const editMode = useStore(store, (state) => state.editMode);
495487
const focusedEditor = useStore(store, (state) => state.focusedEditor);
496488
const setFocusedEditor = useStore(store, (state) => state.setFocusedEditor);
497489
const inputRef = useRef<HTMLInputElement>(null);
@@ -589,8 +581,8 @@ export const CodeNode = memo<NodeProps>(function ({
589581
// Offset the border to prevent the node height from changing.
590582
margin: "-5px",
591583
textAlign: "center",
592-
height: height,
593-
width: width,
584+
height: node.height,
585+
width: node.width,
594586
color: "green",
595587
}}
596588
className="custom-drag-handle"
@@ -611,8 +603,10 @@ export const CodeNode = memo<NodeProps>(function ({
611603

612604
// onsize is banned for a guest, FIXME: ugly code
613605
const Wrap = (child) =>
614-
isGuest ? (
615-
<>{child}</>
606+
editMode === "view" ? (
607+
<Box height={node.height || 100} width={node.width || 0}>
608+
{child}
609+
</Box>
616610
) : (
617611
<Box
618612
sx={{
@@ -623,8 +617,8 @@ export const CodeNode = memo<NodeProps>(function ({
623617
>
624618
<ResizableBox
625619
onResizeStop={onResizeStop}
626-
height={height || 100}
627-
width={width || 0}
620+
height={node.height || 100}
621+
width={node.width || 0}
628622
axis={"x"}
629623
minConstraints={[200, 200]}
630624
>
@@ -694,8 +688,8 @@ export const CodeNode = memo<NodeProps>(function ({
694688
}}
695689
>
696690
<Handles
697-
width={width}
698-
height={height}
691+
width={node.width}
692+
height={node.height}
699693
parent={parent}
700694
xPos={xPos}
701695
yPos={yPos}
@@ -721,9 +715,9 @@ export const CodeNode = memo<NodeProps>(function ({
721715
}}
722716
className="nodrag"
723717
>
724-
{id} at ({Math.round(xPos)}, {Math.round(yPos)}, w: {width},
725-
h: {height}), parent: {parent} level: {node?.data.level}{" "}
726-
fontSize: {fontSize}
718+
{id} at ({Math.round(xPos)}, {Math.round(yPos)}, w:{" "}
719+
{node.width}, h: {node.height}), parent: {node.parentNode}{" "}
720+
level: {node?.data.level} fontSize: {fontSize}
727721
</Box>
728722
)}
729723
{/* We actually don't need the name for a pod. Users can just write comments. */}
@@ -742,7 +736,7 @@ export const CodeNode = memo<NodeProps>(function ({
742736
inputRef={inputRef}
743737
className="nodrag"
744738
defaultValue={data.name || ""}
745-
disabled={isGuest}
739+
disabled={editMode === "view"}
746740
onBlur={(e) => {
747741
const name = e.target.value;
748742
if (name === data.name) return;

0 commit comments

Comments
 (0)