chore: touch up on components

src/components/AccountModal.tsx

@@ -62,9 +62,12 @@ export const AccountModal = () => {
                         <LessonProgress key={index} lesson={lesson} />
                     ))}
                 </div>
-                <a onClick={() => signOut()} className="transition cursor-pointer hover:text-rose-500 mt-2">
+                <button
+                    onClick={() => signOut()}
+                    className="transition cursor-pointer hover:text-rose-500 mt-2 underline"
+                >
                     Log Out
-                </a>
+                </button>
             </>
         </Modal >
     )

src/components/AuthModal.tsx

@@ -2,12 +2,12 @@ import { isOpen, type } from '@context/ModalStore'
 import { useStore } from '@nanostores/react'
 import { Button } from "@components/Button"
 import { signIn } from "auth-astro/client"
-import { Modal } from "@components/Modal"
 import { useEffect, useState } from "react"
-import qs from "query-string"
+import { Modal } from "@components/Modal"
 
 export const AuthModal = () => {
-    const [login, setLogin] = useState("")
+    const [forceOpen, setForceOpen] = useState(false)
+    const [isLoading, setIsLoading] = useState(false)
     const $isOpen = useStore(isOpen)
     const $type = useStore(type)
 
@@ -16,45 +16,70 @@ export const AuthModal = () => {
         type.set(null)
     }
 
+    const handleSignUp = (provider: "google" | "github") => {
+        setIsLoading(true)
+        signIn(provider)
+    }
+
     useEffect(() => {
-        const url = qs.parseUrl(window.location.href)
-        setLogin(url.query.login as string)
+        const url = new URL(window.location.href)
+
+        const protectedRoutes = [
+            "/lessons/solo",
+            "/lessons/team",
+            "/lessons/pro",
+            "/lessons/bonus",
+        ]
+
+        const checkAuth = async () => {
+            const response = await fetch("/api/user/auth")
+            const data = await response.json()
+
+            if (!data.authenticated) {
+                setForceOpen(true)
+                isOpen.set(!$isOpen)
+                type.set("auth")
+            }
 
-        if (login) {
-            isOpen.set(!$isOpen)
-            type.set("auth")
         }
-    }, [login])
+
+        if (protectedRoutes.some(route => url.pathname.includes(route))) checkAuth()
+    }, [])
 
     return (
         <Modal
             isOpen={$isOpen && $type == "auth"}
             handleClose={handleClose}
             header="Create CS000 Account"
+            allowClose={!forceOpen}
         >
             <div className="flex flex-col items-center space-y-5">
                 <Button
+                    id="google-sign-up"
+                    isDisabled={isLoading}
                     eventName="Google Sign Up"
-                    onClick={() => signIn("google")}
+                    onClick={() => handleSignUp("google")}
                     className="btn-md btn-git flex items-center gap-3"
                 >
                     <img
                         height={20}
                         width={20}
-                        src="./icons/google.svg"
+                        src="/icons/google.svg"
                         alt="google login"
                     />
                     Continue with Google
                 </Button>
                 <Button
+                    id="github-sign-up"
+                    isDisabled={isLoading}
                     eventName="GitHub Sign Up"
-                    onClick={() => signIn("github")}
+                    onClick={() => handleSignUp("github")}
                     className="btn-md btn-github flex items-center gap-3"
                 >
                     <img
                         height={20}
                         width={20}
-                        src="./icons/github.svg"
+                        src="/icons/github.svg"
                         alt="github login"
                     />
                     Continue with GitHub

src/components/Blocks/CTA.astro

@@ -1,9 +1,6 @@
 ---
-import { getSession } from "auth-astro/server"
 import { GetStarted } from "@components/GetStarted"
 import Container from "../Container.astro"
-
-const session = await getSession(Astro.request)
 ---
 
 <Container>
@@ -18,15 +15,11 @@ const session = await getSession(Astro.request)
             <span class="text-git-gradient">Zero</span> Reasons To Not Start.
         </h1>
         <div>
-            {
-                session ? (
-                    <a href="/lessons" class="btn-lg btn-git">
-                        Go To Lessons
-                    </a>
-                ) : (
-                    <GetStarted className="btn-lg btn-git" client:load />
-                )
-            }
+            <GetStarted
+                className="btn-lg btn-git"
+                eventName="Sign Up CTA"
+                client:load
+            />
         </div>
     </section>
 </Container>

src/components/Blocks/Hero.astro

@@ -1,9 +1,6 @@
 ---
-import { getSession } from "auth-astro/server"
 import { GetStarted } from "@components/GetStarted"
 import Description from "../Description.astro"
-
-const session = await getSession(Astro.request)
 ---
 
 <section
@@ -22,14 +19,10 @@ const session = await getSession(Astro.request)
         Don't be the guy that emails code back and forth 😐
     </Description>
     <div>
-        {
-            session ? (
-                <a href="/lessons" class="btn-lg btn-github">
-                    Go To Lessons
-                </a>
-            ) : (
-                <GetStarted className="btn-lg btn-github" client:load />
-            )
-        }
+        <GetStarted
+            className="btn-lg btn-github"
+            eventName="Sign Up Hero"
+            client:load
+        />
     </div>
 </section>

src/components/Button.tsx

@@ -2,12 +2,19 @@ interface Props {
     children: React.ReactNode,
     onClick?: () => void,
     className: string,
+    isDisabled?: boolean,
     eventName?: string,
+    id?: string,
 }
 
-export const Button = ({ children, onClick, className, eventName }: Props) => {
+export const Button = ({ children, onClick, className, eventName, isDisabled = false, id }: Props) => {
     return (
-        <button data-umami-event={eventName} onClick={onClick} className={className}>
+        <button
+            id={id}
+            onClick={onClick}
+            disabled={isDisabled}
+            data-umami-event={eventName}
+            className={className + " disabled:cursor-not-allowed disabled:opacity-75"}>
             {children}
         </button>
     )

src/components/Chart.astro

@@ -10,7 +10,7 @@
     is:inline
     type="text/javascript"
     src="https://www.gstatic.com/charts/loader.js"></script>
-<script type="text/javascript">
+<script is:inline type="text/javascript">
     google.charts.load("current", { packages: ["corechart"] })
 
     google.charts.setOnLoadCallback(drawChart)

src/components/Footer.astro

@@ -50,19 +50,19 @@ const links2 = [
         subLinks: [
             {
                 label: "GitHub",
-                href: "/"
+                href: "https://github.com/anav5704/CS000"
             },
             {
                 label: " Issues",
-                href: "/"
+                href: "https://github.com/anav5704/CS000/issues"
             },
             {
                 label: "README",
-                href: "/"
+                href: "https://github.com/anav5704/CS000/blob/main/README.md"
             },
             {
                 label: "Contrubute",
-                href: "/"
+                href: "https://github.com/anav5704/CS000/blob/main/.github/CONTRIBUTING.md"
             }
         ]
     },
@@ -75,7 +75,7 @@ const links2 = [
             },
             {
                 label: "Code of Conduct",
-                href: "https://github.com/anav5704/cs000/blob/main/CODE_OF_CONDUCT.md"
+                href: "https://github.com/anav5704/cs000/blob/main/.github/CODE_OF_CONDUCT.md"
             },
             {
                 label: "Privacy Policy",
@@ -97,7 +97,7 @@ const links2 = [
         <div
             class="flex flex-row md:flex-col grow md:justify-between justify-start p-5"
         >
-            <p class="w-1/2 md:w-fit">CS000</p>
+            <p class="w-1 2 md:w-fit">CS000</p>
             <p class="text-zinc-500 w-1/2 md:w-fit">
                 Created by <a
                     class="underline text-black font-bold"

src/components/GetStarted.tsx

@@ -1,25 +1,48 @@
 import { isOpen, type } from '@context/ModalStore'
+import { useEffect, useState } from "react"
 import { useStore } from '@nanostores/react'
 import { Button } from "@components/Button"
 
 interface Props {
     className: string
+    eventName?: string,
 }
 
-export const GetStarted = ({ className }: Props) => {
+export const GetStarted = ({ className, eventName }: Props) => {
+    const [user, setUser] = useState(false)
     const $isOpen = useStore(isOpen)
 
     const handleOpen = () => {
         isOpen.set(!$isOpen)
         type.set("auth")
     }
 
+    useEffect(() => {
+        (async () => {
+            const response = await fetch("/api/user/auth")
+            const data = await response.json()
+            console.log(data)
+
+            setUser(data.authenticated)
+        })()
+    }, [])
+
+
     return (
-        <Button
-            onClick={handleOpen}
-            className={className}
-        >
-            Get Started - It's Free!
-        </Button>
+        user ? (
+            <a href="/lessons">
+                <button className={className}>
+                    Go To Lessons
+                </button>
+            </a>
+        ) : (
+            <Button
+                onClick={handleOpen}
+                className={className}
+                eventName={eventName}
+            >
+                Get Started - It's Free!
+            </Button>
+        )
     )
 }

src/components/LessonCard.astro

@@ -1,17 +1,16 @@
 ---
-import { type LucideIcon, Check } from "lucide-react"
+import { Check } from "lucide-react"
 import { Button } from "@components/Button"
 
 interface Props {
     title: string
     description: string
-    icon: LucideIcon
     items: string[]
     url: string
     type: "git" | "github"
 }
 
-const { title, description, icon: Icon, items, type, url } = Astro.props
+const { title, description, items, type, url } = Astro.props
 
 let style = ""
 let background = ""

src/components/MediaModal.tsx

@@ -2,7 +2,6 @@ import { isOpen, type } from '@context/ModalStore'
 import { MediaViewer } from "@components/MediaViewer"
 import { useStore } from '@nanostores/react'
 import { media } from '@context/ModalStore'
-import { Image } from "astro:assets"
 
 export const MediaModal = () => {
     const $isOpen = useStore(isOpen)

src/components/Modal.tsx

@@ -4,10 +4,11 @@ interface Props {
     header: string,
     children: React.ReactNode,
     isOpen: boolean,
+    allowClose?: boolean,
     handleClose: () => void
 }
 
-export const Modal = ({ header, children, isOpen, handleClose }: Props) => {
+export const Modal = ({ header, children, isOpen, handleClose, allowClose = true }: Props) => {
     if (!isOpen) return null
 
     return (
@@ -16,12 +17,12 @@ export const Modal = ({ header, children, isOpen, handleClose }: Props) => {
                 open={isOpen}
                 className="relative bg-white rounded-2xl text-center p-7 flex flex-col items-center gap-10 w-full max-w-md"
             >
-                <div
+                {allowClose && <div
                     onClick={handleClose}
                     className="text-zinc-400 hover:text-black transition absolute top-0 right-0 cursor-pointer p-5"
                 >
                     <X size={20} />
-                </div>
+                </div>}
                 <h1 className="text-2xl font-bold">{header}</h1>
                 {children}
             </dialog>

src/components/ProgressToggle.tsx

@@ -1,6 +1,5 @@
 import { progress, removeItem, addItem } from "@context/ProgressStore"
 import { CheckBox } from "@components/CheckBox"
-import * as Sentry from "@sentry/astro"
 import { useState } from "react"
 
 interface Props {
@@ -37,7 +36,6 @@ export const ProgressToggle = ({ lesson, chapterId }: Props) => {
             }
 
         } catch (error) {
-            Sentry.captureException(error)
             console.error(error)
         } finally {
             setIsLoading(false)