From a65d6e2bcc5139708559e6a450f62fb6051deb6b Mon Sep 17 00:00:00 2001 From: m5r Date: Sun, 1 Aug 2021 11:05:40 +0800 Subject: [PATCH] boring stuff --- app/auth/components/login-form.tsx | 2 +- app/auth/pages/forgot-password.tsx | 6 +- app/auth/pages/reset-password.tsx | 6 +- app/auth/pages/{login.tsx => sign-in.tsx} | 14 ++- app/auth/pages/signup.tsx | 14 ++- app/keypad/pages/keypad.tsx | 114 +++++++++-------- .../components/conversations-list.tsx | 8 +- app/messages/pages/messages.tsx | 9 +- app/messages/pages/messages/[recipient].tsx | 20 ++- app/onboarding/pages/welcome/step-one.tsx | 22 ++-- app/onboarding/pages/welcome/step-three.tsx | 69 ++++++----- app/onboarding/pages/welcome/step-two.tsx | 116 ++++++++++-------- app/pages/index.tsx | 8 +- app/phone-calls/pages/calls.tsx | 9 +- app/settings/pages/settings.tsx | 39 +++--- app/settings/pages/settings/account.tsx | 5 +- app/settings/pages/settings/billing.tsx | 6 +- 17 files changed, 261 insertions(+), 206 deletions(-) rename app/auth/pages/{login.tsx => sign-in.tsx} (53%) diff --git a/app/auth/components/login-form.tsx b/app/auth/components/login-form.tsx index 5129cf2..4d7154a 100644 --- a/app/auth/components/login-form.tsx +++ b/app/auth/components/login-form.tsx @@ -52,7 +52,7 @@ export const LoginForm = (props: LoginFormProps) => {
- Or Sign Up + Or Sign Up
); diff --git a/app/auth/pages/forgot-password.tsx b/app/auth/pages/forgot-password.tsx index b42c811..039f1ca 100644 --- a/app/auth/pages/forgot-password.tsx +++ b/app/auth/pages/forgot-password.tsx @@ -1,4 +1,5 @@ -import { BlitzPage, useMutation } from "blitz"; +import type { BlitzPage } from "blitz"; +import { Routes, useMutation } from "blitz"; import BaseLayout from "../../core/layouts/base-layout"; import { LabeledTextField } from "../../core/components/labeled-text-field"; @@ -44,7 +45,8 @@ const ForgotPasswordPage: BlitzPage = () => { ); }; -ForgotPasswordPage.redirectAuthenticatedTo = "/"; +ForgotPasswordPage.redirectAuthenticatedTo = Routes.Messages(); + ForgotPasswordPage.getLayout = (page) => ( {page} ); diff --git a/app/auth/pages/reset-password.tsx b/app/auth/pages/reset-password.tsx index 65eddf9..3c9ac01 100644 --- a/app/auth/pages/reset-password.tsx +++ b/app/auth/pages/reset-password.tsx @@ -1,4 +1,5 @@ -import { BlitzPage, useRouterQuery, Link, useMutation, Routes } from "blitz"; +import type { BlitzPage } from "blitz"; +import { useRouterQuery, Link, useMutation, Routes } from "blitz"; import BaseLayout from "../../core/layouts/base-layout"; import { LabeledTextField } from "../../core/components/labeled-text-field"; @@ -59,7 +60,8 @@ const ResetPasswordPage: BlitzPage = () => { ); }; -ResetPasswordPage.redirectAuthenticatedTo = "/"; +ResetPasswordPage.redirectAuthenticatedTo = Routes.Messages(); + ResetPasswordPage.getLayout = (page) => {page}; export default ResetPasswordPage; diff --git a/app/auth/pages/login.tsx b/app/auth/pages/sign-in.tsx similarity index 53% rename from app/auth/pages/login.tsx rename to app/auth/pages/sign-in.tsx index 6772f2e..b158a2f 100644 --- a/app/auth/pages/login.tsx +++ b/app/auth/pages/sign-in.tsx @@ -1,9 +1,10 @@ -import { useRouter, BlitzPage } from "blitz"; +import type { BlitzPage } from "blitz"; +import { useRouter, Routes } from "blitz"; import BaseLayout from "../../core/layouts/base-layout"; import { LoginForm } from "../components/login-form"; -const LoginPage: BlitzPage = () => { +const SignIn: BlitzPage = () => { const router = useRouter(); return ( @@ -12,7 +13,7 @@ const LoginPage: BlitzPage = () => { onSuccess={() => { const next = router.query.next ? decodeURIComponent(router.query.next as string) - : "/"; + : Routes.Messages(); router.push(next); }} /> @@ -20,7 +21,8 @@ const LoginPage: BlitzPage = () => { ); }; -LoginPage.redirectAuthenticatedTo = "/"; -LoginPage.getLayout = (page) => {page}; +SignIn.redirectAuthenticatedTo = Routes.Messages(); -export default LoginPage; +SignIn.getLayout = (page) => {page}; + +export default SignIn; diff --git a/app/auth/pages/signup.tsx b/app/auth/pages/signup.tsx index 79a712a..ac4d84e 100644 --- a/app/auth/pages/signup.tsx +++ b/app/auth/pages/signup.tsx @@ -1,19 +1,21 @@ -import { useRouter, BlitzPage, Routes } from "blitz"; +import type { BlitzPage } from "blitz"; +import { useRouter, Routes } from "blitz"; import BaseLayout from "../../core/layouts/base-layout"; import { SignupForm } from "../components/signup-form"; -const SignupPage: BlitzPage = () => { +const SignUp: BlitzPage = () => { const router = useRouter(); return (
- router.push(Routes.Home())} /> + router.push(Routes.StepOne())} />
); }; -SignupPage.redirectAuthenticatedTo = "/"; -SignupPage.getLayout = (page) => {page}; +SignUp.redirectAuthenticatedTo = Routes.StepOne(); -export default SignupPage; +SignUp.getLayout = (page) => {page}; + +export default SignUp; diff --git a/app/keypad/pages/keypad.tsx b/app/keypad/pages/keypad.tsx index 0f532ca..6746bf7 100644 --- a/app/keypad/pages/keypad.tsx +++ b/app/keypad/pages/keypad.tsx @@ -1,4 +1,5 @@ import type { BlitzPage } from "blitz"; +import { Routes } from "blitz"; import type { FunctionComponent } from "react"; import { atom, useAtom } from "jotai"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; @@ -7,71 +8,64 @@ import { faBackspace, faPhoneAlt as faPhone } from "@fortawesome/pro-solid-svg-i import Layout from "../../core/layouts/layout"; import useRequireOnboarding from "../../core/hooks/use-require-onboarding"; -const pageTitle = "Keypad"; - const Keypad: BlitzPage = () => { useRequireOnboarding(); const phoneNumber = useAtom(phoneNumberAtom)[0]; const pressBackspace = useAtom(pressBackspaceAtom)[1]; return ( - -
-
- {phoneNumber} -
- -
- - - - ABC - - - DEF - - - - - GHI - - - JKL - - - MNO - - - - - PQRS - - - TUV - - - WXYZ - - - - - - - - -
- -
-
- -
- -
+
+
+ {phoneNumber}
- + +
+ + + + ABC + + + DEF + + + + + GHI + + + JKL + + + MNO + + + + + PQRS + + + TUV + + + WXYZ + + + + + + + + +
+ +
+
+ +
+ +
+
); }; @@ -123,4 +117,8 @@ const pressBackspaceAtom = atom(null, (get, set) => { set(phoneNumberAtom, (prevState) => prevState.slice(0, -1)); }); +Keypad.getLayout = (page) => {page}; + +Keypad.authenticate = { redirectTo: Routes.SignIn() }; + export default Keypad; diff --git a/app/messages/components/conversations-list.tsx b/app/messages/components/conversations-list.tsx index 296ea6a..67872c4 100644 --- a/app/messages/components/conversations-list.tsx +++ b/app/messages/components/conversations-list.tsx @@ -1,4 +1,4 @@ -import { Link, useQuery } from "blitz"; +import { Link, useQuery, Routes } from "blitz"; import getConversationsQuery from "../queries/get-conversations"; @@ -15,7 +15,11 @@ export default function ConversationsList() { const lastMessage = messages[messages.length - 1]!; return (
  • - +
    {recipient} diff --git a/app/messages/pages/messages.tsx b/app/messages/pages/messages.tsx index cbbad97..534a0a6 100644 --- a/app/messages/pages/messages.tsx +++ b/app/messages/pages/messages.tsx @@ -1,5 +1,6 @@ import { Suspense } from "react"; import type { BlitzPage } from "blitz"; +import { Routes } from "blitz"; import Layout from "../../core/layouts/layout"; import ConversationsList from "../components/conversations-list"; @@ -9,17 +10,19 @@ const Messages: BlitzPage = () => { useRequireOnboarding(); return ( - + <>

    Messages page

    -     + ); }; -Messages.authenticate = true; +Messages.getLayout = (page) => {page}; + +Messages.authenticate = { redirectTo: Routes.SignIn() }; export default Messages; diff --git a/app/messages/pages/messages/[recipient].tsx b/app/messages/pages/messages/[recipient].tsx index 386dc91..94753cc 100644 --- a/app/messages/pages/messages/[recipient].tsx +++ b/app/messages/pages/messages/[recipient].tsx @@ -1,5 +1,6 @@ import { Suspense } from "react"; -import { BlitzPage, useRouter } from "blitz"; +import type { BlitzPage } from "blitz"; +import { Routes, useRouter } from "blitz"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faLongArrowLeft, @@ -16,10 +17,9 @@ const ConversationPage: BlitzPage = () => { const router = useRouter(); const recipient = router.params.recipient; - const pageTitle = `Messages with ${recipient}`; return ( - + <>
    @@ -33,10 +33,22 @@ const ConversationPage: BlitzPage = () => { Loading messages with {recipient}
    }> + + ); +}; + +ConversationPage.getLayout = function ConversationLayout(page) { + const router = useRouter(); + const recipient = router.params.recipient; + const pageTitle = `Messages with ${recipient}`; + + return ( + + {page} ); }; -ConversationPage.authenticate = true; +ConversationPage.authenticate = { redirectTo: Routes.SignIn() }; export default ConversationPage; diff --git a/app/onboarding/pages/welcome/step-one.tsx b/app/onboarding/pages/welcome/step-one.tsx index cd02a11..73f696e 100644 --- a/app/onboarding/pages/welcome/step-one.tsx +++ b/app/onboarding/pages/welcome/step-one.tsx @@ -9,18 +9,22 @@ const StepOne: BlitzPage = () => { useCurrentCustomer(); // preload for step two return ( - -
    - Welcome, let’s set up your virtual phone! -
    -     +
    + Welcome, let’s set up your virtual phone! +
    ); }; -StepOne.authenticate = true; +StepOne.getLayout = (page) => ( + + {page} + +); + +StepOne.authenticate = { redirectTo: Routes.SignIn() }; export const getServerSideProps: GetServerSideProps = async ({ req, res }) => { const session = await getSession(req, res); diff --git a/app/onboarding/pages/welcome/step-three.tsx b/app/onboarding/pages/welcome/step-three.tsx index a8b0991..c50b46f 100644 --- a/app/onboarding/pages/welcome/step-three.tsx +++ b/app/onboarding/pages/welcome/step-three.tsx @@ -48,44 +48,45 @@ const StepThree: BlitzPage = ({ availablePhoneNumbers }) => { }); return ( - -
    -
    - - +
    + + + - - -
    - + + +
    ); }; -StepThree.authenticate = true; +StepThree.getLayout = (page) => ( + + {page} + +); + +StepThree.authenticate = { redirectTo: Routes.SignIn() }; export const getServerSideProps: GetServerSideProps = async ({ req, res }) => { const session = await getSession(req, res); diff --git a/app/onboarding/pages/welcome/step-two.tsx b/app/onboarding/pages/welcome/step-two.tsx index f04c502..7aee88c 100644 --- a/app/onboarding/pages/welcome/step-two.tsx +++ b/app/onboarding/pages/welcome/step-two.tsx @@ -25,13 +25,10 @@ const StepTwo: BlitzPage = () => { const { customer } = useCurrentCustomer(); const [setTwilioApiFieldsMutation] = useMutation(setTwilioApiFields); - const initialAuthToken = customer?.authToken ?? ""; - const initialAccountSid = customer?.accountSid ?? ""; - const hasTwilioCredentials = initialAccountSid.length > 0 && initialAuthToken.length > 0; useEffect(() => { - setValue("twilioAuthToken", initialAuthToken); - setValue("twilioAccountSid", initialAccountSid); - }, [initialAuthToken, initialAccountSid]); + setValue("twilioAuthToken", customer?.authToken ?? ""); + setValue("twilioAccountSid", customer?.accountSid ?? ""); + }, [setValue, customer?.authToken, customer?.accountSid]); const onSubmit = handleSubmit(async ({ twilioAccountSid, twilioAuthToken }) => { if (isSubmitting) { @@ -46,60 +43,75 @@ const StepTwo: BlitzPage = () => { await router.push(Routes.StepThree()); }); + return ( +
    +
    +
    + + +
    +
    + + +
    + + +
    +
    + ); +}; + +StepTwo.getLayout = function StepTwoLayout(page) { + const { customer } = useCurrentCustomer(); + const initialAuthToken = customer?.authToken ?? ""; + const initialAccountSid = customer?.accountSid ?? ""; + const hasTwilioCredentials = initialAccountSid.length > 0 && initialAuthToken.length > 0; + return ( -
    -
    -
    - - -
    -
    - - -
    - - -
    -
    + {page}     ); }; -StepTwo.authenticate = true; +StepTwo.authenticate = { redirectTo: Routes.SignIn() }; export const getServerSideProps: GetServerSideProps = async ({ req, res }) => { const session = await getSession(req, res); diff --git a/app/pages/index.tsx b/app/pages/index.tsx index 13c79b5..1e80ac7 100644 --- a/app/pages/index.tsx +++ b/app/pages/index.tsx @@ -1,5 +1,6 @@ import { Suspense } from "react"; -import { Link, BlitzPage, useMutation, Routes } from "blitz"; +import type { BlitzPage } from "blitz"; +import { Link, useMutation, Routes } from "blitz"; import BaseLayout from "../core/layouts/base-layout"; import logout from "../auth/mutations/logout"; @@ -35,12 +36,12 @@ const UserInfo = () => { } else { return ( <> - +     Sign Up - + Login @@ -268,6 +269,7 @@ const Home: BlitzPage = () => { }; Home.suppressFirstRenderFlicker = true; + Home.getLayout = (page) => {page}; export default Home; diff --git a/app/phone-calls/pages/calls.tsx b/app/phone-calls/pages/calls.tsx index f9afb7d..3bbe356 100644 --- a/app/phone-calls/pages/calls.tsx +++ b/app/phone-calls/pages/calls.tsx @@ -1,5 +1,6 @@ import { Suspense } from "react"; import type { BlitzPage } from "blitz"; +import { Routes } from "blitz"; import Layout from "../../core/layouts/layout"; import PhoneCallsList from "../components/phone-calls-list"; @@ -9,17 +10,19 @@ const PhoneCalls: BlitzPage = () => { useRequireOnboarding(); return ( - + <>

    Calls page

    -     + ); }; -PhoneCalls.authenticate = true; +PhoneCalls.getLayout = (page) => {page}; + +PhoneCalls.authenticate = { redirectTo: Routes.SignIn() }; export default PhoneCalls; diff --git a/app/settings/pages/settings.tsx b/app/settings/pages/settings.tsx index 21f734c..8ac04ab 100644 --- a/app/settings/pages/settings.tsx +++ b/app/settings/pages/settings.tsx @@ -1,4 +1,5 @@ import type { BlitzPage } from "blitz"; +import { Routes } from "blitz"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faCreditCard, faUserCircle } from "@fortawesome/pro-regular-svg-icons"; @@ -32,27 +33,27 @@ const Settings: BlitzPage = () => { useRequireOnboarding(); return ( - -
    - -
    -     +
    + +
    ); }; -Settings.authenticate = true; +Settings.getLayout = (page) => {page}; + +Settings.authenticate = { redirectTo: Routes.SignIn() }; export default Settings; diff --git a/app/settings/pages/settings/account.tsx b/app/settings/pages/settings/account.tsx index 6d2424d..44a9c75 100644 --- a/app/settings/pages/settings/account.tsx +++ b/app/settings/pages/settings/account.tsx @@ -1,4 +1,5 @@ import type { BlitzPage } from "blitz"; +import { Routes } from "blitz"; import SettingsLayout from "../../components/settings-layout"; import ProfileInformations from "../../components/profile-informations"; @@ -31,6 +32,8 @@ const Account: BlitzPage = () => { ); }; -Account.authenticate = true; +Account.getLayout = (page) => {page}; + +Account.authenticate = { redirectTo: Routes.SignIn() }; export default Account; diff --git a/app/settings/pages/settings/billing.tsx b/app/settings/pages/settings/billing.tsx index cfc1791..e35461e 100644 --- a/app/settings/pages/settings/billing.tsx +++ b/app/settings/pages/settings/billing.tsx @@ -111,10 +111,12 @@ export const getServerSideProps = withPageOnboardingRequired( */ import type { BlitzPage } from "blitz"; +import { Routes } from "blitz"; import { useRouter } from "blitz"; import { useEffect } from "react"; import useRequireOnboarding from "../../../core/hooks/use-require-onboarding"; +import SettingsLayout from "../../components/settings-layout"; const Billing: BlitzPage = () => { useRequireOnboarding(); @@ -127,6 +129,8 @@ const Billing: BlitzPage = () => { return null; }; -Billing.authenticate = true; +Billing.getLayout = (page) => {page}; + +Billing.authenticate = { redirectTo: Routes.SignIn() }; export default Billing;