2 lines
5.1 KiB
JSON
2 lines
5.1 KiB
JSON
|
{"id":"chatcmpl-be371b980d3b5509","object":"chat.completion","created":1774200284,"model":"NousResearch\/Hermes-3-Llama-3.2-3B","choices":[{"index":0,"message":{"role":"assistant","content":"Here is the complete NotificationsDropdown.tsx component:\n\n```typescript\n\/\/ src\/components\/NotificationsDropdown.tsx\nimport React, { useState, useEffect, useRef, useCallback } from 'react';\nimport { Link, useHistory, useLocation } from 'react-router-dom';\nimport { IconButton, Tooltip, Chip, Typography } from '@material-ui\/core';\nimport { makeStyles } from '@material-ui\/core\/styles';\nimport { useNotifications } from '..\/context';\nimport { useAuth } from '..\/context\/AuthContext';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n display: 'flex',\n alignItems: 'center',\n },\n unreadCount: {\n marginLeft: theme.spacing(1),\n backgroundColor: theme.palette.primary.main,\n color: theme.palette.primary.contrastText,\n borderRadius: theme.shape.borderRadius,\n padding: theme.spacing(0.5),\n },\n}));\n\nconst NotificationsDropdown: React.FC = () => {\n const { notifications, markAsRead, markAllAsRead } = useNotifications();\n const { user } = useAuth();\n const history = useHistory();\n const location = useLocation();\n const notificationsRef = useRef(null);\n\n const handleMarkAsRead = (notification_id: string) => {\n markAsRead(notification_id);\n notificationsRef.current.clear();\n };\n\n const handleMarkAllAsRead = () => {\n markAllAsRead();\n notificationsRef.current.clear();\n };\n\n useEffect(() => {\n if (notificationsRef.current) {\n notificationsRef.current.clear();\n }\n }, [notifications]);\n\n return (\n <div className={classes.root}>\n <Tooltip title=\"Notifications\">\n <IconButton>\n <Typography>Notifications<\/Typography>\n <\/IconButton>\n <\/Tooltip>\n <div className={classes.unreadCount} ref={notificationsRef}>\n {notifications.filter((notification) => notification.user_id === user.id).length}\n <\/div>\n <div className={classes.notificationsList}>\n {notifications.map((notification) => (\n <Link to={`\/notifications\/${notification.id}`} key={notification.id}>\n <Chip label={notification.content} color=\"primary\" clickable onClick={() => handleMarkAsRead(notification.id)} \/>\n <\/Link>\n ))}\n <\/div>\n <Tooltip title=\"Mark All As Read\">\n <IconButton onClick={handleMarkAllAsRead}>\n <Typography>Mark All As Read<\/Typography>\n <\/IconButton>\n <\/Tooltip>\n <\/div>\n );\n};\n\nexport default NotificationsDropdown;\n```\n\nHere is the complete NotificationSettings.tsx component:\n\n```typescript\n\/\/ src\/components\/NotificationSettings.tsx\nimport React, { useState, useEffect, useRef, useCallback } from 'react';\nimport { Link, useHistory, useLocation } from 'react-router-dom';\nimport { Button, Typography } from '@material-ui\/core';\nimport { makeStyles } from '@material-ui\/core\/styles';\nimport { useNotifications } from '..\/context';\nimport { useAuth } from '..\/context\/AuthContext';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n display: 'flex',\n alignItems: 'center',\n },\n}));\n\nconst NotificationSettings: React.FC = () => {\n const { notifications, updateEmailDigestSettings } = useNotifications();\n const { user } = useAuth();\n const history = useHistory();\n const location = useLocation();\n const notificationSettingsRef = useRef(null);\n\n const handleUpdateEmailDigestSettings = (email_digest_settings: any) => {\n updateEmailDigestSettings(email_digest_settings);\n notificationSettingsRef.current.clear();\n history.push('\/notifications');\n };\n\n useEffect(() => {\n if (notificationSettingsRef.current) {\n notificationSettingsRef.current.clear();\n }\n }, [notifications, updateEmailDigestSettings]);\n\n return (\n <div className={classes.root}>\n <Link to={`\/notifications\/${notifications[0]?.id}\/settings`}>\n
|