Better inval

brainstorm/package.json

@@ -28,17 +28,17 @@
 		"@azure/msal-browser": "^3.13.0",
 		"@fluentui/react-components": "^9.48.0",
 		"@fluentui/react-icons": "^2.0.221",
-		"@fluidframework/azure-client": "2.0.0-rc.5.0.1",
-		"@fluidframework/odsp-client": "2.0.0-rc.5.0.1",
-		"@fluidframework/telemetry-utils": "2.0.0-rc.5.0.1",
-		"@fluidframework/test-runtime-utils": "2.0.0-rc.5.0.1",
+		"@fluidframework/azure-client": "^2.0.0",
+		"@fluidframework/odsp-client": "^2.0.0",
+		"@fluidframework/telemetry-utils": "^2.0.0",
+		"@fluidframework/test-runtime-utils": "^2.0.0",
 		"@headlessui/react": "^1.7.18",
 		"@microsoft/microsoft-graph-client": "^3.0.7",
 		"@types/react": "^18.2.0",
 		"@types/react-dom": "^18.2.0",
 		"axios": "^1.6.2",
 		"dotenv": "^16.0.2",
-		"fluid-framework": "2.0.0-rc.5.0.1",
+		"fluid-framework": "^2.0.0",
 		"hashids": "^2.2.10",
 		"jsrsasign": "^11.1.0",
 		"react": "^18.2.0",
