Update to latest Fluid packages (non-experimental)

package.json

@@ -44,15 +44,18 @@
     ]
   },
   "dependencies": {
-    "@fluentui/react": "^8.1.1",
-    "@fluid-experimental/fluid-framework": "^0.44.0",
-    "@fluid-experimental/frs-client": "^0.44.0",
-    "@fluidframework/test-runtime-utils": "0.44.0",
+    "@fluentui/react": "^8.29.2",
+    "fluid-framework": "^0.46.0",
+    "@fluidframework/azure-client": "^0.46.0",
+    "@fluidframework/test-runtime-utils": "0.46.0",
+    "@microsoft/mgt-element": "^2.2.1",
+    "@microsoft/mgt-msal2-provider": "^2.2.1",
+    "@microsoft/mgt-react": "^2.2.1",
     "cross-env": "^7.0.3",
-    "react": "^16.10.2",
-    "react-dnd": "^14.0.2",
-    "react-dnd-html5-backend": "^14.0.0",
-    "react-dom": "^16.10.2"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-dnd": "^14.0.3",
+    "react-dnd-html5-backend": "^14.0.1"
   },
   "devDependencies": {
     "tinylicious": "^0.4.21640",

src/BrainstormModel.ts

@@ -1,5 +1,5 @@
-import { FluidContainer, ISharedMap, SharedMap } from "@fluid-experimental/fluid-framework";
-import { FrsMember } from "@fluid-experimental/frs-client";
+import { FluidContainer, ISharedMap, SharedMap } from "fluid-framework";
+import { AzureMember } from "@fluidframework/azure-client";
 import { NoteData, Position } from "./Types";
 
 const c_NoteIdPrefix = "noteId_";
@@ -10,13 +10,13 @@ const c_TextPrefix = "text_";
 const c_ColorPrefix = "color_";
 
 export type BrainstormModel = Readonly<{
-  CreateNote(noteId: string, myAuthor: FrsMember): NoteData;
+  CreateNote(noteId: string, myAuthor: AzureMember): NoteData;
   MoveNote(noteId: string, newPos: Position): void;
   SetNote(noteId: string, newCardData: NoteData): void;
   SetNoteText(noteId: string, noteText: string): void;
   SetNoteColor(noteId: string, noteColor: string): void;
-  LikeNote(noteId: string, author: FrsMember): void;
-  GetNoteLikedUsers(noteId: string): FrsMember[];
+  LikeNote(noteId: string, author: AzureMember): void;
+  GetNoteLikedUsers(noteId: string): AzureMember[];
   DeleteNote(noteId: string): void;
   NoteIds: string[];
   setChangeListener(listener: () => void): void;
@@ -51,7 +51,7 @@ export function createBrainstormModel(fluid: FluidContainer): BrainstormModel {
 
 
   return {
-    CreateNote(noteId: string, myAuthor: FrsMember): NoteData {
+    CreateNote(noteId: string, myAuthor: AzureMember): NoteData {
       const newNote: NoteData = {
         id: noteId,
         text: sharedMap.get(c_TextPrefix + noteId),
@@ -73,7 +73,7 @@ export function createBrainstormModel(fluid: FluidContainer): BrainstormModel {
       return newNote;
     },
 
-    GetNoteLikedUsers(noteId: string): FrsMember[] {
+    GetNoteLikedUsers(noteId: string): AzureMember[] {
       return (
         Array.from(sharedMap
           .keys())
@@ -101,7 +101,7 @@ export function createBrainstormModel(fluid: FluidContainer): BrainstormModel {
 
     SetNoteColor,
 
-    LikeNote(noteId: string, author: FrsMember) {
+    LikeNote(noteId: string, author: AzureMember) {
       const voteString = c_votePrefix + noteId + "_" + author.userId;
       sharedMap.get(voteString) === author
         ? sharedMap.set(voteString, undefined)

src/Types.ts

@@ -1,11 +1,11 @@
-import { FrsMember } from "@fluid-experimental/frs-client";
+import { AzureMember } from "@fluidframework/azure-client";
 
 export type Position = Readonly<{ x: number; y: number }>;
 
 export type NoteData = Readonly<{
   id: any;
   text?: string;
-  author: FrsMember;
+  author: AzureMember;
   position: Position;
   numLikesCalculated: number;
   didILikeThisCalculated: boolean;

src/index.tsx

@@ -4,55 +4,82 @@
  */
 
 import { initializeIcons, ThemeProvider } from "@fluentui/react";
-import { FrsClient } from '@fluid-experimental/frs-client';
+import { AzureClient, AzureResources } from '@fluidframework/azure-client';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { BrainstormView } from './view/BrainstormView';
-import "./view/index.css"
+import "./view/index.css";
 import "./view/App.css";
 import { themeNameToTheme } from './view/Themes';
 import { connectionConfig, containerSchema } from "./Config";
 import { Navbar } from './Navbar';
+import { Providers } from '@microsoft/mgt-element';
+import { Msal2Provider } from '@microsoft/mgt-msal2-provider';
+
+Providers.globalProvider = new Msal2Provider({
+    clientId: '26fa7fdf-ae13-4db0-84f8-8249376812dc'
+});
 
 export async function start() {
     initializeIcons();
 
-    const getContainerId = (): { containerId: string; isNew: boolean } => {
-        let isNew = false;
+    async function createOrGetContainer() : 
+      Promise<{ containerId: string, azureResources: AzureResources}> {
+        let containerId = '';
+        // Check if there's a previous containerId (user may have simply logged out)
+        const prevContainerId = sessionStorage.getItem("containerId");
         if (location.hash.length === 0) {
-            isNew = true;
-            location.hash = Date.now().toString();
+            if (prevContainerId) {
+                location.hash = prevContainerId;
+                containerId = prevContainerId;
+            }
+        }
+        else {
+            containerId = location.hash.substring(1);        
         }
-        const containerId = location.hash.substring(1);
-        return { containerId, isNew };
-    };
 
-    const { containerId, isNew } = getContainerId();
+        const client = new AzureClient(connectionConfig);
+        let azureResources: AzureResources;
+        if (containerId) {
+            azureResources = await client.getContainer(containerId, containerSchema);
+        }
+        else {
+            azureResources = await client.createContainer(containerSchema);
+            // Temporary until attach() is available (per Fluid engineering)
+            containerId = azureResources.fluidContainer.id;
+            location.hash = containerId;
+        }
+        sessionStorage.setItem("containerId", containerId);
+        return {containerId, azureResources}; 
+    }
 
-    const client = new FrsClient(connectionConfig);
+    let {azureResources} = await createOrGetContainer();
 
-    const frsResources = isNew
-        ? await client.createContainer({ id: containerId }, containerSchema)
-        : await client.getContainer({ id: containerId }, containerSchema);
-
-
-    if (!frsResources.fluidContainer.connected) {
+    if (!azureResources.fluidContainer.connected) {
         await new Promise<void>((resolve) => {
-            frsResources.fluidContainer.once("connected", () => {
+            azureResources.fluidContainer.once("connected", () => {
                 resolve();
             });
         });
     }
 
+    function Main(props: any) {
+        return (
+            <React.StrictMode>
+                <ThemeProvider theme={themeNameToTheme("default")}>
+                    <Navbar />
+                    <main>
+                        <BrainstormView frsResources={azureResources} />
+                    </main>
+                </ThemeProvider>
+            </React.StrictMode>
+        )
+    }   
+
     ReactDOM.render(
-        <React.StrictMode>
-            <ThemeProvider theme={themeNameToTheme("default")}>
-                <Navbar />
-                <BrainstormView frsResources={frsResources} />
-            </ThemeProvider>
-        </React.StrictMode>,
+        <Main />,
         document.getElementById('root')
     );
 }
 
-start().catch((error) => console.error(error));
+start().catch((error) => console.error(error));

src/view/BrainstormView.tsx

@@ -1,26 +1,26 @@
 import { mergeStyles, Spinner } from "@fluentui/react";
-import { FrsResources } from "@fluid-experimental/frs-client";
-import * as React from "react";
+import { AzureResources } from "@fluidframework/azure-client";
+import { useState, useCallback, useEffect } from "react";
 import { DndProvider } from 'react-dnd'
 import { HTML5Backend } from 'react-dnd-html5-backend'
 import { BrainstormModel, createBrainstormModel } from "../BrainstormModel";
 import { Header } from "./Header";
 import { NoteSpace } from "./NoteSpace";
 
-export const BrainstormView = (props: { frsResources: FrsResources }) => {
+export const BrainstormView = (props: { frsResources: AzureResources }) => {
   const { frsResources: { fluidContainer, containerServices } } = props;
-  const [model] = React.useState<BrainstormModel>(createBrainstormModel(fluidContainer));
+  const [model] = useState<BrainstormModel>(createBrainstormModel(fluidContainer));
 
   const audience = containerServices.audience;
-  const [members, setMembers] = React.useState(Array.from(audience.getMembers().values()));
+  const [members, setMembers] = useState(Array.from(audience.getMembers().values()));
   const authorInfo = audience.getMyself();
-  const setMembersCallback = React.useCallback(() => setMembers(
+  const setMembersCallback = useCallback(() => setMembers(
     Array.from(
       audience.getMembers().values()
     )
   ), [setMembers, audience]);
   // Setup a listener to update our users when new clients join the session
-  React.useEffect(() => {
+  useEffect(() => {
     fluidContainer.on("connected", setMembersCallback);
     audience.on("membersChanged", setMembersCallback);
     return () => {

src/view/Header.tsx

@@ -4,7 +4,7 @@ import {
   ICommandBarItemProps,
   Facepile,
 } from "@fluentui/react";
-import { FrsMember } from "@fluid-experimental/frs-client";
+import { AzureMember } from "@fluidframework/azure-client";
 import React from "react";
 import { BrainstormModel } from "../BrainstormModel";
 import { DefaultColor } from "./Color";
@@ -21,8 +21,8 @@ function uuidv4() {
 }
 export interface HeaderProps {
   model: BrainstormModel;
-  author: FrsMember;
-  members: FrsMember[];
+  author: AzureMember;
+  members: AzureMember[];
 }
 
 export function Header(props: HeaderProps) {

src/view/Note.tsx

@@ -1,7 +1,7 @@
 import {
   mergeStyles,
 } from "@fluentui/react";
-import { FrsMember } from "@fluid-experimental/frs-client";
+import { AzureMember } from "@fluidframework/azure-client";
 import React from "react";
 import { useDrag } from "react-dnd";
 import { DefaultColor } from "./Color";
@@ -16,7 +16,7 @@ export type NoteProps = Readonly<{
   id: string;
   setPosition: (position: Position) => void;
   onLike: () => void;
-  getLikedUsers: () => FrsMember[];
+  getLikedUsers: () => AzureMember[];
   onDelete: () => void;
   onColorChange: (color: string) => void;
   setText: (text: string) => void;

src/view/NoteSpace.tsx

@@ -1,5 +1,5 @@
 import { IStyle, mergeStyles, ThemeProvider } from "@fluentui/react";
-import { FrsMember } from "@fluid-experimental/frs-client";
+import { AzureMember } from "@fluidframework/azure-client";
 import React from "react";
 import { useDrop } from 'react-dnd';
 import { NoteData, Position } from "../Types";
@@ -9,7 +9,7 @@ import { lightTheme } from "./Themes";
 
 export type NoteSpaceProps = Readonly<{
   model: BrainstormModel;
-  author: FrsMember;
+  author: AzureMember;
 }>;
 
 export function NoteSpace(props: NoteSpaceProps) {

src/view/PersonaList.tsx

@@ -1,15 +1,15 @@
 import { IPersonaStyles, List, Persona, PersonaSize } from "@fluentui/react";
-import { FrsMember } from "@fluid-experimental/frs-client";
+import { AzureMember } from "@fluidframework/azure-client";
 import React from "react";
 
-export function PersonaList(props: { users: FrsMember[] }) {
+export function PersonaList(props: { users: AzureMember[] }) {
   const personaStyles: Partial<IPersonaStyles> = {
     root: {
       marginTop: 10,
     },
   };
 
-  const renderPersonaListItem = (item?: FrsMember) => {
+  const renderPersonaListItem = (item?: AzureMember) => {
     return (
       item && (
         <Persona

src/view/ReactionListCallout.tsx

@@ -1,11 +1,11 @@
 import { Icon, Label, Stack } from "@fluentui/react";
-import { FrsMember } from "@fluid-experimental/frs-client";
+import { AzureMember } from "@fluidframework/azure-client";
 import React from "react";
 import { PersonaList } from "./PersonaList";
 
 export type ReactionListCalloutProps = {
   label: string;
-  usersToDisplay: FrsMember[];
+  usersToDisplay: AzureMember[];
   reactionIconName?: string;
 };