Revert "implement pro version updates"

This reverts commit 041fa31a86b876e98d32e343857354bddd698fe6.

src/components/Footer/index.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { FaDiscord, FaGithub, FaLinkedin, FaTwitter } from "react-icons/fa";
 import styled from "styled-components";
+import pkg from "../../../package.json";
 
 export const StyledFooter = styled.footer`
   display: flex;
@@ -46,7 +47,7 @@ export const Footer = () => (
         <img width="120" height="20" src="assets/icon.png" alt="icon" loading="lazy" />
       </Link>
       <span>
-        © {new Date().getFullYear()} JSON Crack
+        © {new Date().getFullYear()} JSON Crack - {pkg.version}
       </span>
     </StyledFooterText>
     <StyledIconLinks>

src/components/Navbar/index.tsx

@@ -1,59 +0,0 @@
-import React from "react";
-import Link from "next/link";
-import styled from "styled-components";
-
-const StyledNavbar = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 20px;
-  padding: 16px 48px;
-
-  @media only screen and (max-width: 768px) {
-    a:first-of-type {
-      display: none;
-    }
-  }
-`;
-
-const StyledLinkWrapper = styled.nav`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 20px;
-`;
-
-const StyledNavLink = styled(Link)`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 1rem;
-  cursor: pointer;
-  transition: color 0.2s;
-
-  &:hover {
-    font-weight: 500;
-    color: ${({ theme }) => theme.ORANGE};
-  }
-`;
-
-export const Navbar = () => (
-  <StyledNavbar>
-    <Link href="/">
-      <img src="assets/icon.png" alt="json crack" width="120" />
-    </Link>
-    <StyledLinkWrapper>
-      <StyledNavLink href="/editor">Editor</StyledNavLink>
-      <StyledNavLink href="#features">Features</StyledNavLink>
-      <StyledNavLink href="#sponsor">Sponsor</StyledNavLink>
-      <StyledNavLink
-        href="https://github.com/AykutSarac/jsoncrack.com"
-        target="_blank"
-        rel="external"
-      >
-        GitHub
-      </StyledNavLink>
-      <StyledNavLink href="docs">Documentation</StyledNavLink>
-    </StyledLinkWrapper>
-  </StyledNavbar>
-);

src/containers/Home/index.tsx

@@ -21,12 +21,27 @@ import { baseURL } from "src/constants/data";
 import { TABS } from "src/constants/previewSection";
 import { PricingCards } from "../PricingCards";
 import * as Styles from "./styles";
-import { Navbar } from "src/components/Navbar";
 
 const SyntaxHighlighter = dynamic(() => import("react-syntax-highlighter/dist/cjs/prism-async"), {
   ssr: false,
 });
 
