From 550a23af9be39db2506890ff26a318825d5de895 Mon Sep 17 00:00:00 2001 From: BetaHuhn Date: Tue, 5 Sep 2023 16:09:12 +0200 Subject: [PATCH] disable sharing --- src/components/ChatHeader.tsx | 17 ++++++++- src/components/ChatItem.tsx | 15 +++++++- src/components/ShareChatModal.tsx | 62 ++++++++++++++++++++++--------- src/layouts/Public.tsx | 13 ------- 4 files changed, 73 insertions(+), 34 deletions(-) diff --git a/src/components/ChatHeader.tsx b/src/components/ChatHeader.tsx index 19944b6..38d2a62 100644 --- a/src/components/ChatHeader.tsx +++ b/src/components/ChatHeader.tsx @@ -1,5 +1,5 @@ import { ActionIcon, Box, Flex, Header, TextInput, Tooltip, useMantineTheme } from "@mantine/core"; -import { IconAdjustments, IconInfoCircle } from "@tabler/icons-react"; +import { IconAdjustments, IconInfoCircle, IconShare2, IconWorld } from "@tabler/icons-react"; import { EditChatModal } from "./EditChatModal"; import { Chat, detaDB } from "../db"; import { useEffect, useRef, useState } from "react"; @@ -93,7 +93,20 @@ export function ChatHeader({ readOnly = false }: { readOnly?: boolean}) { }, })} > - + + + + {chat!.shared && !readOnly ? ( + <> + + ({ background: theme.colors.blue[6], borderRadius: '100%' })} pos="absolute" top={8} right={8}> + + ) : ( + + )} + + + {!readOnly ? ( <> diff --git a/src/components/ChatItem.tsx b/src/components/ChatItem.tsx index 52c769f..b082ba8 100644 --- a/src/components/ChatItem.tsx +++ b/src/components/ChatItem.tsx @@ -1,5 +1,5 @@ import { ActionIcon, Flex, Menu, useMantineTheme } from "@mantine/core"; -import { IconDotsVertical, IconMessages } from "@tabler/icons-react"; +import { IconDotsVertical, IconMessages, IconWorld } from "@tabler/icons-react"; import { Link } from "@tanstack/react-location"; import { DeleteChatModal } from "./DeleteChatModal"; import { EditChatModal } from "./EditChatModal"; @@ -7,6 +7,7 @@ import { MainLink } from "./MainLink"; import { useHover } from "@mantine/hooks"; import { Chat } from "../db"; import { useIncognitoMode } from "../hooks/contexts"; +import { ShareChatModal } from "./ShareChatModal"; export function ChatItem({ chat, active = false }: { chat: Chat, active?: boolean }) { const { hovered, ref } = useHover(); @@ -18,6 +19,7 @@ export function ChatItem({ chat, active = false }: { chat: Chat, active?: boolea ref={ref} key={chat.key} className={active ? "active" : undefined} + align='center' sx={(theme) => ({ marginTop: 1, "&:hover, &.active": { @@ -42,6 +44,12 @@ export function ChatItem({ chat, active = false }: { chat: Chat, active?: boolea label={chat.description} /> + + {chat.shared && !hovered && ( + + + + )} {hovered && ( @@ -52,6 +60,11 @@ export function ChatItem({ chat, active = false }: { chat: Chat, active?: boolea )} + {chat.shared && ( + + Share + + )} Edit diff --git a/src/components/ShareChatModal.tsx b/src/components/ShareChatModal.tsx index 6c66d61..7203638 100644 --- a/src/components/ShareChatModal.tsx +++ b/src/components/ShareChatModal.tsx @@ -1,24 +1,28 @@ -import { ActionIcon, Button, Input, Modal, Stack, Text, Tooltip } from "@mantine/core"; +import { Button, Input, Modal, Stack, Text } from "@mantine/core"; import { useDisclosure } from "@mantine/hooks"; import { notifications } from "@mantine/notifications"; -import { IconShare2 } from "@tabler/icons-react"; -import { useState } from "react"; +import { ReactElement, cloneElement, useState } from "react"; import { Chat, detaDB } from "../db"; -import { useChat } from "../hooks/contexts"; +import { useChat, useChats } from "../hooks/contexts"; -export function ShareChatModal({ chat }: { chat: Chat }) { +export function ShareChatModal({ children, chat, readOnly }: { children: ReactElement, chat: Chat, readOnly?: boolean }) { const [opened, { open, close }] = useDisclosure(false); - const [submitting, setSubmitting] = useState(false); const [url, setUrl] = useState(null); const { setChat } = useChat() + const { setChats } = useChats() const handleClick = async () => { if (!chat.shared) { - setSubmitting(true) await detaDB.chats.update({ shared: true }, chat.key) setChat(current => ({ ...(current as unknown as Chat), shared: true })) - setSubmitting(false) + setChats(current => (current || []).map(item => { + if (item.key === chat.key) { + return { ...item, shared: true }; + } + + return item; + })) notifications.show({ title: "Shared!", @@ -43,23 +47,45 @@ export function ShareChatModal({ chat }: { chat: Chat }) { close() } + const handleDisable = async () => { + await detaDB.chats.update({ shared: false }, chat.key) + setChat(current => ({ ...(current as unknown as Chat), shared: false })) + setChats(current => (current || []).map(item => { + if (item.key === chat.key) { + return { ...item, shared: false }; + } + + return item; + })) + + notifications.show({ + title: "Disabled!", + color: "green", + message: "Chat is now private.", + }) + + close() + } + return ( <> - + {cloneElement(children, { onClick: handleClick })} + Use this URL to share this chat with others: - + + + {!readOnly && ( + + )} + - - - - - - ); } diff --git a/src/layouts/Public.tsx b/src/layouts/Public.tsx index 87fb887..1d0fb4b 100644 --- a/src/layouts/Public.tsx +++ b/src/layouts/Public.tsx @@ -1,11 +1,7 @@ import { AppShell, - Burger, - MediaQuery, useMantineColorScheme, - useMantineTheme, } from "@mantine/core"; -import { useRouter } from "@tanstack/react-location"; import { useEffect, useState } from "react"; import { Chat } from "../db"; import { usePublicChatId } from "../hooks/useChatId"; @@ -14,14 +10,9 @@ import { ChatHeader } from "../components/ChatHeader"; import { useLocalStorage } from "@mantine/hooks"; export function PublicLayout({ children }: { children: React.ReactNode }) { - const theme = useMantineTheme(); - const router = useRouter(); - const { colorScheme } = useMantineColorScheme(); const chatId = usePublicChatId(); - const [opened, setOpened] = useState(false); - const [incognitoMode, setIncognitoMode] = useLocalStorage({ key: 'incognito-mode', defaultValue: false, getInitialValueInEffect: false }); @@ -49,10 +40,6 @@ export function PublicLayout({ children }: { children: React.ReactNode }) { } }, [chatId]); - useEffect(() => { - setOpened(false); - }, [router.state.location]); - return (