this.setState({ revokeTransferOpen: false })}\n menuTarget={this.state.menuTarget}\n />\n \n );\n }\n }\n )\n )\n);\n\nconst ShareContent = graphql(\n gql`\n query (\n $id: ID!\n $editorOffset: NaturalNumber\n $editorLimit: NaturalNumber!\n $pendingEditorOffset: NaturalNumber\n $pendingEditorLimit: NaturalNumber!\n $viewerOffset: NaturalNumber\n $viewerLimit: NaturalNumber!\n $pendingViewerOffset: NaturalNumber\n $pendingViewerLimit: NaturalNumber!\n ) {\n collection(id: $id) {\n id\n myRole\n pendingTransfer {\n id\n recipient {\n id\n profileIconColor\n name\n email\n }\n }\n pendingAdminShareCount: pendingShareCount(filter: { role: ADMIN })\n pendingAdminShares: pendingShares(\n offset: $pendingEditorOffset\n limit: $pendingEditorLimit\n filter: { role: ADMIN }\n ) {\n id\n role\n recipient {\n id\n profileIconColor\n name\n email\n }\n }\n pendingEditorShareCount: pendingShareCount(filter: { role: EDITOR })\n pendingEditorShares: pendingShares(\n offset: $pendingEditorOffset\n limit: $pendingEditorLimit\n filter: { role: EDITOR }\n ) {\n id\n role\n recipient {\n id\n profileIconColor\n name\n email\n }\n }\n pendingViewerShareCount: pendingShareCount(filter: { role: VIEWER })\n pendingViewerShares: pendingShares(\n offset: $pendingViewerOffset\n limit: $pendingViewerLimit\n filter: { role: VIEWER }\n ) {\n id\n role\n recipient {\n id\n profileIconColor\n name\n email\n }\n }\n owner {\n id\n email\n name\n profileIconColor\n }\n adminCount\n admins(offset: $editorOffset, limit: $editorLimit) {\n id\n email\n name\n profileIconColor\n }\n editorCount\n editors(offset: $editorOffset, limit: $editorLimit) {\n id\n email\n name\n profileIconColor\n }\n viewerCount\n viewers(offset: $viewerOffset, limit: $viewerLimit) {\n id\n email\n name\n profileIconColor\n }\n }\n }\n `,\n {\n name: \"shareData\",\n options: ({ collection }) => ({\n variables: {\n editorOffset: 0,\n editorLimit: 20,\n pendingEditorOffset: 0,\n pendingEditorLimit: 20,\n viewerOffset: 0,\n viewerLimit: 20,\n pendingViewerOffset: 0,\n pendingViewerLimit: 20,\n id: collection.id,\n },\n }),\n }\n)(\n class ShareDialogContent extends Component {\n constructor(props) {\n super(props);\n\n this.state = { fetchMoreLoading: false };\n }\n\n componentDidMount() {\n this.props.shareData.refetch();\n\n this.props.shareData.subscribeToMore({\n document: gql`\n subscription {\n pendingShareDeclined\n }\n `,\n updateQuery: (prev, { subscriptionData }) => {\n if (!subscriptionData.data) {\n return prev;\n }\n\n return {\n collection: {\n ...prev.collection,\n pendingEditorShares: prev.collection.pendingEditorShares.filter(\n (editor) =>\n editor.id !== subscriptionData.data.pendingShareDeclined\n ),\n pendingViewerShares: prev.collection.pendingViewerShares.filter(\n (viewer) =>\n viewer.id !== subscriptionData.data.pendingShareDeclined\n ),\n },\n };\n },\n });\n\n this.props.shareData.subscribeToMore({\n document: gql`\n subscription {\n collectionUpdated {\n id\n pendingTransfer {\n id\n recipient {\n id\n profileIconColor\n name\n email\n }\n }\n }\n }\n `,\n });\n\n this.props.shareData.subscribeToMore({\n document: gql`\n subscription {\n pendingShareCreated {\n id\n role\n recipient {\n id\n profileIconColor\n name\n email\n }\n }\n }\n `,\n updateQuery: (prev, { subscriptionData }) => {\n if (!subscriptionData.data) {\n return prev;\n }\n\n if (subscriptionData.data.pendingShare.role === \"EDITOR\") {\n const newEditorShares = [\n ...prev.collection.pendingEditorShares,\n subscriptionData.data.pendingShare,\n ];\n\n return {\n collection: {\n ...prev.collection,\n pendingEditorShares: newEditorShares,\n },\n };\n }\n\n if (subscriptionData.data.pendingShare.role === \"VIEWER\") {\n const newViewerShares = [\n ...prev.collection.pendingViewerShares,\n subscriptionData.data.pendingShare,\n ];\n\n return {\n collection: {\n ...prev.collection,\n pendingViewerShares: newViewerShares,\n },\n };\n }\n },\n });\n\n this.props.shareData.subscribeToMore({\n document: gql`\n subscription {\n pendingShareRevoked\n }\n `,\n updateQuery: (prev, { subscriptionData }) => {\n if (!subscriptionData.data) {\n return prev;\n }\n\n return {\n collection: {\n ...prev.collection,\n editors: prev.collection.editors.filter(\n (editor) =>\n editor.id !== subscriptionData.data.pendingShareRevoked\n ),\n viewers: prev.collection.viewers.filter(\n (viewer) =>\n viewer.id !== subscriptionData.data.pendingShareRevoked\n ),\n },\n };\n },\n });\n\n this.props.shareData.subscribeToMore({\n document: gql`\n subscription {\n userLeftCollection {\n user {\n id\n }\n collection {\n id\n }\n }\n }\n `,\n updateQuery: (prev, { subscriptionData }) => {\n if (!subscriptionData.data) {\n return prev;\n }\n\n if (\n subscriptionData.data.userLeftCollection.collection.id !==\n prev.collection.id\n ) {\n return prev;\n }\n\n return {\n collection: {\n ...prev.collection,\n editors: prev.collection.editors.filter(\n (editor) =>\n editor.id !== subscriptionData.data.userLeftCollection.user.id\n ),\n viewer: prev.collection.viewers.filter(\n (viewer) =>\n viewer.id !== subscriptionData.data.userLeftCollection.user.id\n ),\n },\n };\n },\n });\n\n const pendingShareAcceptedSubscription = gql`\n subscription {\n pendingShareAccepted {\n id\n role\n recipient {\n id\n profileIconColor\n name\n email\n }\n }\n }\n `;\n\n this.props.shareData.subscribeToMore({\n document: pendingShareAcceptedSubscription,\n updateQuery: (prev, { subscriptionData }) => {\n if (!subscriptionData.data) {\n return prev;\n }\n\n return {\n collection: {\n ...prev.collection,\n editors:\n subscriptionData.data.pendingShareAccepted.role === \"EDITOR\"\n ? [\n ...prev.collection.editors,\n subscriptionData.data.pendingShareAccepted.recipient,\n ]\n : prev.collection.editors,\n pendingEditorShares: prev.collection.pendingEditorShares.filter(\n (editor) =>\n editor.id !== subscriptionData.data.pendingShareAccepted.id\n ),\n viewers:\n subscriptionData.data.pendingShareAccepted.role === \"VIEWER\"\n ? [\n ...prev.collection.viewers,\n subscriptionData.data.pendingShareAccepted.recipient,\n ]\n : prev.collection.viewers,\n pendingViewerShares: prev.collection.pendingViewerShares.filter(\n (viewer) =>\n viewer.id !== subscriptionData.data.pendingShareAccepted.id\n ),\n },\n };\n },\n });\n }\n\n queryMore = async () => {\n if (!this.queryMore.locked) {\n //EDITORS\n if (\n this.props.shareData.collection.editorCount >\n this.props.shareData.collection.editors.length\n ) {\n this.queryMore.locked = true;\n\n try {\n this.setState({ fetchMoreLoading: true });\n await this.props.shareData.fetchMore({\n variables: {\n offset: this.props.shareData.collection.editors.length,\n limit:\n this.props.shareData.collection.editorCount -\n this.props.shareData.collection.editors.length >=\n 20\n ? 20\n : this.props.shareData.collection.editorCount % 20,\n },\n updateQuery: (prev, { fetchMoreResult }) => {\n if (!fetchMoreResult) {\n return prev;\n }\n\n const newEditors = [\n ...prev.collection.editors,\n ...fetchMoreResult.collection.editors,\n ];\n\n return {\n collection: {\n ...prev.collection,\n editors: newEditors,\n },\n };\n },\n });\n } finally {\n this.setState(() => {\n this.queryMore.locked = false;\n\n return { fetchMoreLoading: false };\n });\n }\n } else {\n //PENDING EDITORS\n if (\n this.props.shareData.collection.pendingEditorShareCount >\n this.props.shareData.collection.pendingEditorShares.length\n ) {\n this.queryMore.locked = true;\n\n try {\n this.setState({ fetchMoreLoading: true });\n await this.props.shareData.fetchMore({\n variables: {\n offset:\n this.props.shareData.collection.pendingEditorShares.length,\n limit:\n this.props.shareData.collection.pendingEditorShareCount -\n this.props.shareData.collection.pendingEditorShares\n .length >=\n 20\n ? 20\n : this.props.shareData.collection\n .pendingEditorShareCount % 20,\n },\n updateQuery: (prev, { fetchMoreResult }) => {\n if (!fetchMoreResult) {\n return prev;\n }\n\n const newPendingEditorShares = [\n ...prev.collection.pendingEditorShares,\n ...fetchMoreResult.collection.pendingEditorShares,\n ];\n\n return {\n collection: {\n ...prev.collection,\n editors: newPendingEditorShares,\n },\n };\n },\n });\n } finally {\n this.setState(() => {\n this.queryMore.locked = false;\n\n return { fetchMoreLoading: false };\n });\n }\n } else {\n //VIEWERS\n if (\n this.props.shareData.collection.viewerCount >\n this.props.shareData.collection.viewers.length\n ) {\n this.queryMore.locked = true;\n\n try {\n this.setState({ fetchMoreLoading: true });\n await this.props.shareData.fetchMore({\n variables: {\n offset: this.props.shareData.collection.viewers.length,\n limit:\n this.props.shareData.collection.viewerCount -\n this.props.shareData.collection.viewers.length >=\n 20\n ? 20\n : this.props.shareData.collection.viewerCount % 20,\n },\n updateQuery: (prev, { fetchMoreResult }) => {\n if (!fetchMoreResult) {\n return prev;\n }\n\n const newViewers = [\n ...prev.collection.viewers,\n ...fetchMoreResult.collection.viewers,\n ];\n\n return {\n collection: {\n ...prev.collection,\n editors: newViewers,\n },\n };\n },\n });\n } finally {\n this.setState(() => {\n this.queryMore.locked = false;\n\n return { fetchMoreLoading: false };\n });\n }\n } else {\n if (\n this.props.shareData.collection.pendingViewerShareCount >\n this.props.shareData.collection.pendingViewerShares.length\n ) {\n this.queryMore.locked = true;\n\n try {\n this.setState({ fetchMoreLoading: true });\n await this.props.shareData.fetchMore({\n variables: {\n offset:\n this.props.shareData.collection.pendingViewerShares\n .length,\n limit:\n this.props.shareData.collection\n .pendingViewerShareCount -\n this.props.shareData.collection.pendingViewerShares\n .length >=\n 20\n ? 20\n : this.props.shareData.collection\n .pendingViewerShareCount % 20,\n },\n updateQuery: (prev, { fetchMoreResult }) => {\n if (!fetchMoreResult) {\n return prev;\n }\n\n const newPendingViewerShares = [\n ...prev.collection.pendingViewerShares,\n ...fetchMoreResult.collection.pendingViewerShares,\n ];\n\n return {\n collection: {\n ...prev.collection,\n editors: newPendingViewerShares,\n },\n };\n },\n });\n } finally {\n this.setState(() => {\n this.queryMore.locked = false;\n\n return { fetchMoreLoading: false };\n });\n }\n }\n }\n }\n }\n }\n };\n\n getInitials = (string) => {\n if (string) {\n let names = string.trim().split(\" \"),\n initials = names[0].substring(0, 1).toUpperCase();\n\n if (names.length > 1) {\n initials += names[names.length - 1].substring(0, 1).toUpperCase();\n }\n return initials;\n }\n };\n\n render() {\n const {\n shareData: { loading, error, collection, refetch },\n fullScreen,\n t,\n } = this.props;\n\n const {\n REACT_APP_TEXT_ON_MAIN_BACKGROUND_COLOR: textColor,\n REACT_APP_OWNER_NAME: ownerName,\n REACT_APP_ADMINS_NAME: adminsName,\n REACT_APP_EDITORS_NAME: editorsName,\n REACT_APP_VIEWERS_NAME: viewersName,\n } = process.env;\n\n const subheaderStyle = {\n paddingLeft: fullScreen\n ? \"calc(16px + \" + getNotchHeight(\"left\") + \")\"\n : \"16px\",\n paddingRight: fullScreen\n ? \"calc(16px + \" + getNotchHeight(\"right\") + \")\"\n : \"16px\",\n };\n\n const listItemStyle = {\n paddingLeft: fullScreen\n ? \"calc(24px + \" + getNotchHeight(\"left\") + \")\"\n : \"24px\",\n paddingRight: fullScreen\n ? \"calc(24px + \" + getNotchHeight(\"right\") + \")\"\n : \"24px\",\n };\n\n if (loading)\n dialogContent = (\n \n \n
\n );\n\n if (error)\n dialogContent = (\n \n \n refetch({\n editorOffset: 0,\n editorLimit: 20,\n pendingEditorOffset: 0,\n pendingEditorLimit: 20,\n viewerOffset: 0,\n viewerLimit: 20,\n pendingViewerOffset: 0,\n pendingViewerLimit: 20,\n id: collection.id,\n })\n }\n error={error}\n />\n
\n );\n\n if (collection)\n dialogContent = (\n {\n if (\n event.target.scrollTop + event.target.clientHeight >=\n event.target.scrollHeight - 600\n )\n this.queryMore();\n }}\n >\n {\n if (online) {\n this.props.shareData.refetch();\n }\n }}\n />\n
} style={{ height: \"100%\", padding: \"0\" }}>\n {isRoleAtLeast(collection.myRole, \"ADMIN\") && (\n this.props.openInviteUser()}\n style={listItemStyle}\n >\n \n \n \n \n \n \n {t`Send an invite`}\n \n }\n />\n \n )}\n \n \n \n {t`Owner`}\n \n refetch()}\n privateCloud={process.env.REACT_APP_PRIVATE_CLOUD}\n >\n {({ data }) => (\n \n \n \n {this.getInitials(\n data ? data.name : collection.owner.name\n )}\n \n \n \n {this.props.userData.user.email ===\n (data?.email || collection.owner.email)\n ? t`You`\n : data\n ? data.name\n : collection.owner.name}\n \n }\n secondary={\n \n {this.props.userData.user.email ===\n ((data && data.email) || collection.owner.email)\n ? \"\"\n : data\n ? data.email\n : collection.owner.email}\n \n }\n />\n {this.props.userData.user.email ===\n ((data && data.email) || collection.owner.email) && (\n \n \n \n \n \n )}\n \n )}\n \n {isRoleAtLeast(collection.myRole, \"ADMIN\") &&\n collection.pendingTransfer && (\n refetch()}\n privateCloud={process.env.REACT_APP_PRIVATE_CLOUD}\n >\n {({ data }) => (\n \n \n \n {this.getInitials(\n data\n ? data.name\n : collection.pendingTransfer.recipient.name\n )}\n \n \n \n {this.props.userData.user.email ===\n (data?.email ||\n collection.pendingTransfer.recipient.email)\n ? t`You`\n : data\n ? data.name\n : collection.pendingTransfer.recipient.name}\n \n {\" (\" + t`pending` + \")\"}\n \n \n }\n secondary={\n \n {data\n ? data.email\n : collection.pendingTransfer.recipient\n .email}\n \n }\n />\n {(collection.myRole === \"EDITOR\" ||\n collection.myRole === \"OWNER\") && (\n \n {\n this.props.setMenuTarget(\n collection.pendingTransfer\n );\n this.props.openRevokeTransfer();\n }}\n size=\"large\"\n >\n \n \n \n )}\n \n )}\n \n )}\n
\n \n {((collection.admins && collection.admins[0]) ||\n (collection.pendingAdminShares &&\n collection.pendingAdminShares[0])) && (\n \n \n \n {t(adminsName || \"Admins\")}\n \n {collection.admins &&\n collection.admins[0] &&\n collection.admins.map((item) => (\n refetch()}\n privateCloud={process.env.REACT_APP_PRIVATE_CLOUD}\n >\n {({ data }) => (\n \n \n \n {this.getInitials(\n data ? data.name : item.name\n )}\n \n \n \n {this.props.userData.user.email ===\n ((data && data.email) || item.email)\n ? t`You`\n : (data && data.name) || item.name}\n \n }\n secondary={\n \n {this.props.userData.user.email ===\n ((data && data.email) || item.email)\n ? \"\"\n : (data && data.email) || item.email}\n \n }\n />\n {isRoleAtLeast(collection.myRole, \"ADMIN\") &&\n this.props.userData.user.email !==\n ((data && data.email) || item.email) && (\n \n {\n this.props.openMenu(\n event.currentTarget\n );\n this.props.setMenuTarget(item);\n this.props.setSelectedUser(\"editor\");\n }}\n size=\"large\"\n >\n \n \n \n )}\n \n )}\n \n ))}\n {collection.pendingAdminShares &&\n collection.pendingAdminShares[0] &&\n collection.pendingAdminShares.map((item) => (\n {\n refetch();\n }}\n privateCloud={process.env.REACT_APP_PRIVATE_CLOUD}\n >\n {({ data }) => (\n \n \n \n {this.getInitials(\n data ? data.name : item.recipient.name\n )}\n \n \n \n {data ? data.name : item.recipient.name}\n \n {\" (\" + t`pending` + \")\"}\n \n \n }\n secondary={\n \n {data ? data.email : item.recipient.email}\n \n }\n />\n {isRoleAtLeast(collection.myRole, \"ADMIN\") && (\n \n {\n this.props.setMenuTarget(item);\n this.props.setSelectedUser(\"editor\");\n this.props.openPendingMenu(\n event.currentTarget\n );\n }}\n size=\"large\"\n >\n \n \n \n )}\n \n )}\n \n ))}\n
\n \n )}\n {((collection.editors && collection.editors[0]) ||\n (collection.pendingEditorShares &&\n collection.pendingEditorShares[0])) && (\n \n \n \n {t(editorsName || \"Editors\")}\n \n {collection.editors &&\n collection.editors[0] &&\n collection.editors.map((item) => (\n refetch()}\n privateCloud={process.env.REACT_APP_PRIVATE_CLOUD}\n >\n {({ data }) => (\n \n \n \n {this.getInitials(\n data ? data.name : item.name\n )}\n \n \n \n {this.props.userData.user.email ===\n ((data && data.email) || item.email)\n ? t`You`\n : (data && data.name) || item.name}\n \n }\n secondary={\n \n {this.props.userData.user.email ===\n ((data && data.email) || item.email)\n ? \"\"\n : (data && data.email) || item.email}\n \n }\n />\n {isRoleAtLeast(collection.myRole, \"ADMIN\") &&\n this.props.userData.user.email !==\n ((data && data.email) || item.email) && (\n \n {\n this.props.openMenu(\n event.currentTarget\n );\n this.props.setMenuTarget(item);\n this.props.setSelectedUser(\"editor\");\n }}\n size=\"large\"\n >\n \n \n \n )}\n \n )}\n \n ))}\n
\n \n )}\n {((collection.viewers && collection.viewers[0]) ||\n (collection.pendingViewerShares &&\n collection.pendingViewerShares[0])) && (\n \n \n \n {t(viewersName || \"Viewers\")}\n \n {collection.viewers &&\n collection.viewers[0] &&\n collection.viewers.map((item) => (\n refetch()}\n privateCloud={process.env.REACT_APP_PRIVATE_CLOUD}\n >\n {({ data }) => (\n \n \n \n {this.getInitials(\n data ? data.name : item.name\n )}\n \n \n \n {this.props.userData.user.email ===\n ((data && data.email) || item.email)\n ? t`You`\n : (data && data.name) || item.name}\n \n }\n secondary={\n \n {this.props.userData.user.email ===\n ((data && data.email) || item.email)\n ? \"\"\n : (data && data.email) || item.email}\n \n }\n />\n {isRoleAtLeast(collection.myRole, \"ADMIN\") &&\n this.props.userData.user.email !==\n ((data && data.email) || item.email) && (\n \n {\n this.props.openMenu(\n event.currentTarget\n );\n this.props.setMenuTarget(item);\n this.props.setSelectedUser(\"viewer\");\n }}\n size=\"large\"\n >\n \n \n \n )}\n \n )}\n \n ))}\n {collection.pendingViewerShares &&\n collection.pendingViewerShares[0] &&\n collection.pendingViewerShares.map((item) => (\n {\n refetch();\n }}\n privateCloud={process.env.REACT_APP_PRIVATE_CLOUD}\n >\n {({ data }) => (\n \n \n \n {this.getInitials(\n data ? data.name : item.recipient.name\n )}\n \n \n \n {data ? data.name : item.recipient.name}\n \n {\" (\" + t`pending` + \")\"}\n \n \n }\n secondary={\n \n {data ? data.email : item.recipient.email}\n \n }\n />\n {isRoleAtLeast(collection.myRole, \"ADMIN\") && (\n \n {\n this.props.setMenuTarget(item);\n this.props.setSelectedUser(\"viewer\");\n this.props.openPendingMenu(\n event.currentTarget\n );\n }}\n size=\"large\"\n >\n \n \n \n )}\n \n )}\n \n ))}\n
\n \n )}\n \n {this.state.fetchMoreLoading && }\n \n );\n\n return dialogContent;\n }\n }\n);\n","import { graphql } from \"@apollo/react-hoc\";\nimport { isRoleAtLeast } from \"@igloocloud/igloosharedui\";\nimport Create from \"@mui/icons-material/Create\";\nimport Delete from \"@mui/icons-material/Delete\";\nimport Info from \"@mui/icons-material/Info\";\nimport MoreVert from \"@mui/icons-material/MoreVert\";\nimport Notifications from \"@mui/icons-material/Notifications\";\nimport NotificationsOff from \"@mui/icons-material/NotificationsOff\";\nimport RemoveCircle from \"@mui/icons-material/RemoveCircle\";\nimport Share from \"@mui/icons-material/Share\";\nimport ButtonBase from \"@mui/material/ButtonBase\";\nimport Divider from \"@mui/material/Divider\";\nimport IconButton from \"@mui/material/IconButton\";\nimport ListItemIcon from \"@mui/material/ListItemIcon\";\nimport Menu from \"@mui/material/Menu\";\nimport MenuItem from \"@mui/material/MenuItem\";\nimport Paper from \"@mui/material/Paper\";\nimport Toolbar from \"@mui/material/Toolbar\";\nimport Typography from \"@mui/material/Typography\";\nimport gql from \"graphql-tag\";\nimport React, { Component } from \"react\";\nimport { withTranslation } from \"react-i18next\";\nimport { Link } from \"react-router-dom\";\nimport CollectionInfo from \"./CollectionInfo\";\nimport CustomizeCollection from \"./CustomizeCollection\";\nimport DeleteCollection from \"./DeleteCollection\";\nimport LeaveCollection from \"./LeaveCollection\";\nimport ShareCollection from \"./ShareCollection\";\n\nconst {\n REACT_APP_SHOW_NOTIFICATIONS: showNotifications,\n REACT_APP_TEXT_ON_MAIN_BACKGROUND_COLOR: textOnBackgroundColor,\n REACT_APP_MAIN_BACKGROUND_COLOR: backgroundColor,\n REACT_APP_TEXT_ON_MAIN_BACKGROUND_COLOR: textColor,\n REACT_APP_ERROR_COLOR: errorColor,\n} = process.env;\n\nexport default graphql(\n gql`\n mutation ToggleQuietMode($id: ID!, $muted: Boolean) {\n updateCollection(id: $id, muted: $muted) {\n id\n muted\n }\n }\n `,\n {\n name: \"ToggleQuietMode\",\n }\n)(\n withTranslation()(\n class CollectionCard extends Component {\n constructor(props) {\n super(props);\n\n const importAll = (require) =>\n require.keys().reduce((acc, next) => {\n acc[next.replace(\"./\", \"\")] = require(next);\n return acc;\n }, {});\n\n this.images = Object.values(\n importAll(\n require.context(\n \"../../styles/assets/collectionCards\",\n false,\n /\\.(png|jpe?g|svg)$/\n )\n )\n );\n\n this.state = {\n deleteOpen: false,\n renameOpen: false,\n shareOpen: false,\n anchorEl: null,\n backStackIndex: 0,\n };\n }\n\n toggleFavorite = (favorite) =>\n this.props.ToggleFavorite({\n variables: {\n id: this.props.collection.id,\n favorite,\n },\n optimisticResponse: {\n __typename: \"Mutation\",\n collection: {\n id: this.props.collection.id,\n favorite,\n __typename: \"Collection\",\n },\n },\n });\n\n toggleQuietMode = (muted) =>\n this.props.ToggleQuietMode({\n variables: {\n id: this.props.collection.id,\n muted,\n },\n optimisticResponse: {\n __typename: \"Mutation\",\n collection: {\n id: this.props.collection.id,\n muted,\n __typename: \"Collection\",\n },\n },\n });\n\n handleBackButton = () => {\n if (this.state.backStackIndex === window.backStack) {\n this.handleMenuClose();\n }\n };\n\n handleMenuClose = () => {\n this.setState({ anchorEl: null });\n\n if (window.cordova) {\n this.setState({ backStackIndex: 0 });\n\n --window.backStack;\n\n document.removeEventListener(\"backbutton\", this.handleBackButton);\n }\n };\n\n render() {\n const { collection, t } = this.props;\n\n return (\n <>\n \n \n \n this.setState({ anchorEl: event.currentTarget })\n }\n style={{ zIndex: 10, color: textColor }}\n size=\"large\"\n >\n {/*makes the IconButton appear over the ButtonBase*/}\n \n \n
\n \n \n \n
\n \n \n {this.props.collection.name}\n \n