From 1917218c2070fce5f39eb32124ced3bf55ead3f6 Mon Sep 17 00:00:00 2001 From: Davit Jabushanuri Date: Tue, 19 Mar 2024 14:58:15 +0400 Subject: [PATCH 1/7] chore: bump version number to 1.9.5 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6c97cfc..0a534b1 100644 --- a/package.json +++ b/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", From a47defb1c51a57a50661402c138e9d11a1ab4d1c Mon Sep 17 00:00:00 2001 From: Davit Jabushanuri Date: Tue, 19 Mar 2024 20:43:49 +0400 Subject: [PATCH 2/7] refactor: delete auth routes and move login and logout modals to layout --- src/app/auth/signin/page.tsx | 11 ---- src/app/auth/signout/page.tsx | 11 ---- src/app/client.tsx | 15 ----- src/app/explore/page.tsx | 8 +-- src/app/layout.tsx | 4 +- src/app/page.tsx | 4 +- src/app/search/page.tsx | 10 +-- src/features/auth/components/auth-flow.tsx | 64 +++++++++++++++++++ .../auth/components/auth-modal-trigger.tsx | 34 ---------- src/features/auth/components/sign-out.tsx | 20 ------ src/features/auth/components/sing-in.tsx | 21 ------ src/features/auth/index.ts | 6 +- src/features/auth/stores/useJoinTwitter.ts | 24 ------- src/features/explore/components/explore.tsx | 17 ++++- .../search/components/search-results.tsx | 18 +++++- 15 files changed, 103 insertions(+), 164 deletions(-) delete mode 100644 src/app/auth/signin/page.tsx delete mode 100644 src/app/auth/signout/page.tsx delete mode 100644 src/app/client.tsx create mode 100644 src/features/auth/components/auth-flow.tsx delete mode 100644 src/features/auth/components/auth-modal-trigger.tsx delete mode 100644 src/features/auth/components/sign-out.tsx delete mode 100644 src/features/auth/components/sing-in.tsx delete mode 100644 src/features/auth/stores/useJoinTwitter.ts diff --git a/src/app/auth/signin/page.tsx b/src/app/auth/signin/page.tsx deleted file mode 100644 index d305f01..0000000 --- a/src/app/auth/signin/page.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { SignIn } from "@/features/auth"; - -const SignInPage = async () => { - return ; -}; - -export default SignInPage; - -export const metadata = { - title: "Log in to Chirp", -}; diff --git a/src/app/auth/signout/page.tsx b/src/app/auth/signout/page.tsx deleted file mode 100644 index 9ab1243..0000000 --- a/src/app/auth/signout/page.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { SignOut } from "@/features/auth"; - -const SignOutPage = () => { - return ( -
- -
- ); -}; - -export default SignOutPage; diff --git a/src/app/client.tsx b/src/app/client.tsx deleted file mode 100644 index 87aa9a0..0000000 --- a/src/app/client.tsx +++ /dev/null @@ -1,15 +0,0 @@ -"use client"; - -import { Explore } from "@/features/explore"; -import { ExploreHeader, Header } from "@/features/header"; - -export const LandingPageClient = () => { - return ( -
-
- -
- -
- ); -}; diff --git a/src/app/explore/page.tsx b/src/app/explore/page.tsx index 4913aaf..a366553 100644 --- a/src/app/explore/page.tsx +++ b/src/app/explore/page.tsx @@ -1,13 +1,7 @@ import { Explore } from "@/features/explore"; -import { ExploreHeader } from "@/features/header"; const ExplorePage = () => { - return ( -
- - -
- ); + return ; }; export default ExplorePage; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 50a0b81..a2a6d02 100644 --- a/src/app/layout.tsx +++ b/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" /> - + diff --git a/src/app/page.tsx b/src/app/page.tsx index 60efb5a..1505225 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,7 +1,7 @@ -import { LandingPageClient } from "./client"; +import { Explore } from "@/features/explore"; const DefaultPage = () => { - return ; + return ; }; export default DefaultPage; diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx index 0a9a5f7..9aabcac 100644 --- a/src/app/search/page.tsx +++ b/src/app/search/page.tsx @@ -1,15 +1,7 @@ -import { ExploreHeader, Header } from "@/features/header"; import { SearchResults } from "@/features/search"; const SearchPage = () => { - return ( -
-
- -
- -
- ); + return ; }; export default SearchPage; diff --git a/src/features/auth/components/auth-flow.tsx b/src/features/auth/components/auth-flow.tsx new file mode 100644 index 0000000..cea7bff --- /dev/null +++ b/src/features/auth/components/auth-flow.tsx @@ -0,0 +1,64 @@ +"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, + openLogOutModal, + closeLogOutModal, + } = useAuthFlow(); + + if (status === "loading") return ; + + return ( + <> + + {isLogInModalOpen && ( + + + + )} + + {isLogOutModalOpen && ( + + + + )} + + + {!session && ( +
+
+
+

