import { SyncedDataObject , useSyncedCounter , useSyncedString , } from "@fluid-experimental/react" ; import { CollaborativeInput } from "@fluid-experimental/react-inputs" ; import { SharedString } from "@fluidframework/sequence" ; import * as React from "react" ; interface ILikesViewProps { syncedDataObject : SyncedDataObject ; } export function LikesView ( props ) { const [ likes , likesReducer ] = useSyncedCounter ( props . syncedDataObject , "likes" ) ; const [ imgUrl , setImgUrl ] = useSyncedString ( props . syncedDataObject , "imgUrl" ) ; return ( < div > < div > < img width = '100%' src = { imgUrl ?. getText ( ) } / > { imgUrl !== undefined ? < CollaborativeInput style = { { width : "90%" } } sharedString = { imgUrl } onInput = { ( value ) => setImgUrl ( { value } ) } /> : undefined } < /div> < span > { `Likes: ${ likes }` } < /span> < button onClick = { ( ) => likesReducer . increment ( 1 ) } > { "+" } < /button> < /div>); }