Merge branch 'hotfix/1.9.5'

package.json

@@ -1,7 +1,7 @@
 {
  "name": "chirp",
  "description": "Chirp is a social media app built with Next.js, Prisma, and Supabase",
- "version": "1.9.4",
+ "version": "1.9.5",
  "private": true,
  "scripts": {
  "start": "next start",

src/app/explore/page.tsx

@@ -1,13 +1,7 @@
 import { Explore } from "@/features/explore";
-import { ExploreHeader } from "@/features/header";
 
 const ExplorePage = () => {
- return (
- <div>
- <ExploreHeader />
- <Explore />
- </div>
- );
+ return <Explore />;
 };
 
 export default ExplorePage;

src/app/layout.tsx

@@ -5,7 +5,7 @@ import "react-toastify/dist/ReactToastify.css";
 import "./styles/layout.scss";
 import "./styles/tailwind.css";
 import { Aside } from "@/features/aside";
-import { AuthModalTrigger } from "@/features/auth";
+import { AuthFlow } from "@/features/auth";
 import { MobileTweetButton } from "@/features/create-tweet";
 import { MobileNavbar } from "@/features/navbar";
 import { Sidebar } from "@/features/sidebar";
@@ -63,7 +63,7 @@ export default async function RootLayout({
  role="alert"
  />
 
- <AuthModalTrigger />
+ <AuthFlow />
  <JoinTwitter />
  <Hamburger />
  </div>

src/app/page.tsx

@@ -1,7 +1,7 @@
-import { LandingPageClient } from "./client";
+import { Explore } from "@/features/explore";
 
 const DefaultPage = () => {
- return <LandingPageClient />;
+ return <Explore />;
 };
 
 export default DefaultPage;

src/app/search/page.tsx

@@ -1,15 +1,7 @@
-import { ExploreHeader, Header } from "@/features/header";
 import { SearchResults } from "@/features/search";
 
 const SearchPage = () => {
- return (
- <div>
- <Header>
- <ExploreHeader />
- </Header>
- <SearchResults />
- </div>
- );
+ return <SearchResults />;
 };
 
 export default SearchPage;

src/features/auth/components/auth-flow.tsx

@@ -0,0 +1,63 @@
+"use client";
+import { AnimatePresence } from "framer-motion";
+import { useSession } from "next-auth/react";
+
+import { LoadingScreen } from "@/components/elements/loading-screen";
+import { Modal } from "@/components/elements/modal";
+
+import { useAuthFlow } from "../hooks/use-auth-flow";
+
+import { SignInModal } from "./sign-in-modal";
+import { SignOutModal } from "./signout-modal";
+import styles from "./styles/auth-modal-trigger.module.scss";
+
+export const AuthFlow = () => {
+ const { data: session, status } = useSession();
+
+ const {
+ isLogInModalOpen,
+ isLogOutModalOpen,
+ openLogInModal,
+ closeLogInModal,
+ closeLogOutModal,
+ } = useAuthFlow();
+
+ if (status === "loading") return <LoadingScreen />;
+
+ return (
+ <>
+ <AnimatePresence>
+ {isLogInModalOpen && (
+ <Modal onClose={closeLogInModal}>
+ <SignInModal onClose={closeLogInModal} />
+ </Modal>
+ )}
+
+ {isLogOutModalOpen && (
+ <Modal onClose={closeLogOutModal}>
+ <SignOutModal onClose={closeLogOutModal} />
+ </Modal>
+ )}
+ </AnimatePresence>
+
+ {!session && (
+ <div className={styles.container}>
+ <div className={styles.content}>
+ <div className={styles.text}>
+ <h1>Don’t miss what’s happening</h1>
+ <p>People on Twitter are the first to know.</p>
+ </div>
+ <div className={styles.buttons}>
+ <button onClick={openLogInModal} className={styles.signIn}>
+ Log in
+ </button>
+ <button onClick={openLogInModal} className={styles.signUp}>
+ Sign up
+ </button>
+ </div>
+ </div>
+ </div>
+ )}
+ </>
+ );
+};

src/features/auth/components/join-twitter-modal.tsx

@@ -13,7 +13,7 @@ import { Button } from "@/components/elements/button";
 import { Tooltip } from "@/components/elements/tooltip";
 import { cn } from "@/utils/cn";
 
-import { useJoinTwitter } from "../stores/useJoinTwitter";
+import { useJoinTwitter } from "../hooks/use-join-twitter";
 
 export const JoinTwitterModal = () => {
  const router = useRouter();

src/features/auth/components/session-owner-button.tsx

@@ -58,10 +58,7 @@ export const SessionOwnerButton = () => {
  background="none"
  minViewportWidth={500}
  >
- <SessionOwnerModal
- ref={buttonRef}
- onClose={() => setIsModalOpen(false)}
- />
+ <SessionOwnerModal ref={buttonRef} />
  </Modal>
  )}
  </AnimatePresence>

src/features/auth/components/session-owner-modal.tsx

@@ -1,58 +1,74 @@
 "use client";
 import { motion } from "framer-motion";
-import Link from "next/link";
 import { useSession } from "next-auth/react";
 import { forwardRef } from "react";
 
+import { Button } from "@/components/elements/button";
 import { useTrackPosition } from "@/components/elements/modal";
 
+import { useAuthFlow } from "../hooks/use-auth-flow";
+
 import styles from "./styles/session-owner-modal.module.scss";
 
-export const SessionOwnerModal = forwardRef<
- HTMLButtonElement,
- { onClose: () => void }
->(({ onClose }, ref) => {
- const { data: session } = useSession();
-
- const buttonBoundaries = useTrackPosition({
- buttonRef: ref as React.RefObject<HTMLButtonElement>,
- trackScroll: false,
- });
-
- const style: React.CSSProperties = {
- position: "fixed",
- top: buttonBoundaries?.top
- ? buttonBoundaries?.top - buttonBoundaries?.height - 50
- : "50%",
- left: buttonBoundaries?.left ? buttonBoundaries?.left : "50%",
- transform: buttonBoundaries?.top
- ? "translate(0, 0)"
- : "translate(-50%, -50%)",
- };
-
- if (!session) return null;
-
- return (
- <motion.div
- initial={{ opacity: 0, y: "100%" }}
- animate={{ opacity: 1, y: 0 }}
- exit={{ opacity: 0, y: "100%" }}
- transition={{
- ease: "easeInOut",
- duration: 0.2,
- }}
- className={styles.container}
- style={style}
- role="group"
- >
- <Link href={`/auth/signin`} role="menuitem" onClick={onClose}>
- Add an existing account
- </Link>
- <Link href={`/auth/signout`} role="menuitem" onClick={onClose}>
- Log out @{session?.user?.email.split("@")[0]}
- </Link>
- </motion.div>
- );
-});
+export const SessionOwnerModal = forwardRef<HTMLButtonElement>(
+ (_props, ref) => {
+ const { data: session } = useSession();
+
+ const { openLogInModal, openLogOutModal } = useAuthFlow();
+
+ const buttonBoundaries = useTrackPosition({
+ buttonRef: ref as React.RefObject<HTMLButtonElement>,
+ trackScroll: false,
+ });
+
+ const style: React.CSSProperties = {
+ position: "fixed",
+ top: buttonBoundaries?.top
+ ? buttonBoundaries?.top - buttonBoundaries?.height - 50
+ : "50%",
+ left: buttonBoundaries?.left ? buttonBoundaries?.left : "50%",
+ transform: buttonBoundaries?.top
+ ? "translate(0, 0)"
+ : "translate(-50%, -50%)",
+ };
+
+ if (!session) return null;
+
+ return (
+ <motion.div
+ initial={{ opacity: 0, y: "100%" }}
+ animate={{ opacity: 1, y: 0 }}
+ exit={{ opacity: 0, y: "100%" }}
+ transition={{
+ ease: "easeInOut",
+ duration: 0.2,
+ }}
+ className={styles.container}
+ style={style}
+ role="group"
+ >
+ <Button
+ className="w-full justify-start rounded-none py-[0.8em] -outline-offset-2 hover:bg-neutral-400 focus-visible:bg-neutral-400 active:bg-neutral-500"
+ onClick={() => {
+ openLogInModal();
+ }}
+ role="menuitem"
+ >
+ Add an existing account
+ </Button>
+
+ <Button
+ className="w-full justify-start rounded-none py-[0.8em] -outline-offset-2 hover:bg-neutral-400 focus-visible:bg-neutral-400 active:bg-neutral-500"
+ onClick={() => {
+ openLogOutModal();
+ }}
+ role="menuitem"
+ >
+ Log out @{session?.user?.email.split("@")[0]}
+ </Button>
+ </motion.div>
+ );
+ },
+);
 
 SessionOwnerModal.displayName = "SessionOwnerModal";