mokhtar/shellphone.app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reformat with prettier with semicolons and tabs

Browse Source
This commit is contained in:
m5r
2021-07-31 23:57:43 +08:00
parent fc4278ca7b
commit 079241ddb0
80 changed files with 1187 additions and 1270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
app/messages/components/conversation.tsx
View File

@ -1,37 +1,37 @@
import { Suspense, useEffect, useRef } from "react"
import { useRouter } from "blitz"
import clsx from "clsx"
import { Suspense, useEffect, useRef } from "react";
import { useRouter } from "blitz";
import clsx from "clsx";
import { Direction } from "../../../db"
import useConversation from "../hooks/use-conversation"
import NewMessageArea from "./new-message-area"
import { Direction } from "../../../db";
import useConversation from "../hooks/use-conversation";
import NewMessageArea from "./new-message-area";
export default function Conversation() {
const router = useRouter()
const conversation = useConversation(router.params.recipient)[0]
const messagesListRef = useRef<HTMLUListElement>(null)
const router = useRouter();
const conversation = useConversation(router.params.recipient)[0];
const messagesListRef = useRef<HTMLUListElement>(null);
useEffect(() => {
messagesListRef.current?.querySelector("li:last-child")?.scrollIntoView()
}, [conversation, messagesListRef])
messagesListRef.current?.querySelector("li:last-child")?.scrollIntoView();
}, [conversation, messagesListRef]);
return (
<>
<div className="flex flex-col space-y-6 p-6 pt-12 pb-16">
<ul ref={messagesListRef}>
{conversation.map((message, index) => {
const isOutbound = message.direction === Direction.Outbound
const nextMessage = conversation![index + 1]
const previousMessage = conversation![index - 1]
const isSameNext = message.from === nextMessage?.from
const isSamePrevious = message.from === previousMessage?.from
const isOutbound = message.direction === Direction.Outbound;
const nextMessage = conversation![index + 1];
const previousMessage = conversation![index - 1];
const isSameNext = message.from === nextMessage?.from;
const isSamePrevious = message.from === previousMessage?.from;
const differenceInMinutes = previousMessage
? (new Date(message.sentAt).getTime() -
new Date(previousMessage.sentAt).getTime()) /
1000 /
60
: 0
const isTooLate = differenceInMinutes > 15
: 0;
const isTooLate = differenceInMinutes > 15;
return (
<li key={message.id}>
{(!isSamePrevious || isTooLate) && (
@ -70,7 +70,7 @@ export default function Conversation() {
</span>
</div>
</li>
)
);
})}
</ul>
</div>
@ -78,5 +78,5 @@ export default function Conversation() {
<NewMessageArea />
</Suspense>
</>
)
);
}

14
app/messages/components/conversations-list.tsx
View File

@ -1,18 +1,18 @@
import { Link, useQuery } from "blitz"
import { Link, useQuery } from "blitz";
import getConversationsQuery from "../queries/get-conversations"
import getConversationsQuery from "../queries/get-conversations";
export default function ConversationsList() {
const conversations = useQuery(getConversationsQuery, {})[0]
const conversations = useQuery(getConversationsQuery, {})[0];
if (Object.keys(conversations).length === 0) {
return <div>empty state</div>
return <div>empty state</div>;
}
return (
<ul className="divide-y">
{Object.entries(conversations).map(([recipient, messages]) => {
const lastMessage = messages[messages.length - 1]!
const lastMessage = messages[messages.length - 1]!;
return (
<li key={recipient} className="py-2">
<Link href={`/messages/${encodeURIComponent(recipient)}`}>
@ -27,8 +27,8 @@ export default function ConversationsList() {
</a>
</Link>
</li>
)
);
})}
</ul>
)
);
}

68
app/messages/components/new-message-area.tsx
View File

@ -1,40 +1,40 @@
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faPaperPlane } from "@fortawesome/pro-regular-svg-icons"
import { useForm } from "react-hook-form"
import { useMutation, useQuery, useRouter } from "blitz"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPaperPlane } from "@fortawesome/pro-regular-svg-icons";
import { useForm } from "react-hook-form";
import { useMutation, useQuery, useRouter } from "blitz";
import sendMessage from "../mutations/send-message"
import { Direction, Message, MessageStatus } from "../../../db"
import getConversationsQuery from "../queries/get-conversations"
import useCurrentCustomer from "../../core/hooks/use-current-customer"
import useCustomerPhoneNumber from "../../core/hooks/use-customer-phone-number"
import sendMessage from "../mutations/send-message";
import { Direction, Message, MessageStatus } from "../../../db";
import getConversationsQuery from "../queries/get-conversations";
import useCurrentCustomer from "../../core/hooks/use-current-customer";
import useCustomerPhoneNumber from "../../core/hooks/use-customer-phone-number";
type Form = {
content: string
}
content: string;
};
export default function NewMessageArea() {
const router = useRouter()
const recipient = router.params.recipient
const { customer } = useCurrentCustomer()
const phoneNumber = useCustomerPhoneNumber()
const sendMessageMutation = useMutation(sendMessage)[0]
const router = useRouter();
const recipient = router.params.recipient;
const { customer } = useCurrentCustomer();
const phoneNumber = useCustomerPhoneNumber();
const sendMessageMutation = useMutation(sendMessage)[0];
const { setQueryData: setConversationsQueryData, refetch: refetchConversations } = useQuery(
getConversationsQuery,
{}
)[1]
)[1];
const {
register,
handleSubmit,
setValue,
formState: { isSubmitting },
} = useForm<Form>()
} = useForm<Form>();
const onSubmit = handleSubmit(async ({ content }) => {
if (isSubmitting) {
return
return;
}
const id = uuidv4()
const id = uuidv4();
const message: Message = {
id,
customerId: customer!.id,
@ -45,24 +45,24 @@ export default function NewMessageArea() {
direction: Direction.Outbound,
status: MessageStatus.Queued,
sentAt: new Date(),
}
};
await setConversationsQueryData(
(conversations) => {
const nextConversations = { ...conversations }
const nextConversations = { ...conversations };
if (!nextConversations[recipient]) {
nextConversations[recipient] = []
nextConversations[recipient] = [];
}
nextConversations[recipient] = [...nextConversations[recipient]!, message]
return nextConversations
nextConversations[recipient] = [...nextConversations[recipient]!, message];
return nextConversations;
},
{ refetch: false }
)
setValue("content", "")
await sendMessageMutation({ to: recipient, content })
await refetchConversations({ cancelRefetch: true })
})
);
setValue("content", "");
await sendMessageMutation({ to: recipient, content });
await refetchConversations({ cancelRefetch: true });
});
return (
<form
@ -82,13 +82,13 @@ export default function NewMessageArea() {
<FontAwesomeIcon size="2x" className="h-8 w-8 pl-1 pr-2" icon={faPaperPlane} />
</button>
</form>
)
);
}
function uuidv4() {
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
const r = (Math.random() * 16) | 0,
v = c == "x" ? r : (r & 0x3) | 0x8
return v.toString(16)
})
v = c == "x" ? r : (r & 0x3) | 0x8;
return v.toString(16);
});
}