+const Navbar = () => (
+  <Styles.StyledNavbar>
+    <Styles.StyledNavLink href="/editor">Editor</Styles.StyledNavLink>
+    <Styles.StyledNavLink href="#features">Features</Styles.StyledNavLink>
+    <Styles.StyledNavLink href="#sponsor">Sponsor</Styles.StyledNavLink>
+    <Styles.StyledNavLink
+      href="https://github.com/AykutSarac/jsoncrack.com"
+      target="_blank"
+      rel="external"
+    >
+      GitHub
+    </Styles.StyledNavLink>
+    <Styles.StyledNavLink href="docs">Documentation</Styles.StyledNavLink>
+  </Styles.StyledNavbar>
+);
+
 const HeroSection = () => (
   <Styles.StyledHeroSection id="main">
     <Styles.StyledTitle>

src/pages/_app.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import type { AppProps } from "next/app";
-import { useRouter } from "next/router";
 import localFont from "@next/font/local";
 import { init } from "@sentry/nextjs";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
@@ -10,7 +9,6 @@ import GlobalStyle from "src/constants/globalStyle";
 import { darkTheme, lightTheme } from "src/constants/theme";
 import { ModalController } from "src/containers/ModalController";
 import useStored from "src/store/useStored";
-import useUser from "src/store/useUser";
 import { ThemeProvider } from "styled-components";
 
 const monaSans = localFont({
@@ -37,19 +35,14 @@ const queryClient = new QueryClient({
 });
 
 function JsonCrack({ Component, pageProps }: AppProps) {
-  const [isLoaded, setIsLoaded] = React.useState(false);
-  const { isReady } = useRouter();
+  const [isReady, setReady] = React.useState(false);
   const lightmode = useStored(state => state.lightmode);
-  const checkSession = useUser(state => state.checkSession);
 
   React.useEffect(() => {
-    if (isReady) {
-      checkSession();
-    }
-    setIsLoaded(true);
-  }, [checkSession, isReady]);
+    setReady(true);
+  }, []);
 
-  if (isLoaded)
+  if (isReady)
     return (
       <QueryClientProvider client={queryClient}>
         <GoogleAnalytics />

src/pages/docs.tsx

@@ -2,8 +2,8 @@ import React from "react";
 import dynamic from "next/dynamic";
 import Head from "next/head";
 import materialDark from "react-syntax-highlighter/dist/cjs/styles/prism/material-dark";
+import { Button } from "src/components/Button";
 import { Footer } from "src/components/Footer";
-import { Navbar } from "src/components/Navbar";
 import styled from "styled-components";
 
 const SyntaxHighlighter = dynamic(() => import("react-syntax-highlighter/dist/cjs/prism-async"), {
@@ -58,12 +58,14 @@ const StyledHighlight = styled.span<{ link?: boolean; alert?: boolean }>`
 const Docs = () => {
   return (
     <>
-      <Navbar />
       <Head>
         <title>Creating JSON Crack Embed | JSON Crack</title>
         <meta name="description" content="Embedding JSON Crack tutorial into your websites." />
       </Head>
       <StyledPage>
+        <Button href="/" link status="SECONDARY">
+          &lt; Go Back
+        </Button>
         <h1>Documentation</h1>
         <StyledContent>
           <h2># Fetching from URL</h2>

src/pages/pricing.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { Button } from "src/components/Button";
 import { Footer } from "src/components/Footer";
-import { Navbar } from "src/components/Navbar";
 import { PricingCards } from "src/containers/PricingCards";
 import styled from "styled-components";
 
@@ -18,7 +17,6 @@ const StyledHeroSection = styled.section`
 const Pricing = () => {
   return (
     <>
-      <Navbar />
       <StyledPageWrapper>
         <Button href="/" link>
           &lt; Go Back

src/pages/sign-in.tsx

@@ -1,70 +0,0 @@
-import React from "react";
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { AiOutlineGithub, AiOutlineGoogle } from "react-icons/ai";
-import { altogic } from "src/api/altogic";
-import { Button } from "src/components/Button";
-import { Footer } from "src/components/Footer";
-import { Navbar } from "src/components/Navbar";
-import useUser from "src/store/useUser";
-import styled from "styled-components";
-
-const StyledPageWrapper = styled.div`
-  padding: 5%;
-`;
-
-const StyledHeroSection = styled.section`
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  align-items: center;
-`;
-
-const StyledLoginButtons = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  margin-top: 60px;
-  gap: 24px;
-`;
-
-const SignIn = () => {
-  const isPremium = useUser(state => state.isPremium());
-  const { replace } = useRouter();
-
-  React.useEffect(() => {
-    if (isPremium) replace("/editor");
-  }, [isPremium, replace]);
-
-  const handleLoginClick = () => {
-    altogic.auth.signInWithProvider("google");
-  };
-
-  return (
-    <>
-      <Navbar />
-      <StyledPageWrapper>
-        <StyledHeroSection>
-          <Link href="/">
-            <img src="assets/icon.png" alt="json crack" width="400" />
-          </Link>
-          <h1>Sign In</h1>
-        </StyledHeroSection>
-        <StyledLoginButtons>
-          <Button status="DANGER" onClick={handleLoginClick}>
-            <AiOutlineGoogle size={24} />
-            Login with Google
-          </Button>
-          <Button status="TERTIARY" disabled>
-            <AiOutlineGithub size={24} />
-            Login with GitHub
-          </Button>
-        </StyledLoginButtons>
-      </StyledPageWrapper>
-      <Footer />
-    </>
-  );
-};
-
-export default SignIn;

src/store/useUser.tsx

@@ -38,7 +38,6 @@ const useUser = create<UserStates & UserActions>()((set, get) => ({
     set({ user: response.user as any, isAuthenticated: true });
   },
   checkSession: async () => {
-    if (location.pathname === "/") return;
     const currentSession = altogic.auth.getSession();
 
     if (currentSession) {
@@ -54,8 +53,6 @@ const useUser = create<UserStates & UserActions>()((set, get) => ({
         set({ user: data.user as any, isAuthenticated: true });
       }
     }
-
-    if (get().isPremium()) location.replace(location.href.replace("://", "://pro."));
   },
 }));