Don’t miss what’s happening

+

People on Twitter are the first to know.

+
+
+ + +
+
+
+ )} + + ); +}; diff --git a/src/features/auth/components/auth-modal-trigger.tsx b/src/features/auth/components/auth-modal-trigger.tsx deleted file mode 100644 index db5f619..0000000 --- a/src/features/auth/components/auth-modal-trigger.tsx +++ /dev/null @@ -1,34 +0,0 @@ -"use client"; -import Link from "next/link"; -import { useSession } from "next-auth/react"; - -import { LoadingScreen } from "@/components/elements/loading-screen"; - -import styles from "./styles/auth-modal-trigger.module.scss"; - -export const AuthModalTrigger = () => { - const { data: session, status } = useSession(); - - if (status === "loading") return ; - - if (session) return null; - - return ( -
-
-
-

Don’t miss what’s happening

-

People on Twitter are the first to know.

-
-
- - -
-
-
- ); -}; diff --git a/src/features/auth/components/sign-out.tsx b/src/features/auth/components/sign-out.tsx deleted file mode 100644 index 0f44830..0000000 --- a/src/features/auth/components/sign-out.tsx +++ /dev/null @@ -1,20 +0,0 @@ -"use client"; -import { useRouter } from "next/navigation"; - -import { Modal } from "@/components/elements/modal"; -import { SignOutModal } from "@/features/auth"; - -export const SignOut = () => { - const router = useRouter(); - - return ( - router.back()} - disableScroll={true} - background={`var(--clr-modal-background)`} - closeOnBackdropClick={true} - > - router.back()} /> - - ); -}; diff --git a/src/features/auth/components/sing-in.tsx b/src/features/auth/components/sing-in.tsx deleted file mode 100644 index 6f4c3ad..0000000 --- a/src/features/auth/components/sing-in.tsx +++ /dev/null @@ -1,21 +0,0 @@ -"use client"; -import { useRouter } from "next/navigation"; - -import { Modal } from "@/components/elements/modal"; - -import { SignInModal } from "./sign-in-modal"; - -export const SignIn = () => { - const router = useRouter(); - - return ( - router.back()} - disableScroll={true} - closeOnBackdropClick={false} - background="var(--clr-modal-background)" - > - router.back()} /> - - ); -}; diff --git a/src/features/auth/index.ts b/src/features/auth/index.ts index 8b128e3..c1e91f7 100644 --- a/src/features/auth/index.ts +++ b/src/features/auth/index.ts @@ -1,4 +1,4 @@ -export * from "./components/auth-modal-trigger"; +export * from "./components/auth-flow"; export * from "./components/sign-in-modal"; export * from "./components/register-form"; export * from "./components/signout-modal"; @@ -6,6 +6,4 @@ export * from "./components/session-owner-button"; export * from "./components/session-owner-modal"; export * from "./components/change-username"; export * from "./components/join-twitter-modal"; -export * from "./stores/useJoinTwitter"; -export * from "./components/sign-out"; -export * from "./components/sing-in"; +export * from "./hooks/use-join-twitter"; diff --git a/src/features/auth/stores/useJoinTwitter.ts b/src/features/auth/stores/useJoinTwitter.ts deleted file mode 100644 index 339a6df..0000000 --- a/src/features/auth/stores/useJoinTwitter.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { create } from "zustand"; - -interface IJoinTwitter { - data: { - isModalOpen: boolean; - action: string; - user?: string; - }; - setData: (data: { - isModalOpen: boolean; - action: string; - user?: string; - }) => void; -} - -export const useJoinTwitter = create((set) => ({ - data: { - isModalOpen: false, - action: "comment", - user: "user", - }, - - setData: (data) => set({ data }), -})); diff --git a/src/features/explore/components/explore.tsx b/src/features/explore/components/explore.tsx index ad24a4f..4054a4f 100644 --- a/src/features/explore/components/explore.tsx +++ b/src/features/explore/components/explore.tsx @@ -1,6 +1,7 @@ "use client"; import { LoadingSpinner } from "@/components/elements/loading-spinner"; import { TryAgain } from "@/components/elements/try-again"; +import { ExploreHeader } from "@/features/header"; import { Trends } from "@/features/trends"; import { InfiniteTweets, useTweets } from "@/features/tweets"; @@ -18,17 +19,29 @@ export const Explore = () => { } = useTweets({}); if (isLoading) { - return ; + return ( + <> + + + + ); } if (isError) { - return ; + return ( + <> + + + + ); } return (
+
+ Explore
diff --git a/src/features/search/components/search-results.tsx b/src/features/search/components/search-results.tsx index f6f6104..dff42fd 100644 --- a/src/features/search/components/search-results.tsx +++ b/src/features/search/components/search-results.tsx @@ -4,6 +4,7 @@ import { useSearchParams } from "next/navigation"; import { LoadingSpinner } from "@/components/elements/loading-spinner"; import { TryAgain } from "@/components/elements/try-again"; import { PersonDetails } from "@/features/connect"; +import { ExploreHeader } from "@/features/header"; import { InfiniteTweets, useTweets } from "@/features/tweets"; import { useSearchPeople } from "../hooks/use-search-people"; @@ -23,12 +24,25 @@ export const SearchResults = () => { const people = useSearchPeople(query); - if (tweets.isPending || tweets.isFetching) return ; + if (tweets.isPending || tweets.isFetching) + return ( + <> + + + + ); - if (tweets.isError) return ; + if (tweets.isError) + return ( + <> + + + + ); return (
+ {tweets?.data?.pages && tweets?.data?.pages[0]?.tweets?.length === 0 && people?.data?.length === 0 ? ( From 6efeb43bec04a8348e2d8accbcb5b73e72212d2b Mon Sep 17 00:00:00 2001 From: Davit Jabushanuri Date: Tue, 19 Mar 2024 20:45:42 +0400 Subject: [PATCH 3/7] refactor: replace links with buttons and apply correct z-index to auth-flow component --- .../auth/components/session-owner-button.tsx | 5 +-- .../auth/components/session-owner-modal.tsx | 32 +++++++++++++------ .../styles/auth-modal-trigger.module.scss | 2 +- 3 files changed, 25 insertions(+), 14 deletions(-) diff --git a/src/features/auth/components/session-owner-button.tsx b/src/features/auth/components/session-owner-button.tsx index 2cfb581..f636c37 100644 --- a/src/features/auth/components/session-owner-button.tsx +++ b/src/features/auth/components/session-owner-button.tsx @@ -58,10 +58,7 @@ export const SessionOwnerButton = () => { background="none" minViewportWidth={500} > - setIsModalOpen(false)} - /> + )} diff --git a/src/features/auth/components/session-owner-modal.tsx b/src/features/auth/components/session-owner-modal.tsx index 37493a6..0d937c5 100644 --- a/src/features/auth/components/session-owner-modal.tsx +++ b/src/features/auth/components/session-owner-modal.tsx @@ -1,19 +1,20 @@ "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) => { +export const SessionOwnerModal = forwardRef((ref) => { const { data: session } = useSession(); + const { openLogInModal, openLogOutModal } = useAuthFlow(); + const buttonBoundaries = useTrackPosition({ buttonRef: ref as React.RefObject, trackScroll: false, @@ -45,12 +46,25 @@ export const SessionOwnerModal = forwardRef< style={style} role="group" > - + + + ); }); diff --git a/src/features/auth/components/styles/auth-modal-trigger.module.scss b/src/features/auth/components/styles/auth-modal-trigger.module.scss index a1f2306..4bb6438 100644 --- a/src/features/auth/components/styles/auth-modal-trigger.module.scss +++ b/src/features/auth/components/styles/auth-modal-trigger.module.scss @@ -6,7 +6,7 @@ right: 0; left: 0; height: 3.8rem; - z-index: 1000; + z-index: var(--z-index-fixed); background-color: var(--clr-background); display: flex; align-items: center; From 7ed2fea55f6700ff1d976983dc78aa4550cceac7 Mon Sep 17 00:00:00 2001 From: Davit Jabushanuri Date: Tue, 19 Mar 2024 20:46:23 +0400 Subject: [PATCH 4/7] feat: create use-auth-flow hook to control login and logout modals --- src/features/auth/hooks/use-auth-flow.ts | 20 +++++++++++++++++ src/features/auth/hooks/use-join-twitter.ts | 24 +++++++++++++++++++++ 2 files changed, 44 insertions(+) create mode 100644 src/features/auth/hooks/use-auth-flow.ts create mode 100644 src/features/auth/hooks/use-join-twitter.ts diff --git a/src/features/auth/hooks/use-auth-flow.ts b/src/features/auth/hooks/use-auth-flow.ts new file mode 100644 index 0000000..8d798b8 --- /dev/null +++ b/src/features/auth/hooks/use-auth-flow.ts @@ -0,0 +1,20 @@ +import { create } from "zustand"; + +interface IAuthFlow { + isLogInModalOpen: boolean; + openLogInModal: () => void; + closeLogInModal: () => void; + isLogOutModalOpen: boolean; + openLogOutModal: () => void; + closeLogOutModal: () => void; +} + +export const useAuthFlow = create((set) => ({ + isLogInModalOpen: false, + openLogInModal: () => set({ isLogInModalOpen: true }), + closeLogInModal: () => set({ isLogInModalOpen: false }), + + isLogOutModalOpen: false, + openLogOutModal: () => set({ isLogOutModalOpen: true }), + closeLogOutModal: () => set({ isLogOutModalOpen: false }), +})); diff --git a/src/features/auth/hooks/use-join-twitter.ts b/src/features/auth/hooks/use-join-twitter.ts new file mode 100644 index 0000000..339a6df --- /dev/null +++ b/src/features/auth/hooks/use-join-twitter.ts @@ -0,0 +1,24 @@ +import { create } from "zustand"; + +interface IJoinTwitter { + data: { + isModalOpen: boolean; + action: string; + user?: string; + }; + setData: (data: { + isModalOpen: boolean; + action: string; + user?: string; + }) => void; +} + +export const useJoinTwitter = create((set) => ({ + data: { + isModalOpen: false, + action: "comment", + user: "user", + }, + + setData: (data) => set({ data }), +})); From 70ac98025aa0e01d448a3056f474c01a8fa73ede Mon Sep 17 00:00:00 2001 From: Davit Jabushanuri Date: Tue, 19 Mar 2024 20:47:34 +0400 Subject: [PATCH 5/7] refactor: update use-join-twitter hook import --- src/features/auth/components/join-twitter-modal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/auth/components/join-twitter-modal.tsx b/src/features/auth/components/join-twitter-modal.tsx index 5ef1fc4..543494a 100644 --- a/src/features/auth/components/join-twitter-modal.tsx +++ b/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(); From de428f0c2f55a25be1cca87928c447d8e9181431 Mon Sep 17 00:00:00 2001 From: Davit Jabushanuri Date: Tue, 19 Mar 2024 20:51:24 +0400 Subject: [PATCH 6/7] refactor: remove extra text from explore component --- .../auth/components/session-owner-modal.tsx | 102 +++++++++--------- src/features/explore/components/explore.tsx | 1 - 2 files changed, 52 insertions(+), 51 deletions(-) diff --git a/src/features/auth/components/session-owner-modal.tsx b/src/features/auth/components/session-owner-modal.tsx index 0d937c5..1a8e7bf 100644 --- a/src/features/auth/components/session-owner-modal.tsx +++ b/src/features/auth/components/session-owner-modal.tsx @@ -10,63 +10,65 @@ import { useAuthFlow } from "../hooks/use-auth-flow"; import styles from "./styles/session-owner-modal.module.scss"; -export const SessionOwnerModal = forwardRef((ref) => { - const { data: session } = useSession(); +export const SessionOwnerModal = forwardRef( + (_props, ref) => { + const { data: session } = useSession(); - const { openLogInModal, openLogOutModal } = useAuthFlow(); + const { openLogInModal, openLogOutModal } = useAuthFlow(); - const buttonBoundaries = useTrackPosition({ - buttonRef: ref as React.RefObject, - trackScroll: false, - }); + const buttonBoundaries = useTrackPosition({ + buttonRef: ref as React.RefObject, + 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%)", - }; + 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; + if (!session) return null; - return ( - - + - - - ); -}); + + + ); + }, +); SessionOwnerModal.displayName = "SessionOwnerModal"; diff --git a/src/features/explore/components/explore.tsx b/src/features/explore/components/explore.tsx index 4054a4f..17ba589 100644 --- a/src/features/explore/components/explore.tsx +++ b/src/features/explore/components/explore.tsx @@ -41,7 +41,6 @@ export const Explore = () => {
- Explore
From 16618d72c7835d248db005d4a3afda7712b0ee09 Mon Sep 17 00:00:00 2001 From: Davit Jabushanuri Date: Tue, 19 Mar 2024 21:36:47 +0400 Subject: [PATCH 7/7] refactor: open the correct modal when clicking on sign up button --- src/features/auth/components/auth-flow.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/features/auth/components/auth-flow.tsx b/src/features/auth/components/auth-flow.tsx index cea7bff..37a1860 100644 --- a/src/features/auth/components/auth-flow.tsx +++ b/src/features/auth/components/auth-flow.tsx @@ -19,7 +19,6 @@ export const AuthFlow = () => { isLogOutModalOpen, openLogInModal, closeLogInModal, - openLogOutModal, closeLogOutModal, } = useAuthFlow(); @@ -52,7 +51,7 @@ export const AuthFlow = () => { -