From 5036d41461e25383032884f1e03f92debd29398d Mon Sep 17 00:00:00 2001 From: MarconLP <13001502+MarconLP@users.noreply.github.com> Date: Thu, 20 Apr 2023 16:32:45 +0200 Subject: [PATCH] add CTAs to empty state view --- package-lock.json | 23 ++++++ package.json | 1 + src/atoms/recordVideoModalOpen.ts | 3 + src/atoms/uploadVideoModalOpen.ts | 3 + src/components/NewVideoMenu.tsx | 109 +++++++++++++--------------- src/components/VideoRecordModal.tsx | 10 +-- src/components/VideoUploadModal.tsx | 10 +-- src/pages/videos.tsx | 57 ++++++++++----- 8 files changed, 127 insertions(+), 89 deletions(-) create mode 100644 src/atoms/recordVideoModalOpen.ts create mode 100644 src/atoms/uploadVideoModalOpen.ts diff --git a/package-lock.json b/package-lock.json index 5cd7363..09a65d6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,6 +28,7 @@ "dayjs": "^1.11.7", "file-saver": "^2.0.5", "fix-webm-duration": "^1.0.5", + "jotai": "^2.0.4", "micro": "^10.0.1", "micro-cors": "^0.1.1", "next": "^13.3.0", @@ -5061,6 +5062,22 @@ "url": "https://github.com/sponsors/panva" } }, + "node_modules/jotai": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/jotai/-/jotai-2.0.4.tgz", + "integrity": "sha512-XkR1Jtm4a2iKV/7fdB3rNHjJz8FkkDMVczqiAok7lt8W4F69l/ZQkPGWSEV+hJOJXRn27k6XYKOoKEQIwBuAMA==", + "engines": { + "node": ">=12.20.0" + }, + "peerDependencies": { + "react": ">=17.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + } + } + }, "node_modules/js-sdsl": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.4.0.tgz", @@ -10912,6 +10929,12 @@ "resolved": "https://registry.npmjs.org/jose/-/jose-4.13.1.tgz", "integrity": "sha512-MSJQC5vXco5Br38mzaQKiq9mwt7lwj2eXpgpRyQYNHYt2lq1PjkWa7DLXX0WVcQLE9HhMh3jPiufS7fhJf+CLQ==" }, + "jotai": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/jotai/-/jotai-2.0.4.tgz", + "integrity": "sha512-XkR1Jtm4a2iKV/7fdB3rNHjJz8FkkDMVczqiAok7lt8W4F69l/ZQkPGWSEV+hJOJXRn27k6XYKOoKEQIwBuAMA==", + "requires": {} + }, "js-sdsl": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.4.0.tgz", diff --git a/package.json b/package.json index df3aa83..4859a49 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "dayjs": "^1.11.7", "file-saver": "^2.0.5", "fix-webm-duration": "^1.0.5", + "jotai": "^2.0.4", "micro": "^10.0.1", "micro-cors": "^0.1.1", "next": "^13.3.0", diff --git a/src/atoms/recordVideoModalOpen.ts b/src/atoms/recordVideoModalOpen.ts new file mode 100644 index 0000000..82f2397 --- /dev/null +++ b/src/atoms/recordVideoModalOpen.ts @@ -0,0 +1,3 @@ +import { atom } from "jotai"; + +export default atom(false); diff --git a/src/atoms/uploadVideoModalOpen.ts b/src/atoms/uploadVideoModalOpen.ts new file mode 100644 index 0000000..82f2397 --- /dev/null +++ b/src/atoms/uploadVideoModalOpen.ts @@ -0,0 +1,3 @@ +import { atom } from "jotai"; + +export default atom(false); diff --git a/src/components/NewVideoMenu.tsx b/src/components/NewVideoMenu.tsx index f7fc03e..acbb1fc 100644 --- a/src/components/NewVideoMenu.tsx +++ b/src/components/NewVideoMenu.tsx @@ -1,65 +1,58 @@ import { Menu, Transition } from "@headlessui/react"; -import { Fragment, useState } from "react"; -import VideoRecordModal from "~/components/VideoRecordModal"; -import VideoUploadModal from "~/components/VideoUploadModal"; +import { Fragment } from "react"; +import uploadVideoModalOpen from "~/atoms/uploadVideoModalOpen"; +import { useAtom } from "jotai"; +import recordVideoModalOpen from "~/atoms/recordVideoModalOpen"; export default function NewVideoMenu() { - const [recordOpen, setRecordOpen] = useState(false); - const [uploadOpen, setUploadOpen] = useState(false); + const [, setRecordOpen] = useAtom(uploadVideoModalOpen); + const [, setUploadOpen] = useAtom(recordVideoModalOpen); return ( - <> - - - - - - New video - - - - -
- - {({ active }) => ( -
setRecordOpen(true)} - className={`mx-2 flex h-8 w-40 cursor-pointer flex-row content-center rounded-md p-2 ${ - active ? "bg-gray-100" : "" - }`} - > -

- Record a video -

-
- )} - - - {({ active }) => ( -
setUploadOpen(true)} - className={`mx-2 flex h-8 w-40 cursor-pointer flex-row content-center rounded-md p-2 ${ - active ? "bg-gray-100" : "" - }`} - > -

- Upload a video -

-
- )} - -
- - - - + + + + New video + + + + +
+ + {({ active }) => ( +
setRecordOpen(true)} + className={`mx-2 flex h-8 w-40 cursor-pointer flex-row content-center rounded-md p-2 ${ + active ? "bg-gray-100" : "" + }`} + > +

Record a video

+
+ )} + + + {({ active }) => ( +
setUploadOpen(true)} + className={`mx-2 flex h-8 w-40 cursor-pointer flex-row content-center rounded-md p-2 ${ + active ? "bg-gray-100" : "" + }`} + > +

Upload a video

+
+ )} + +
+ + + ); } diff --git a/src/components/VideoRecordModal.tsx b/src/components/VideoRecordModal.tsx index 2491374..35cf4c1 100644 --- a/src/components/VideoRecordModal.tsx +++ b/src/components/VideoRecordModal.tsx @@ -2,13 +2,11 @@ import { Fragment, useState } from "react"; import { Dialog, Transition } from "@headlessui/react"; const Recorder = dynamic(() => import("~/components/Recorder"), { ssr: false }); import dynamic from "next/dynamic"; +import { useAtom } from "jotai"; +import recordVideoModalOpen from "~/atoms/recordVideoModalOpen"; -interface Props { - open: boolean; - setOpen: (value: boolean) => void; -} - -export default function VideoRecordModal({ open, setOpen }: Props) { +export default function VideoRecordModal() { + const [open, setOpen] = useAtom(recordVideoModalOpen); const [step, setStep] = useState<"pre" | "in" | "post">("pre"); function closeModal() { diff --git a/src/components/VideoUploadModal.tsx b/src/components/VideoUploadModal.tsx index bdc69d8..14e68d5 100644 --- a/src/components/VideoUploadModal.tsx +++ b/src/components/VideoUploadModal.tsx @@ -3,13 +3,11 @@ import { Dialog, Transition } from "@headlessui/react"; import { api } from "~/utils/api"; import axios from "axios"; import { useRouter } from "next/router"; +import { useAtom } from "jotai"; +import uploadVideoModalOpen from "~/atoms/uploadVideoModalOpen"; -interface Props { - open: boolean; - setOpen: (value: boolean) => void; -} - -export default function VideoUploadModal({ open, setOpen }: Props) { +export default function VideoUploadModal() { + const [open, setOpen] = useAtom(uploadVideoModalOpen); const router = useRouter(); const [submitting, setSubmitting] = useState(false); const [file, setFile] = useState(); diff --git a/src/pages/videos.tsx b/src/pages/videos.tsx index 20157e5..54420cd 100644 --- a/src/pages/videos.tsx +++ b/src/pages/videos.tsx @@ -7,13 +7,19 @@ import { useSession } from "next-auth/react"; import { useRouter } from "next/router"; import Image from "next/image"; import { getTime } from "~/utils/getTime"; -import Checkout from "~/components/Checkout"; import ProfileMenu from "~/components/ProfileMenu"; import NewVideoMenu from "~/components/NewVideoMenu"; +import VideoRecordModal from "~/components/VideoRecordModal"; +import VideoUploadModal from "~/components/VideoUploadModal"; +import { useAtom } from "jotai"; +import uploadVideoModalOpen from "~/atoms/uploadVideoModalOpen"; +import recordVideoModalOpen from "~/atoms/recordVideoModalOpen"; const VideoList: NextPage = () => { + const [, setRecordOpen] = useAtom(uploadVideoModalOpen); + const [, setUploadOpen] = useAtom(recordVideoModalOpen); const router = useRouter(); - const { status, data: session } = useSession(); + const { status } = useSession(); const { data: videos, isLoading } = api.video.getAll.useQuery(); if (status === "unauthenticated") { @@ -31,11 +37,10 @@ const VideoList: NextPage = () => {
Snapify
- {["active", "past_due"].includes( - session?.user.stripeSubscriptionStatus ?? "" - ) ? ( - - ) : null} + + + + {status === "authenticated" && (
@@ -44,12 +49,32 @@ const VideoList: NextPage = () => {
- {!isLoading && - status !== "loading" && - !["active", "past_due"].includes( - session?.user.stripeSubscriptionStatus ?? "" - ) ? ( - + {videos && videos?.length <= 0 ? ( +
+
+ + No videos found + + + Videos you record will show up here. Already got videos? + Upload them! + +
+ + +
+
+
) : (
{videos && @@ -70,12 +95,6 @@ const VideoList: NextPage = () => { ) : null} - - {videos && videos?.length <= 0 ? ( -
- You do not have any recordings. -
- ) : null}
)}