@@ -50,9 +50,9 @@
 		"uuid": "^9.0.1"
 	},
 	"devDependencies": {
-		"@fluidframework/azure-local-service": "2.0.0-rc.5.0.1",
+		"@fluidframework/azure-local-service": "^2.0.0",
 		"@fluidframework/build-common": "^2.0.0",
-		"@fluidframework/devtools": "2.0.0-rc.5.0.1",
+		"@fluidframework/devtools": "^2.0.0",
 		"@microsoft/microsoft-graph-types": "^2.40.0",
 		"@types/debug": "^4.1.7",
 		"@types/jsrsasign": "^10.5.13",

brainstorm/src/react/canvasux.tsx

@@ -41,13 +41,15 @@ export function Canvas(props: {
 	setSaved: (arg: boolean) => void;
 	setFluidMembers: (arg: string[]) => void;
 }): JSX.Element {
-	const [invalidations, setInvalidations] = useState(0);
+	const [itemsArray, setItemsArray] = useState<(Note | Group)[]>(
+		props.items.root.map((item) => item),
+	);
 
 	// Register for tree deltas when the component mounts.
-	// Any time the node changes, the app will update.
+	// Any time the items array changes, the app will update.
 	useEffect(() => {
 		const unsubscribe = Tree.on(props.items.root, "nodeChanged", () => {
-			setInvalidations(invalidations + Math.random());
+			setItemsArray(props.items.root.map((item) => item));
 		});
 		return unsubscribe;
 	}, []);
@@ -97,11 +99,11 @@ export function Canvas(props: {
 	return (
 		<div className="relative flex grow-0 h-full w-full bg-transparent">
 			<ItemsView
-				items={props.items.root}
+				items={itemsArray}
+				parent={props.items.root}
 				clientId={props.currentUser}
 				session={props.sessionTree.root}
 				fluidMembers={props.fluidMembers}
-				isRoot={true}
 			/>
 			<Floater>
 				<ButtonGroup>
@@ -127,12 +129,14 @@ export function Canvas(props: {
 }
 
 export function ItemsView(props: {
-	items: Items;
+	items: (Note | Group)[];
+	parent: Items;
 	clientId: string;
 	session: Session;
 	fluidMembers: string[];
-	isRoot: boolean;
 }): JSX.Element {
+	const isRoot = Tree.parent(props.parent) === undefined;
+
 	const pilesArray = [];
 	for (const i of props.items) {
 		if (Tree.is(i, Group)) {
@@ -141,19 +145,17 @@ export function ItemsView(props: {
 					key={i.id}
 					group={i}
 					clientId={props.clientId}
-					parent={props.items}
 					session={props.session}
 					fluidMembers={props.fluidMembers}
 				/>,
 			);
 		} else if (Tree.is(i, Note)) {
-			if (props.isRoot) {
+			if (isRoot) {
 				pilesArray.push(
 					<RootNoteWrapper
 						key={i.id}
 						note={i}
 						clientId={props.clientId}
-						parent={props.items}
 						session={props.session}
 						fluidMembers={props.fluidMembers}
 					/>,
@@ -164,7 +166,6 @@ export function ItemsView(props: {
 						key={i.id}
 						note={i}
 						clientId={props.clientId}
-						parent={props.items}
 						session={props.session}
 						fluidMembers={props.fluidMembers}
 					/>,
@@ -173,7 +174,7 @@ export function ItemsView(props: {
 		}
 	}
 
-	if (props.isRoot) {
+	if (isRoot) {
 		return (
 			<div className="flex grow-0 flex-row h-full w-full flex-wrap gap-4 p-4 content-start overflow-y-scroll">
 				{pilesArray}
@@ -182,7 +183,7 @@ export function ItemsView(props: {
 		);
 	} else {
 		pilesArray.push(
-			<AddNoteButton key="newNote" parent={props.items} clientId={props.clientId} />,
+			<AddNoteButton key="newNote" target={props.parent} clientId={props.clientId} />,
 		);
 		return <div className="flex flex-row flex-wrap gap-8 p-2">{pilesArray}</div>;
 	}

brainstorm/src/react/groupux.tsx

@@ -16,11 +16,15 @@ import { Tree } from "fluid-framework";
 export function GroupView(props: {
 	group: Group;
 	clientId: string;
-	parent: Items;
 	session: Session;
 	fluidMembers: string[];
 }): JSX.Element {
-	const [invalidations, setInvalidations] = useState(0);
+	// copy the array of items from the group
+	// to force a re-render when the array changes
+	const [itemsArray, setItemsArray] = useState<(Note | Group)[]>(
+		props.group.items.map((item) => item),
+	);
+	const [name, setName] = useState(props.group.name);
 
 	// Register for tree deltas when the component mounts.
 	// Any time the items array changes, the app will update
@@ -29,7 +33,7 @@ export function GroupView(props: {
 	// handled by the NoteView component.
 	useEffect(() => {
 		const unsubscribe = Tree.on(props.group.items, "nodeChanged", () => {
-			setInvalidations(invalidations + Math.random());
+			setItemsArray(props.group.items.map((item) => item));
 		});
 		return unsubscribe;
 	}, []);
@@ -38,11 +42,16 @@ export function GroupView(props: {
 	// Any time the group changes, the app will update
 	useEffect(() => {
 		const unsubscribe = Tree.on(props.group, "nodeChanged", () => {
-			setInvalidations(invalidations + Math.random());
+			setName(props.group.name);
 		});
 		return unsubscribe;
 	}, []);
 
+	const parent = Tree.parent(props.group);
+	if (!Tree.is(parent, Items)) {
+		return <></>;
+	}
+
 	const [, drag] = useDrag(() => ({
 		type: dragType.GROUP,
 		item: props.group,
@@ -59,7 +68,7 @@ export function GroupView(props: {
 		}),
 		canDrop: (item) => {
 			if (Tree.is(item, Note)) return true;
-			if (Tree.is(item, Group) && !Tree.contains(item, props.parent)) return true;
+			if (Tree.is(item, Group) && !Tree.contains(item, parent)) return true;
 			return false;
 		},
 		drop: (item, monitor) => {
@@ -73,9 +82,9 @@ export function GroupView(props: {
 				return;
 			}
 
-			const droppedItem = item;
-			if (Tree.is(droppedItem, Group) || Tree.is(droppedItem, Note)) {
-				moveItem(droppedItem, props.parent.indexOf(props.group), props.parent);
+			if (Tree.is(item, Group) || Tree.is(item, Note)) {
+				console.log("drop");
+				moveItem(item, parent.indexOf(props.group), parent);
 			}
 
 			return;
@@ -106,39 +115,49 @@ export function GroupView(props: {
 					(isOver && canDrop ? "translate-x-3" : "")
 				}
 			>
-				<GroupToolbar pile={props.group} parent={props.parent} />
+				<GroupToolbar
+					name={name}
+					changeName={(name: string) => {
+						props.group.name = name;
+					}}
+					deletePile={props.group.delete}
+				/>
 				<ItemsView
-					items={props.group.items}
+					items={itemsArray}
+					parent={props.group.items}
 					clientId={props.clientId}
 					session={props.session}
 					fluidMembers={props.fluidMembers}
-					isRoot={false}
 				/>
 			</div>
 		</div>
 	);
 }
 
-function GroupName(props: { pile: Group }): JSX.Element {
+function GroupName(props: { name: string; changeName: (name: string) => void }): JSX.Element {
 	return (
 		<input
 			className="flex w-0 grow p-1 mb-2 mr-2 text-lg font-bold text-black bg-transparent"
 			type="text"
-			value={props.pile.name}
-			onChange={(event) => (props.pile.name = event.target.value)}
+			value={props.name}
+			onChange={(event) => props.changeName(event.target.value)}
 		/>
 	);
 }
 
-function GroupToolbar(props: { pile: Group; parent: Items }): JSX.Element {
+function GroupToolbar(props: {
+	name: string;
+	changeName: (name: string) => void;
+	deletePile: () => void;
+}): JSX.Element {
 	return (
 		<div className="flex flex-row justify-between">
-			<GroupName pile={props.pile} />
-			<DeletePileButton pile={props.pile} items={props.parent} />
+			<GroupName {...props} />
+			<DeletePileButton {...props} />
 		</div>
 	);
 }
 
-export function DeletePileButton(props: { pile: Group; items: Items }): JSX.Element {
-	return <DeleteButton handleClick={() => props.pile.delete()}></DeleteButton>;
+export function DeletePileButton(props: { deletePile: () => void }): JSX.Element {
+	return <DeleteButton handleClick={() => props.deletePile()}></DeleteButton>;
 }