local cache
This commit is contained in:
parent
0760fa8f41
commit
4aa646ab43
@ -26,7 +26,7 @@ type Form = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const BillingPlans: FunctionComponent<Props> = ({ activePlanId = FREE.id }) => {
|
const BillingPlans: FunctionComponent<Props> = ({ activePlanId = FREE.id }) => {
|
||||||
const { userProfile } = useUser();
|
const { customer } = useUser();
|
||||||
const { subscribe, changePlan } = useSubscription();
|
const { subscribe, changePlan } = useSubscription();
|
||||||
const [isConfirmationModalOpen, setIsConfirmationModalOpen] = useState(
|
const [isConfirmationModalOpen, setIsConfirmationModalOpen] = useState(
|
||||||
false,
|
false,
|
||||||
@ -78,8 +78,8 @@ const BillingPlans: FunctionComponent<Props> = ({ activePlanId = FREE.id }) => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const email = userProfile!.email!;
|
const email = customer!.email!;
|
||||||
const userId = userProfile!.id;
|
const userId = customer!.id;
|
||||||
const selectedPlanId = selectedPlan.id;
|
const selectedPlanId = selectedPlan.id;
|
||||||
|
|
||||||
const isMovingToPaidPlan =
|
const isMovingToPaidPlan =
|
||||||
|
158
src/components/connected-layout.tsx
Normal file
158
src/components/connected-layout.tsx
Normal file
@ -0,0 +1,158 @@
|
|||||||
|
import type { FunctionComponent } from "react";
|
||||||
|
import { useEffect } from "react";
|
||||||
|
import { useRouter } from "next/router";
|
||||||
|
import { useAtom } from "jotai";
|
||||||
|
|
||||||
|
import { conversationsAtom, customerAtom, customerPhoneNumberAtom, messagesAtom, phoneCallsAtom } from "../state";
|
||||||
|
import supabase from "../supabase/client";
|
||||||
|
import type { Customer } from "../database/customer";
|
||||||
|
import { PhoneNumber } from "../database/phone-number";
|
||||||
|
import { Message } from "../database/message";
|
||||||
|
import { PhoneCall } from "../database/phone-call";
|
||||||
|
|
||||||
|
type Props = {}
|
||||||
|
|
||||||
|
const ConnectedLayout: FunctionComponent<Props> = ({
|
||||||
|
children,
|
||||||
|
}) => {
|
||||||
|
useRequireOnboarding();
|
||||||
|
const { isInitialized } = useInitializeState();
|
||||||
|
|
||||||
|
if (!isInitialized) {
|
||||||
|
return (
|
||||||
|
<>Loading...</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{children}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ConnectedLayout;
|
||||||
|
|
||||||
|
function useRequireOnboarding() {
|
||||||
|
const router = useRouter();
|
||||||
|
const [customer] = useAtom(customerAtom);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
(async () => {
|
||||||
|
if (!customer) {
|
||||||
|
// still loading
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!customer.accountSid || !customer.authToken) {
|
||||||
|
return router.push("/welcome/step-two");
|
||||||
|
}
|
||||||
|
|
||||||
|
const phoneNumberResponse = await supabase
|
||||||
|
.from<PhoneNumber>("phone-number")
|
||||||
|
.select("*")
|
||||||
|
.eq("customerId", customer.id)
|
||||||
|
.single();
|
||||||
|
if (phoneNumberResponse.error) {
|
||||||
|
return router.push("/welcome/step-three");
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
}, [customer, router]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function useInitializeState() {
|
||||||
|
useInitializeCustomer();
|
||||||
|
useInitializeMessages();
|
||||||
|
useInitializePhoneCalls();
|
||||||
|
|
||||||
|
const customer = useAtom(customerAtom)[0];
|
||||||
|
const messages = useAtom(messagesAtom)[0];
|
||||||
|
const phoneCalls = useAtom(phoneCallsAtom)[0];
|
||||||
|
|
||||||
|
return {
|
||||||
|
isInitialized: customer !== null && messages !== null && phoneCalls !== null,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function useInitializeCustomer() {
|
||||||
|
const router = useRouter();
|
||||||
|
const setCustomer = useAtom(customerAtom)[1];
|
||||||
|
const setCustomerPhoneNumber = useAtom(customerPhoneNumberAtom)[1];
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
(async () => {
|
||||||
|
const redirectTo = `/auth/sign-in?redirectTo=${router.pathname}`;
|
||||||
|
// TODO: also redirect when no cookie
|
||||||
|
try {
|
||||||
|
await supabase.auth.refreshSession();
|
||||||
|
} catch (error) {
|
||||||
|
console.error("session error", error);
|
||||||
|
return router.push(redirectTo);
|
||||||
|
}
|
||||||
|
const user = supabase.auth.user();
|
||||||
|
if (!user) {
|
||||||
|
return router.push(redirectTo);
|
||||||
|
}
|
||||||
|
|
||||||
|
const customerId = user.id;
|
||||||
|
const customerResponse = await supabase
|
||||||
|
.from<Customer>("customer")
|
||||||
|
.select("*")
|
||||||
|
.eq("id", customerId)
|
||||||
|
.single();
|
||||||
|
if (customerResponse.error) throw customerResponse.error;
|
||||||
|
|
||||||
|
const customer = customerResponse.data;
|
||||||
|
setCustomer(customer);
|
||||||
|
|
||||||
|
const customerPhoneNumberResponse = await supabase
|
||||||
|
.from<PhoneNumber>("phone-number")
|
||||||
|
.select("*")
|
||||||
|
.eq("customerId", customerId)
|
||||||
|
.single();
|
||||||
|
if (customerPhoneNumberResponse.error) throw customerPhoneNumberResponse.error;
|
||||||
|
setCustomerPhoneNumber(customerPhoneNumberResponse.data);
|
||||||
|
})();
|
||||||
|
}, []);
|
||||||
|
}
|
||||||
|
|
||||||
|
function useInitializeMessages() {
|
||||||
|
const customer = useAtom(customerAtom)[0];
|
||||||
|
const setMessages = useAtom(messagesAtom)[1];
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
(async () => {
|
||||||
|
if (!customer) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const messagesResponse = await supabase
|
||||||
|
.from<Message>("message")
|
||||||
|
.select("*")
|
||||||
|
.eq("customerId", customer.id);
|
||||||
|
if (messagesResponse.error) throw messagesResponse.error;
|
||||||
|
setMessages(messagesResponse.data);
|
||||||
|
})();
|
||||||
|
}, [customer, setMessages]);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function useInitializePhoneCalls() {
|
||||||
|
const customer = useAtom(customerAtom)[0];
|
||||||
|
const setPhoneCalls = useAtom(phoneCallsAtom)[1];
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
(async () => {
|
||||||
|
if (!customer) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const phoneCallsResponse = await supabase
|
||||||
|
.from<PhoneCall>("phone-call")
|
||||||
|
.select("*")
|
||||||
|
.eq("customerId", customer.id);
|
||||||
|
if (phoneCallsResponse.error) throw phoneCallsResponse.error;
|
||||||
|
setPhoneCalls(phoneCallsResponse.data);
|
||||||
|
})();
|
||||||
|
}, [customer, setPhoneCalls]);
|
||||||
|
}
|
@ -8,7 +8,7 @@ import Avatar from "../avatar";
|
|||||||
import useUser from "../../hooks/use-user";
|
import useUser from "../../hooks/use-user";
|
||||||
|
|
||||||
export default function Header() {
|
export default function Header() {
|
||||||
const { userProfile } = useUser();
|
const { customer } = useUser();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header
|
<header
|
||||||
@ -35,7 +35,7 @@ export default function Header() {
|
|||||||
aria-haspopup="true"
|
aria-haspopup="true"
|
||||||
>
|
>
|
||||||
<Avatar
|
<Avatar
|
||||||
name={userProfile?.email ?? "FSS"}
|
name={customer?.email ?? "FSS"}
|
||||||
/>
|
/>
|
||||||
</Menu.Button>
|
</Menu.Button>
|
||||||
|
|
||||||
|
@ -30,9 +30,9 @@ const ProfileInformations: FunctionComponent = () => {
|
|||||||
const [errorMessage, setErrorMessage] = useState("");
|
const [errorMessage, setErrorMessage] = useState("");
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setValue("name", user.userProfile?.user_metadata.name ?? "");
|
setValue("name", user.customer?.name ?? "");
|
||||||
setValue("email", user.userProfile?.email ?? "");
|
setValue("email", user.customer?.email ?? "");
|
||||||
}, [setValue, user.userProfile]);
|
}, [setValue, user.customer]);
|
||||||
|
|
||||||
const onSubmit = handleSubmit(async ({ name, email }) => {
|
const onSubmit = handleSubmit(async ({ name, email }) => {
|
||||||
if (isSubmitting) {
|
if (isSubmitting) {
|
||||||
|
@ -32,8 +32,6 @@ export async function createCustomer({ id, email, name }: CreateCustomerParams):
|
|||||||
|
|
||||||
if (error) throw error;
|
if (error) throw error;
|
||||||
|
|
||||||
console.log("data", data);
|
|
||||||
|
|
||||||
return data![0];
|
return data![0];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -15,6 +15,7 @@ export default function useAuth() {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const { data } = supabase.auth.onAuthStateChange(async (event, session) => {
|
const { data } = supabase.auth.onAuthStateChange(async (event, session) => {
|
||||||
|
console.log("event", event);
|
||||||
if (["SIGNED_IN", "SIGNED_OUT"].includes(event)) {
|
if (["SIGNED_IN", "SIGNED_OUT"].includes(event)) {
|
||||||
await axios.post("/api/auth/session", { event, session });
|
await axios.post("/api/auth/session", { event, session });
|
||||||
|
|
||||||
|
@ -1,34 +1,39 @@
|
|||||||
import { useMutation, useQuery, useQueryClient } from "react-query";
|
import { useMutation, useQuery, useQueryClient } from "react-query";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
|
import { useAtom } from "jotai";
|
||||||
|
|
||||||
import type { Message } from "../database/message";
|
import type { Message } from "../database/message";
|
||||||
import useUser from "./use-user";
|
import useUser from "./use-user";
|
||||||
|
import { conversationsAtom, customerAtom, customerPhoneNumberAtom } from "../state";
|
||||||
|
import { useEffect } from "react";
|
||||||
|
|
||||||
type UseConversationParams = {
|
export default function useConversation(recipient: string) {
|
||||||
initialData?: Message[];
|
const customer = useAtom(customerAtom)[0];
|
||||||
recipient: string;
|
const customerPhoneNumber = useAtom(customerPhoneNumberAtom)[0];
|
||||||
}
|
|
||||||
|
|
||||||
export default function useConversation({
|
|
||||||
initialData,
|
|
||||||
recipient,
|
|
||||||
}: UseConversationParams) {
|
|
||||||
const user = useUser();
|
|
||||||
const getConversationUrl = `/api/conversation/${encodeURIComponent(recipient)}`;
|
const getConversationUrl = `/api/conversation/${encodeURIComponent(recipient)}`;
|
||||||
const fetcher = async () => {
|
const fetcher = async () => {
|
||||||
const { data } = await axios.get<Message[]>(getConversationUrl);
|
const { data } = await axios.get<Message[]>(getConversationUrl);
|
||||||
return data;
|
return data;
|
||||||
};
|
};
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
const getConversationQuery = useQuery<Message[]>(
|
const [conversations] = useAtom(conversationsAtom);
|
||||||
|
const getConversationQuery = useQuery<Message[] | null>(
|
||||||
getConversationUrl,
|
getConversationUrl,
|
||||||
fetcher,
|
fetcher,
|
||||||
{
|
{
|
||||||
initialData,
|
initialData: null,
|
||||||
refetchInterval: false,
|
refetchInterval: false,
|
||||||
refetchOnWindowFocus: false,
|
refetchOnWindowFocus: false,
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const conversation = conversations[recipient];
|
||||||
|
if (getConversationQuery.data?.length === 0) {
|
||||||
|
queryClient.setQueryData(getConversationUrl, conversation);
|
||||||
|
}
|
||||||
|
}, [queryClient, getConversationQuery.data, conversations, recipient, getConversationUrl]);
|
||||||
|
|
||||||
const sendMessage = useMutation(
|
const sendMessage = useMutation(
|
||||||
(sms: Pick<Message, "to" | "content">) => axios.post(`/api/conversation/${sms.to}/send-message`, sms, { withCredentials: true }),
|
(sms: Pick<Message, "to" | "content">) => axios.post(`/api/conversation/${sms.to}/send-message`, sms, { withCredentials: true }),
|
||||||
{
|
{
|
||||||
@ -41,8 +46,8 @@ export default function useConversation({
|
|||||||
...previousMessages,
|
...previousMessages,
|
||||||
{
|
{
|
||||||
id: "", // TODO: somehow generate an id
|
id: "", // TODO: somehow generate an id
|
||||||
from: "", // TODO: get user's phone number
|
from: customerPhoneNumber!.phoneNumber,
|
||||||
customerId: user.userProfile!.id,
|
customerId: customer!.id,
|
||||||
sentAt: new Date().toISOString(),
|
sentAt: new Date().toISOString(),
|
||||||
direction: "outbound",
|
direction: "outbound",
|
||||||
status: "queued",
|
status: "queued",
|
||||||
@ -54,12 +59,6 @@ export default function useConversation({
|
|||||||
|
|
||||||
return { previousMessages };
|
return { previousMessages };
|
||||||
},
|
},
|
||||||
onError: (error, variables, context) => {
|
|
||||||
if (context?.previousMessages) {
|
|
||||||
queryClient.setQueryData<Message[]>(getConversationUrl, context.previousMessages);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onSettled: () => queryClient.invalidateQueries(getConversationUrl),
|
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -1,11 +1,12 @@
|
|||||||
import { useContext } from "react";
|
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import type { User, UserAttributes } from "@supabase/supabase-js";
|
import type { User, UserAttributes } from "@supabase/supabase-js";
|
||||||
|
|
||||||
import { SessionContext } from "../session-context";
|
|
||||||
import appLogger from "../../lib/logger";
|
import appLogger from "../../lib/logger";
|
||||||
import supabase from "../supabase/client";
|
import supabase from "../supabase/client";
|
||||||
|
import { useAtom } from "jotai";
|
||||||
|
import { customerAtom } from "../state";
|
||||||
|
import { Customer } from "../database/customer";
|
||||||
|
|
||||||
const logger = appLogger.child({ module: "useUser" });
|
const logger = appLogger.child({ module: "useUser" });
|
||||||
|
|
||||||
@ -16,28 +17,27 @@ type UseUser = {
|
|||||||
| {
|
| {
|
||||||
isLoading: true;
|
isLoading: true;
|
||||||
error: null;
|
error: null;
|
||||||
userProfile: null;
|
customer: null;
|
||||||
}
|
}
|
||||||
| {
|
| {
|
||||||
isLoading: false;
|
isLoading: false;
|
||||||
error: Error;
|
error: Error;
|
||||||
userProfile: User | null;
|
customer: Customer | null;
|
||||||
}
|
}
|
||||||
| {
|
| {
|
||||||
isLoading: false;
|
isLoading: false;
|
||||||
error: null;
|
error: null;
|
||||||
userProfile: User;
|
customer: Customer;
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
export default function useUser(): UseUser {
|
export default function useUser(): UseUser {
|
||||||
const session = useContext(SessionContext);
|
const [customer] = useAtom(customerAtom);
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
return {
|
return {
|
||||||
isLoading: session.state.user === null,
|
isLoading: customer === null,
|
||||||
userProfile: session.state.user,
|
customer,
|
||||||
error: session.state.error,
|
|
||||||
async deleteUser() {
|
async deleteUser() {
|
||||||
await axios.post("/api/user/delete-user", null, {
|
await axios.post("/api/user/delete-user", null, {
|
||||||
withCredentials: true,
|
withCredentials: true,
|
||||||
|
@ -5,7 +5,6 @@ import { QueryClient, QueryClientProvider } from "react-query";
|
|||||||
import { Hydrate } from "react-query/hydration";
|
import { Hydrate } from "react-query/hydration";
|
||||||
|
|
||||||
import { pageTitle } from "./_document";
|
import { pageTitle } from "./_document";
|
||||||
import { SessionProvider } from "../session-context";
|
|
||||||
|
|
||||||
import "../fonts.css";
|
import "../fonts.css";
|
||||||
import "../tailwind.css";
|
import "../tailwind.css";
|
||||||
@ -21,7 +20,6 @@ const NextApp = (props: AppProps) => {
|
|||||||
return (
|
return (
|
||||||
<QueryClientProvider client={queryClientRef.current}>
|
<QueryClientProvider client={queryClientRef.current}>
|
||||||
<Hydrate state={pageProps.dehydratedState}>
|
<Hydrate state={pageProps.dehydratedState}>
|
||||||
<SessionProvider user={pageProps.user}>
|
|
||||||
<Head>
|
<Head>
|
||||||
<meta
|
<meta
|
||||||
name="viewport"
|
name="viewport"
|
||||||
@ -30,7 +28,6 @@ const NextApp = (props: AppProps) => {
|
|||||||
<title>{pageTitle}</title>
|
<title>{pageTitle}</title>
|
||||||
</Head>
|
</Head>
|
||||||
<Component {...pageProps} />
|
<Component {...pageProps} />
|
||||||
</SessionProvider>
|
|
||||||
</Hydrate>
|
</Hydrate>
|
||||||
</QueryClientProvider>
|
</QueryClientProvider>
|
||||||
);
|
);
|
||||||
|
@ -1,9 +1,9 @@
|
|||||||
import Joi from "joi";
|
import Joi from "joi";
|
||||||
|
|
||||||
import { withApiAuthRequired } from "../../../../../lib/session-helpers";
|
import { withApiAuthRequired } from "../../../../lib/session-helpers";
|
||||||
import { findConversation } from "../../../../database/message";
|
import { findConversation } from "../../../database/message";
|
||||||
import type { ApiError } from "../../_types";
|
import type { ApiError } from "../_types";
|
||||||
import appLogger from "../../../../../lib/logger";
|
import appLogger from "../../../../lib/logger";
|
||||||
|
|
||||||
const logger = appLogger.child({ route: "/api/conversation" });
|
const logger = appLogger.child({ route: "/api/conversation" });
|
||||||
|
|
@ -1,24 +1,19 @@
|
|||||||
import type { InferGetServerSidePropsType, NextPage } from "next";
|
import type { NextPage } from "next";
|
||||||
|
|
||||||
import { withPageOnboardingRequired } from "../../lib/session-helpers";
|
|
||||||
import { findCustomerPhoneCalls } from "../database/phone-call";
|
|
||||||
import useUser from "../hooks/use-user";
|
|
||||||
import Layout from "../components/layout";
|
import Layout from "../components/layout";
|
||||||
|
import ConnectedLayout from "../components/connected-layout";
|
||||||
|
import { useAtom } from "jotai";
|
||||||
|
import { phoneCallsAtom } from "../state";
|
||||||
|
|
||||||
type Props = InferGetServerSidePropsType<typeof getServerSideProps>;
|
type Props = {};
|
||||||
|
|
||||||
const pageTitle = "Calls";
|
const pageTitle = "Calls";
|
||||||
|
|
||||||
const Calls: NextPage<Props> = ({ phoneCalls }) => {
|
const Calls: NextPage<Props> = () => {
|
||||||
const { userProfile } = useUser();
|
const phoneCalls = useAtom(phoneCallsAtom)[0] ?? [];
|
||||||
|
|
||||||
console.log("userProfile", userProfile);
|
|
||||||
|
|
||||||
if (!userProfile) {
|
|
||||||
return <Layout title={pageTitle}>Loading...</Layout>;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<ConnectedLayout>
|
||||||
<Layout title={pageTitle}>
|
<Layout title={pageTitle}>
|
||||||
<div className="flex flex-col space-y-6 p-6">
|
<div className="flex flex-col space-y-6 p-6">
|
||||||
<p>Calls page</p>
|
<p>Calls page</p>
|
||||||
@ -35,22 +30,8 @@ const Calls: NextPage<Props> = ({ phoneCalls }) => {
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
</ConnectedLayout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const getServerSideProps = withPageOnboardingRequired(
|
|
||||||
async ({ res }, user) => {
|
|
||||||
res.setHeader(
|
|
||||||
"Cache-Control",
|
|
||||||
"private, s-maxage=15, stale-while-revalidate=59",
|
|
||||||
);
|
|
||||||
|
|
||||||
const phoneCalls = await findCustomerPhoneCalls(user.id);
|
|
||||||
|
|
||||||
return {
|
|
||||||
props: { phoneCalls },
|
|
||||||
};
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
export default Calls;
|
export default Calls;
|
||||||
|
@ -7,21 +7,18 @@ import { faBackspace, faPhoneAlt as faPhone } from "@fortawesome/pro-solid-svg-i
|
|||||||
import { withPageOnboardingRequired } from "../../lib/session-helpers";
|
import { withPageOnboardingRequired } from "../../lib/session-helpers";
|
||||||
import Layout from "../components/layout";
|
import Layout from "../components/layout";
|
||||||
import useUser from "../hooks/use-user";
|
import useUser from "../hooks/use-user";
|
||||||
|
import ConnectedLayout from "../components/connected-layout";
|
||||||
|
|
||||||
type Props = InferGetServerSidePropsType<typeof getServerSideProps>;
|
type Props = {};
|
||||||
|
|
||||||
const pageTitle = "Keypad";
|
const pageTitle = "Keypad";
|
||||||
|
|
||||||
const Keypad: NextPage<Props> = () => {
|
const Keypad: NextPage<Props> = () => {
|
||||||
const { userProfile } = useUser();
|
|
||||||
const phoneNumber = useAtom(phoneNumberAtom)[0];
|
const phoneNumber = useAtom(phoneNumberAtom)[0];
|
||||||
const pressBackspace = useAtom(pressBackspaceAtom)[1];
|
const pressBackspace = useAtom(pressBackspaceAtom)[1];
|
||||||
|
|
||||||
if (!userProfile) {
|
|
||||||
return <Layout title={pageTitle}>Loading...</Layout>;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<ConnectedLayout>
|
||||||
<Layout title={pageTitle}>
|
<Layout title={pageTitle}>
|
||||||
<div className="w-96 h-full flex flex-col justify-around py-5 mx-auto text-center text-black bg-white">
|
<div className="w-96 h-full flex flex-col justify-around py-5 mx-auto text-center text-black bg-white">
|
||||||
<div className="h-16 text-3xl text-gray-700">
|
<div className="h-16 text-3xl text-gray-700">
|
||||||
@ -61,6 +58,7 @@ const Keypad: NextPage<Props> = () => {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
</ConnectedLayout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -118,13 +116,4 @@ const pressBackspaceAtom = atom(
|
|||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
export const getServerSideProps = withPageOnboardingRequired(({ res }) => {
|
|
||||||
res.setHeader(
|
|
||||||
"Cache-Control",
|
|
||||||
"private, s-maxage=15, stale-while-revalidate=59",
|
|
||||||
);
|
|
||||||
|
|
||||||
return { props: {} };
|
|
||||||
});
|
|
||||||
|
|
||||||
export default Keypad;
|
export default Keypad;
|
||||||
|
@ -10,31 +10,33 @@ import {
|
|||||||
import clsx from "clsx";
|
import clsx from "clsx";
|
||||||
import { useForm } from "react-hook-form";
|
import { useForm } from "react-hook-form";
|
||||||
|
|
||||||
import { withPageOnboardingRequired } from "../../../lib/session-helpers";
|
|
||||||
import type { Message } from "../../database/message";
|
import type { Message } from "../../database/message";
|
||||||
import { findConversation } from "../../database/message";
|
|
||||||
import supabase from "../../supabase/client";
|
import supabase from "../../supabase/client";
|
||||||
import useUser from "../../hooks/use-user";
|
import useUser from "../../hooks/use-user";
|
||||||
import useConversation from "../../hooks/use-conversation";
|
import useConversation from "../../hooks/use-conversation";
|
||||||
import Layout from "../../components/layout";
|
import Layout from "../../components/layout";
|
||||||
|
import ConnectedLayout from "../../components/connected-layout";
|
||||||
|
|
||||||
type Props = {
|
type Props = {}
|
||||||
recipient: string;
|
|
||||||
conversation: Message[];
|
|
||||||
}
|
|
||||||
|
|
||||||
type Form = {
|
type Form = {
|
||||||
content: string;
|
content: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const Messages: NextPage<Props> = (props) => {
|
const Messages: NextPage<Props> = (props) => {
|
||||||
const { userProfile } = useUser();
|
const { customer } = useUser();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const recipient = router.query.recipient as string;
|
const recipient = router.query.recipient as string;
|
||||||
const { conversation, error, refetch, sendMessage } = useConversation({
|
useEffect(() => {
|
||||||
initialData: props.conversation,
|
if (!router.isReady) {
|
||||||
recipient,
|
return;
|
||||||
});
|
}
|
||||||
|
|
||||||
|
if (!recipient || Array.isArray(recipient)) {
|
||||||
|
router.push("/messages");
|
||||||
|
}
|
||||||
|
}, [recipient, router]);
|
||||||
|
const { conversation, error, refetch, sendMessage } = useConversation(recipient);
|
||||||
const formRef = useRef<HTMLFormElement>(null);
|
const formRef = useRef<HTMLFormElement>(null);
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
@ -58,12 +60,12 @@ const Messages: NextPage<Props> = (props) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!userProfile) {
|
if (!customer) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const subscription = supabase
|
const subscription = supabase
|
||||||
.from<Message>(`sms:customerId=eq.${userProfile.id}`)
|
.from<Message>(`sms:customerId=eq.${customer.id}`)
|
||||||
.on("INSERT", (payload) => {
|
.on("INSERT", (payload) => {
|
||||||
const message = payload.new;
|
const message = payload.new;
|
||||||
if ([message.from, message.to].includes(recipient)) {
|
if ([message.from, message.to].includes(recipient)) {
|
||||||
@ -73,36 +75,39 @@ const Messages: NextPage<Props> = (props) => {
|
|||||||
.subscribe();
|
.subscribe();
|
||||||
|
|
||||||
return () => void subscription.unsubscribe();
|
return () => void subscription.unsubscribe();
|
||||||
}, [userProfile, recipient, refetch]);
|
}, [customer, recipient, refetch]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (formRef.current) {
|
if (formRef.current) {
|
||||||
formRef.current.scrollIntoView();
|
formRef.current.scrollIntoView();
|
||||||
}
|
}
|
||||||
}, []);
|
}, [conversation]);
|
||||||
|
|
||||||
if (!userProfile) {
|
|
||||||
return (
|
|
||||||
<Layout title={pageTitle}>
|
|
||||||
Loading...
|
|
||||||
</Layout>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
console.error("error", error);
|
console.error("error", error);
|
||||||
return (
|
return (
|
||||||
|
<ConnectedLayout>
|
||||||
<Layout title={pageTitle}>
|
<Layout title={pageTitle}>
|
||||||
Oops, something unexpected happened. Please try reloading the page.
|
Oops, something unexpected happened. Please try reloading the page.
|
||||||
</Layout>
|
</Layout>
|
||||||
|
</ConnectedLayout>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log("conversation", conversation);
|
if (!conversation) {
|
||||||
|
return (
|
||||||
|
<ConnectedLayout>
|
||||||
|
<Layout title={pageTitle}>
|
||||||
|
Loading...
|
||||||
|
</Layout>
|
||||||
|
</ConnectedLayout>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<ConnectedLayout>
|
||||||
<Layout title={pageTitle}>
|
<Layout title={pageTitle}>
|
||||||
<header className="grid grid-cols-3 items-center">
|
<header className="absolute top-0 w-screen h-12 backdrop-blur-sm bg-white bg-opacity-75 border-b grid grid-cols-3 items-center">
|
||||||
<span className="col-start-1 col-span-1 pl-2 cursor-pointer" onClick={router.back}>
|
<span className="col-start-1 col-span-1 pl-2 cursor-pointer" onClick={router.back}>
|
||||||
<FontAwesomeIcon size="lg" className="h-8 w-8" icon={faLongArrowLeft} />
|
<FontAwesomeIcon size="lg" className="h-8 w-8" icon={faLongArrowLeft} />
|
||||||
</span>
|
</span>
|
||||||
@ -114,9 +119,9 @@ const Messages: NextPage<Props> = (props) => {
|
|||||||
<FontAwesomeIcon size="lg" className="h-8 w-8" icon={faInfoCircle} />
|
<FontAwesomeIcon size="lg" className="h-8 w-8" icon={faInfoCircle} />
|
||||||
</span>
|
</span>
|
||||||
</header>
|
</header>
|
||||||
<div className="flex flex-col space-y-6 p-6">
|
<div className="flex flex-col space-y-6 p-6 pt-12">
|
||||||
<ul>
|
<ul>
|
||||||
{conversation!.map((message, index) => {
|
{conversation.map((message, index) => {
|
||||||
const isOutbound = message.direction === "outbound";
|
const isOutbound = message.direction === "outbound";
|
||||||
const nextMessage = conversation![index + 1];
|
const nextMessage = conversation![index + 1];
|
||||||
const previousMessage = conversation![index - 1];
|
const previousMessage = conversation![index - 1];
|
||||||
@ -124,6 +129,7 @@ const Messages: NextPage<Props> = (props) => {
|
|||||||
const isSamePrevious = message.from === previousMessage?.from;
|
const isSamePrevious = message.from === previousMessage?.from;
|
||||||
const differenceInMinutes = previousMessage ? (new Date(message.sentAt).getTime() - new Date(previousMessage.sentAt).getTime()) / 1000 / 60 : 0;
|
const differenceInMinutes = previousMessage ? (new Date(message.sentAt).getTime() - new Date(previousMessage.sentAt).getTime()) / 1000 / 60 : 0;
|
||||||
const isTooLate = differenceInMinutes > 15;
|
const isTooLate = differenceInMinutes > 15;
|
||||||
|
console.log("message.from === previousMessage?.from", message.from, previousMessage?.from);
|
||||||
return (
|
return (
|
||||||
<li key={message.id}>
|
<li key={message.id}>
|
||||||
{
|
{
|
||||||
@ -160,30 +166,8 @@ const Messages: NextPage<Props> = (props) => {
|
|||||||
<button type="submit">Send</button>
|
<button type="submit">Send</button>
|
||||||
</form>
|
</form>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
</ConnectedLayout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const getServerSideProps = withPageOnboardingRequired<Props>(
|
|
||||||
async (context, user) => {
|
|
||||||
const recipient = context.params?.recipient;
|
|
||||||
if (!recipient || Array.isArray(recipient)) {
|
|
||||||
return {
|
|
||||||
redirect: {
|
|
||||||
destination: "/messages",
|
|
||||||
permanent: false,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
const conversation = await findConversation(user.id, recipient);
|
|
||||||
|
|
||||||
return {
|
|
||||||
props: {
|
|
||||||
recipient,
|
|
||||||
conversation,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
export default Messages;
|
export default Messages;
|
||||||
|
@ -8,85 +8,44 @@ import { findCustomer } from "../../database/customer";
|
|||||||
import { decrypt } from "../../database/_encryption";
|
import { decrypt } from "../../database/_encryption";
|
||||||
import useUser from "../../hooks/use-user";
|
import useUser from "../../hooks/use-user";
|
||||||
import Layout from "../../components/layout";
|
import Layout from "../../components/layout";
|
||||||
|
import ConnectedLayout from "../../components/connected-layout";
|
||||||
|
import { conversationsAtom } from "../../state";
|
||||||
|
import { useAtom } from "jotai";
|
||||||
|
|
||||||
type Props = InferGetServerSidePropsType<typeof getServerSideProps>;
|
type Props = {};
|
||||||
|
|
||||||
const pageTitle = "Messages";
|
const pageTitle = "Messages";
|
||||||
|
|
||||||
const Messages: NextPage<Props> = ({ conversations }) => {
|
const Messages: NextPage<Props> = () => {
|
||||||
const { userProfile } = useUser();
|
const [conversations] = useAtom(conversationsAtom);
|
||||||
|
|
||||||
if (!userProfile) {
|
|
||||||
return <Layout title={pageTitle}>Loading...</Layout>;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<ConnectedLayout>
|
||||||
<Layout title={pageTitle}>
|
<Layout title={pageTitle}>
|
||||||
<div className="flex flex-col space-y-6 p-6">
|
<div className="flex flex-col space-y-6 p-6">
|
||||||
<p>Messages page</p>
|
<p>Messages page</p>
|
||||||
<ul className="divide-y">
|
<ul className="divide-y">
|
||||||
{Object.entries(conversations).map(([recipient, message]) => {
|
{Object.entries(conversations).map(([recipient, messages]) => {
|
||||||
|
const lastMessage = messages[messages.length - 1];
|
||||||
return (
|
return (
|
||||||
<li key={recipient} className="py-2">
|
<li key={recipient} className="py-2">
|
||||||
<Link href={`/messages/${encodeURIComponent(recipient)}`}>
|
<Link href={`/messages/${encodeURIComponent(recipient)}`}>
|
||||||
<a className="flex flex-col">
|
<a className="flex flex-col">
|
||||||
<div className="flex flex-row justify-between">
|
<div className="flex flex-row justify-between">
|
||||||
<strong>{recipient}</strong>
|
<strong>{recipient}</strong>
|
||||||
<div>{new Date(message.sentAt).toLocaleString("fr-FR")}</div>
|
<div>{new Date(lastMessage.sentAt).toLocaleString("fr-FR")}</div>
|
||||||
</div>
|
</div>
|
||||||
<div>{message.content}</div>
|
<div>{lastMessage.content}</div>
|
||||||
</a>
|
</a>
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
)
|
);
|
||||||
})}
|
})}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
</ConnectedLayout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
type Recipient = string;
|
|
||||||
|
|
||||||
export const getServerSideProps = withPageOnboardingRequired(
|
|
||||||
async (context, user) => {
|
|
||||||
context.res.setHeader(
|
|
||||||
"Cache-Control",
|
|
||||||
"private, s-maxage=15, stale-while-revalidate=59",
|
|
||||||
);
|
|
||||||
|
|
||||||
const [customer, messages] = await Promise.all([
|
|
||||||
findCustomer(user.id),
|
|
||||||
findCustomerMessages(user.id),
|
|
||||||
]);
|
|
||||||
|
|
||||||
let conversations: Record<Recipient, Message> = {};
|
|
||||||
for (const message of messages) {
|
|
||||||
let recipient: string;
|
|
||||||
if (message.direction === "outbound") {
|
|
||||||
recipient = message.to;
|
|
||||||
} else {
|
|
||||||
recipient = message.from;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (
|
|
||||||
!conversations[recipient] ||
|
|
||||||
message.sentAt > conversations[recipient].sentAt
|
|
||||||
) {
|
|
||||||
conversations[recipient] = {
|
|
||||||
...message,
|
|
||||||
content: decrypt(message.content, customer.encryptionKey), // TODO: should probably decrypt on the phone
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
conversations = Object.fromEntries(
|
|
||||||
Object.entries(conversations).sort(([,a], [,b]) => b.sentAt.localeCompare(a.sentAt))
|
|
||||||
);
|
|
||||||
|
|
||||||
return {
|
|
||||||
props: { conversations },
|
|
||||||
};
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
export default Messages;
|
export default Messages;
|
||||||
|
@ -9,14 +9,11 @@ import Divider from "../../components/divider";
|
|||||||
import UpdatePassword from "../../components/settings/update-password";
|
import UpdatePassword from "../../components/settings/update-password";
|
||||||
import DangerZone from "../../components/settings/danger-zone";
|
import DangerZone from "../../components/settings/danger-zone";
|
||||||
import { withPageOnboardingRequired } from "../../../lib/session-helpers";
|
import { withPageOnboardingRequired } from "../../../lib/session-helpers";
|
||||||
|
import ConnectedLayout from "../../components/connected-layout";
|
||||||
|
|
||||||
const Account: NextPage = () => {
|
const Account: NextPage = () => {
|
||||||
const user = useUser();
|
const user = useUser();
|
||||||
|
|
||||||
if (user.isLoading) {
|
|
||||||
return <SettingsLayout>Loading...</SettingsLayout>;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (user.error !== null) {
|
if (user.error !== null) {
|
||||||
return (
|
return (
|
||||||
<SettingsLayout>
|
<SettingsLayout>
|
||||||
@ -32,6 +29,7 @@ const Account: NextPage = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<ConnectedLayout>
|
||||||
<SettingsLayout>
|
<SettingsLayout>
|
||||||
<div className="flex flex-col space-y-6 p-6">
|
<div className="flex flex-col space-y-6 p-6">
|
||||||
<ProfileInformations />
|
<ProfileInformations />
|
||||||
@ -49,6 +47,7 @@ const Account: NextPage = () => {
|
|||||||
<DangerZone />
|
<DangerZone />
|
||||||
</div>
|
</div>
|
||||||
</SettingsLayout>
|
</SettingsLayout>
|
||||||
|
</ConnectedLayout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -14,6 +14,7 @@ import type { Subscription } from "../../database/subscriptions";
|
|||||||
import { findUserSubscription } from "../../database/subscriptions";
|
import { findUserSubscription } from "../../database/subscriptions";
|
||||||
|
|
||||||
import appLogger from "../../../lib/logger";
|
import appLogger from "../../../lib/logger";
|
||||||
|
import ConnectedLayout from "../../components/connected-layout";
|
||||||
|
|
||||||
const logger = appLogger.child({ page: "/account/settings/billing" });
|
const logger = appLogger.child({ page: "/account/settings/billing" });
|
||||||
|
|
||||||
@ -31,6 +32,7 @@ const Billing: NextPage<Props> = ({ subscription }) => {
|
|||||||
const { cancelSubscription, updatePaymentMethod } = useSubscription();
|
const { cancelSubscription, updatePaymentMethod } = useSubscription();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<ConnectedLayout>
|
||||||
<SettingsLayout>
|
<SettingsLayout>
|
||||||
<div className="flex flex-col space-y-6 p-6">
|
<div className="flex flex-col space-y-6 p-6">
|
||||||
{subscription ? (
|
{subscription ? (
|
||||||
@ -76,6 +78,7 @@ const Billing: NextPage<Props> = ({ subscription }) => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</SettingsLayout>
|
</SettingsLayout>
|
||||||
|
</ConnectedLayout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -6,8 +6,9 @@ import Layout from "../../components/layout";
|
|||||||
|
|
||||||
import { withPageOnboardingRequired } from "../../../lib/session-helpers";
|
import { withPageOnboardingRequired } from "../../../lib/session-helpers";
|
||||||
import appLogger from "../../../lib/logger";
|
import appLogger from "../../../lib/logger";
|
||||||
|
import ConnectedLayout from "../../components/connected-layout";
|
||||||
|
|
||||||
type Props = InferGetServerSidePropsType<typeof getServerSideProps>;
|
type Props = {};
|
||||||
|
|
||||||
const logger = appLogger.child({ page: "/account/settings" });
|
const logger = appLogger.child({ page: "/account/settings" });
|
||||||
|
|
||||||
@ -28,6 +29,7 @@ const navigation = [
|
|||||||
|
|
||||||
const Settings: NextPage<Props> = (props) => {
|
const Settings: NextPage<Props> = (props) => {
|
||||||
return (
|
return (
|
||||||
|
<ConnectedLayout>
|
||||||
<Layout title="Settings">
|
<Layout title="Settings">
|
||||||
<div className="flex flex-col space-y-6 p-6">
|
<div className="flex flex-col space-y-6 p-6">
|
||||||
<aside className="py-6 lg:col-span-3">
|
<aside className="py-6 lg:col-span-3">
|
||||||
@ -46,18 +48,8 @@ const Settings: NextPage<Props> = (props) => {
|
|||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
</ConnectedLayout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const getServerSideProps = withPageOnboardingRequired(
|
|
||||||
async ({ res }) => {
|
|
||||||
res.setHeader(
|
|
||||||
"Cache-Control",
|
|
||||||
"private, s-maxage=15, stale-while-revalidate=59",
|
|
||||||
);
|
|
||||||
|
|
||||||
return { props: {} };
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
export default Settings;
|
export default Settings;
|
||||||
|
@ -1,105 +0,0 @@
|
|||||||
import type { Dispatch, ReactNode, Reducer, ReducerAction } from "react";
|
|
||||||
import { createContext, useEffect, useReducer } from "react";
|
|
||||||
import type { User } from "@supabase/supabase-js";
|
|
||||||
import supabase from "./supabase/client";
|
|
||||||
|
|
||||||
type Context = {
|
|
||||||
state: SessionState;
|
|
||||||
dispatch: Dispatch<ReducerAction<typeof sessionReducer>>;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const SessionContext = createContext<Context>(null as any);
|
|
||||||
|
|
||||||
type ProviderProps = {
|
|
||||||
children: ReactNode;
|
|
||||||
user?: User | null;
|
|
||||||
};
|
|
||||||
|
|
||||||
function getInitialState(initialUser: User | null | undefined): SessionState {
|
|
||||||
if (!initialUser) {
|
|
||||||
return {
|
|
||||||
state: "LOADING",
|
|
||||||
user: null,
|
|
||||||
error: null,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
state: "SUCCESS",
|
|
||||||
user: initialUser,
|
|
||||||
error: null,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function SessionProvider({ children, user }: ProviderProps) {
|
|
||||||
const [state, dispatch] = useReducer(
|
|
||||||
sessionReducer,
|
|
||||||
getInitialState(user),
|
|
||||||
);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
supabase.auth.onAuthStateChange((event, session) => {
|
|
||||||
console.log("event", event);
|
|
||||||
if (["SIGNED_IN", "USER_UPDATED"].includes(event)) {
|
|
||||||
dispatch({
|
|
||||||
type: "SET_SESSION",
|
|
||||||
user: session!.user!,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (state.user === null) {
|
|
||||||
dispatch({
|
|
||||||
type: "SET_SESSION",
|
|
||||||
user: supabase.auth.user()!,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<SessionContext.Provider value={{ state, dispatch }}>
|
|
||||||
{children}
|
|
||||||
</SessionContext.Provider>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
type SessionState =
|
|
||||||
| {
|
|
||||||
state: "LOADING";
|
|
||||||
user: null;
|
|
||||||
error: null;
|
|
||||||
}
|
|
||||||
| {
|
|
||||||
state: "SUCCESS";
|
|
||||||
user: User;
|
|
||||||
error: null;
|
|
||||||
}
|
|
||||||
| {
|
|
||||||
state: "ERROR";
|
|
||||||
user: User | null;
|
|
||||||
error: Error;
|
|
||||||
};
|
|
||||||
|
|
||||||
type Action =
|
|
||||||
| { type: "SET_SESSION"; user: User }
|
|
||||||
| { type: "THROW_ERROR"; error: Error };
|
|
||||||
|
|
||||||
const sessionReducer: Reducer<SessionState, Action> = (state, action) => {
|
|
||||||
switch (action.type) {
|
|
||||||
case "SET_SESSION":
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
state: "SUCCESS",
|
|
||||||
user: action.user,
|
|
||||||
error: null,
|
|
||||||
};
|
|
||||||
case "THROW_ERROR":
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
state: "ERROR",
|
|
||||||
error: action.error,
|
|
||||||
};
|
|
||||||
default:
|
|
||||||
throw new Error("unreachable");
|
|
||||||
}
|
|
||||||
};
|
|
50
src/state.ts
Normal file
50
src/state.ts
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
import { atom } from "jotai";
|
||||||
|
import type { Message } from "./database/message";
|
||||||
|
import type { Customer } from "./database/customer";
|
||||||
|
import type { PhoneCall } from "./database/phone-call";
|
||||||
|
import type { PhoneNumber } from "./database/phone-number";
|
||||||
|
import { decrypt } from "./database/_encryption";
|
||||||
|
|
||||||
|
type Recipient = string;
|
||||||
|
|
||||||
|
export const customerAtom = atom<Customer | null>(null);
|
||||||
|
export const customerPhoneNumberAtom = atom<PhoneNumber | null>(null);
|
||||||
|
|
||||||
|
export const messagesAtom = atom<Message[] | null>(null);
|
||||||
|
export const conversationsAtom = atom<Record<Recipient, Message[]>>(
|
||||||
|
(get) => {
|
||||||
|
const messages = get(messagesAtom);
|
||||||
|
const customer = get(customerAtom);
|
||||||
|
if (!customer || !messages) {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
|
||||||
|
let conversations: Record<Recipient, Message[]> = {};
|
||||||
|
for (const message of messages) {
|
||||||
|
let recipient: string;
|
||||||
|
if (message.direction === "outbound") {
|
||||||
|
recipient = message.to;
|
||||||
|
} else {
|
||||||
|
recipient = message.from;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!conversations[recipient]) {
|
||||||
|
conversations[recipient] = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
conversations[recipient].push({
|
||||||
|
...message,
|
||||||
|
content: decrypt(message.content, customer.encryptionKey),
|
||||||
|
});
|
||||||
|
|
||||||
|
conversations[recipient].sort((a, b) => a.sentAt.localeCompare(b.sentAt));
|
||||||
|
}
|
||||||
|
conversations = Object.fromEntries(
|
||||||
|
Object.entries(conversations).sort(([,a], [,b]) => b[b.length - 1].sentAt.localeCompare(a[a.length - 1].sentAt))
|
||||||
|
);
|
||||||
|
|
||||||
|
return conversations;
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
export const phoneCallsAtom = atom<PhoneCall[] | null>(null);
|
Loading…
Reference in New Issue
Block a user