From dbfcd610f5070a53d6e0339153ec063aa7aa08a9 Mon Sep 17 00:00:00 2001
From: wajeshubham <waje.shubham111@gmail.com>
Date: Fri, 3 Feb 2023 23:25:40 +0530
Subject: [PATCH] Code refactoring: - Update textual data - Refactor imports -
 Add loader on signin and signup

---
 components/Logo.tsx                        | 12 +++++-----
 components/SigninButton.tsx                |  2 +-
 components/editor/SnippngCodeArea.tsx      | 16 ++++++-------
 components/editor/SnippngControlHeader.tsx |  2 +-
 context/AuthContext.tsx                    | 18 +++++++++++++-
 layout/Layout.tsx                          |  4 ++--
 package.json                               |  2 +-
 pages/_document.tsx                        |  5 ++--
 pages/_offline.tsx                         |  1 -
 pages/index.tsx                            | 28 ++++++++++++++++++----
 pages/profile.tsx                          |  9 ++++---
 pages/snippet/[uid].tsx                    |  4 ++--
 12 files changed, 70 insertions(+), 33 deletions(-)

diff --git a/components/Logo.tsx b/components/Logo.tsx
index c040d30..2b761a1 100644
--- a/components/Logo.tsx
+++ b/components/Logo.tsx
@@ -2,7 +2,7 @@ import { clsx } from "@/utils";
 import { CommandLineIcon } from "@heroicons/react/24/outline";
 import React from "react";
 
-const isBeta = true;
+const isBeta = false;
 
 const Logo: React.FC<{ size?: "xs" | "sm" | "xl" | "2xl" }> = ({
   size = "xl",
@@ -47,14 +47,14 @@ const Logo: React.FC<{ size?: "xs" | "sm" | "xl" | "2xl" }> = ({
       <CommandLineIcon
         className={clsx("inset-0 mr-2", getIconClassesBySize() || "")}
       />
-      {isBeta ? (
-        <span className="inline-flex items-center">
-          Snippng
+      <span className="inline-flex items-center">
+        Snippng
+        {isBeta ? (
           <span className="inline-flex items-center ml-1.5 rounded-sm dark:bg-indigo-600 bg-indigo-100 h-[15px] py-1.5 px-1 text-[10px] dark:text-indigo-100 text-indigo-600 border-[1px] border-indigo-600">
             Beta
           </span>
-        </span>
-      ) : null}
+        ) : null}
+      </span>
     </h1>
   );
 };
diff --git a/components/SigninButton.tsx b/components/SigninButton.tsx
index 92d120a..03a25c0 100644
--- a/components/SigninButton.tsx
+++ b/components/SigninButton.tsx
@@ -10,7 +10,7 @@ const SigninButton = () => {
     <>
       <Button data-testid="signin-btn" onClick={loginWithGoogle}>
         <GoogleIcon className="inline-flex mr-2" />
-        Signin
+        Sign in/up
       </Button>
     </>
   );
diff --git a/components/editor/SnippngCodeArea.tsx b/components/editor/SnippngCodeArea.tsx
index 7b41fb2..951d336 100644
--- a/components/editor/SnippngCodeArea.tsx
+++ b/components/editor/SnippngCodeArea.tsx
@@ -242,14 +242,14 @@ const SnippngCodeArea = () => {
           {uid ? (
             <small className="dark:text-zinc-300 text-left text-zinc-600 py-2 inline-block">
               <InformationCircleIcon className="w-4 h-4 inline-block mr-1 mb-1" />{" "}
-              <strong>Note:</strong> clicking{" "}
-              <em>
-                <strong>Fork snippet</strong>
-              </em>{" "}
-              button will create a copy of the current snippet in your profile
-              with exact same configuration of{" "}
-              <strong>theme, language, code and other settings</strong> that are
-              visible to you right now
+              <strong>Note:</strong> When you click the{" "}
+              <strong>
+                <em>Fork snippet</em>
+              </strong>{" "}
+              button, a copy of the current snippet will be created in your
+              profile <strong>with the same settings</strong>. As a result, if
+              you change something and then forked, the snippet will include the
+              changes you made.
             </small>
           ) : null}
         </NoSSRWrapper>
diff --git a/components/editor/SnippngControlHeader.tsx b/components/editor/SnippngControlHeader.tsx
index cd1cb66..e33cbde 100644
--- a/components/editor/SnippngControlHeader.tsx
+++ b/components/editor/SnippngControlHeader.tsx
@@ -14,7 +14,7 @@ import {
   SparklesIcon,
 } from "@heroicons/react/24/outline";
 import * as htmlToImage from "html-to-image";
-import { Fragment, useState } from "react";
+import { Fragment } from "react";
 import Button from "../form/Button";
 import Checkbox from "../form/Checkbox";
 import Range from "../form/Range";
diff --git a/context/AuthContext.tsx b/context/AuthContext.tsx
index c2251c0..9acc7c9 100644
--- a/context/AuthContext.tsx
+++ b/context/AuthContext.tsx
@@ -9,6 +9,8 @@ import {
 } from "firebase/auth";
 import { auth } from "@/config/firebase";
 import { useToast } from "./ToastContext";
+import Layout from "@/layout/Layout";
+import { Loader } from "@/components";
 
 const GithubProvider = new GithubAuthProvider();
 const GoogleProvider = new GoogleAuthProvider();
@@ -40,6 +42,7 @@ const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
   const { addToast } = useToast();
+  const [signingIn, setSigningIn] = useState(false);
   const [user, setUser] = useState<User | null>(null);
 
   /**
@@ -66,6 +69,7 @@ const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
 
   const loginWithGoogle = async () => {
     if (!auth) return console.log(Error("Firebase is not configured")); // This is to handle error when there is no `.env` file. So, that app doesn't crash while developing without `.env` file.
+    setSigningIn(true);
     try {
       await signInWithPopup(auth, GoogleProvider);
       addToast({
@@ -74,6 +78,12 @@ const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
       });
     } catch (error) {
       console.log("Error while logging in", error);
+      addToast({
+        message: "Error occurred while signing in!",
+        type: "error",
+      });
+    } finally {
+      setSigningIn(false);
     }
   };
 
@@ -100,7 +110,13 @@ const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
     <AuthContext.Provider
       value={{ user, loginWithGithub, loginWithGoogle, logout }}
     >
-      {children}
+      {signingIn ? (
+        <Layout>
+          <Loader />
+        </Layout>
+      ) : (
+        children
+      )}
     </AuthContext.Provider>
   );
 };
diff --git a/layout/Layout.tsx b/layout/Layout.tsx
index 026679b..436cc9b 100644
--- a/layout/Layout.tsx
+++ b/layout/Layout.tsx
@@ -11,8 +11,8 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 const Layout: React.FC<Props> = ({
-  title = "Snippng | snippets to png",
-  description = "Create and share beautiful images of your source code.",
+  title = "Snippng | code snippets to image",
+  description = "Write, customize and download gorgeous images of your code snippet.",
   className,
   ...props
 }) => {
diff --git a/package.json b/package.json
index 75b11b5..8312aae 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "snippng",
-  "version": "1.0.0-beta",
+  "version": "1.0.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 074d8aa..1bca189 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -1,12 +1,11 @@
-import { Html, Head, Main, NextScript } from "next/document";
-import Script from "next/script";
+import { Head, Html, Main, NextScript } from "next/document";
 
 const modeScript = `
   let darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
 
   updateMode()
   darkModeMediaQuery.addEventListener('change', updateModeWithoutTransitions)
-  window.addEventListener('storage', updateModeWithoutTransitions)
+  window.addEventListener('storage̦', updateModeWithoutTransitions)
 
   function updateMode() {
     let isDarkMode = window.localStorage.isDarkMode === 'true'
diff --git a/pages/_offline.tsx b/pages/_offline.tsx
index a9fbfed..c6acbe0 100644
--- a/pages/_offline.tsx
+++ b/pages/_offline.tsx
@@ -2,7 +2,6 @@ import { ErrorText } from "@/components";
 import Layout from "@/layout/Layout";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 import { useRouter } from "next/router";
-import React from "react";
 
 const OfflinePage = () => {
   const router = useRouter();
diff --git a/pages/index.tsx b/pages/index.tsx
index 400ca34..506a599 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -3,8 +3,12 @@ import GithubIcon from "@/components/icons/GithubIcon";
 import Layout from "@/layout/Layout";
 import { LANGUAGES, THEMES } from "@/lib/constants";
 import { PlusCircleIcon } from "@heroicons/react/24/outline";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
 
 export default function Home() {
+  const router = useRouter();
+
   const focusOnGenerate = () => {
     let codeArea = document.getElementById("snippng-code-area");
     if (codeArea) {
@@ -13,6 +17,21 @@ export default function Home() {
       });
     }
   };
+
+  useEffect(() => {
+    if (!router.isReady) return;
+    let timer: NodeJS.Timeout;
+    let goToEditor = router.asPath.split("#").includes("snippng-code-area");
+    if (goToEditor) {
+      timer = setTimeout(() => {
+        focusOnGenerate();
+      }, 200);
+    }
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [router.isReady]);
+
   return (
     <Layout>
       <div data-testid="landing-container" className="bg-transparent">
@@ -43,7 +62,7 @@ export default function Home() {
           </svg>
         </div>
         <div className="relative isolate overflow-hidden">
-          <div className="mx-auto max-w-7xl pt-10 pb-24 sm:pb-32 lg:grid lg:grid-cols-2 lg:gap-x-8 lg:py-20">
+          <div className="mx-auto max-w-7xl pt-10 pb-24 sm:pb-32 lg:grid lg:grid-cols-2 lg:gap-x-8 lg:py-12">
             <div className="lg:pt-4">
               <div className="mx-auto max-w-2xl">
                 <div className="max-w-lg">
@@ -81,9 +100,10 @@ export default function Home() {
                     Snippng
                   </h1>
                   <p className="mt-6 md:text-lg text-sm dark:text-zinc-300 text-zinc-600">
-                    Create and share beautiful images of your source code. Start
-                    typing or paste a code snippet into the text area to get
-                    started.
+                    Write, customize and download gorgeous images of your code
+                    snippet. Beautifully designed application that helps you
+                    generate beautiful and customizable images of your code
+                    snippets.
                   </p>
                   <div className="mt-10 flex md:flex-row flex-col md:items-center items-start gap-6 ml-1">
                     <Button
diff --git a/pages/profile.tsx b/pages/profile.tsx
index b669ff3..bf0c325 100644
--- a/pages/profile.tsx
+++ b/pages/profile.tsx
@@ -81,7 +81,9 @@ const UserProfile = () => {
   }, [user]);
 
   return (
-    <Layout>
+    <Layout
+      title={`${user?.displayName || "Snippng"} | code snippets to image`}
+    >
       {!user ? (
         <div
           data-testid="signin-btn-container"
@@ -121,7 +123,7 @@ const UserProfile = () => {
                 <div className="justify-stretch mt-6 flex flex-col-reverse space-y-4 space-y-reverse sm:flex-row-reverse sm:justify-end sm:space-y-0 sm:space-x-3 sm:space-x-reverse md:mt-0 md:flex-row md:space-x-3">
                   <Button
                     StartIcon={PlusCircleIcon}
-                    onClick={() => router.push("/")}
+                    onClick={() => router.push("/#snippng-code-area")}
                   >
                     Generate snippet
                   </Button>
@@ -226,7 +228,8 @@ const UserProfile = () => {
                                     errorActionProps={{
                                       children: "Generate",
                                       StartIcon: PlusIcon,
-                                      onClick: () => router.push("/"),
+                                      onClick: () =>
+                                        router.push("/#snippng-code-area"),
                                     }}
                                   />
                                 )
diff --git a/pages/snippet/[uid].tsx b/pages/snippet/[uid].tsx
index 10b1c90..83e09e3 100644
--- a/pages/snippet/[uid].tsx
+++ b/pages/snippet/[uid].tsx
@@ -55,7 +55,7 @@ const SavedSnippet = () => {
     if (!notFound) return;
     addToast({
       message: "404 Snippet not found",
-      description: "Snippet that you are looking for does not exist.",
+      description: "The snippet you are looking for does not exist.",
       type: "error",
     });
   }, [notFound]);
@@ -66,7 +66,7 @@ const SavedSnippet = () => {
         <div className="w-full py-32">
           <ErrorText
             errorTitle="Invalid snippet ID"
-            errorSubTitle="The snippet that you are looking for does not exist"
+            errorSubTitle="The snippet you are looking for does not exist."
             errorActionProps={{
               children: "Go Back",
               StartIcon: ArrowLeftIcon,