feat(analytics): switch from google analytics to umami (#31)

* feat(analytics): switch from google analytics to umami

* chore: install eslint

.eslintrc.js

@@ -0,0 +1,10 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  extends: [
+    // https://github.com/sozonome/eslint-config-sznm#readme
+    "sznm/react",
+    // https://github.com/sozonome/eslint-config-sznm#-nextjs-projects
+    "plugin:react/jsx-runtime",
+    "plugin:@next/next/recommended",
+  ],
+};

.husky/pre-push

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn lint

.lintstagedrc.json

@@ -0,0 +1,3 @@
+{
+  "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": ["prettier --write"]
+}

package.json

@@ -7,6 +7,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
+    "lint": "next lint",
+    "lint:fix": "eslint src --fix && yarn format",
     "format": "prettier --write src",
     "up-latest": "yarn upgrade-interactive --latest",
     "release": "standard-version",
@@ -25,24 +27,22 @@
     "next-pwa": "^5.4.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-ga": "^3.3.0",
     "react-icons": "^4.3.1",
     "swr": "^0.5.7"
   },
   "devDependencies": {
     "@commitlint/config-conventional": "^13.2.0",
-    "@types/node": "^16.9.1",
+    "@types/node": "^16.11.4",
     "@types/react": "^17.0.24",
+    "@types/umami": "^0.1.0",
     "commitlint": "^13.2.0",
+    "eslint": "^7.32.0",
+    "eslint-config-next": "^11.1.2",
+    "eslint-config-sznm": "^0.1.10",
+    "husky": "^7.0.2",
     "lint-staged": "^11.2.3",
     "prettier": "^2.4.1",
     "standard-version": "^9.3.2",
-    "typescript": "^4.4.4",
-    "husky": "^7.0.2"
-  },
-  "lint-staged": {
-    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
-      "prettier --write"
-    ]
+    "typescript": "^4.4.4"
   }
 }

src/components/form/SearchContainer.tsx

@@ -21,12 +21,8 @@ import {
 import { useFormik } from "formik";
 import { ChangeEvent, ReactText, useState } from "react";
 
-import {
-  ListQuery,
-  useAPICategories,
-  useAPIList,
-} from "../../helpers/fetchHooks";
-import ItemContainer from "../item/ItemContainer";
+import ItemContainer from "components/item/ItemContainer";
+import { ListQuery, useAPICategories, useAPIList } from "utils/fetchHooks";
 
 type SearchFormValueType = {
   queryParams: ListQuery;
@@ -46,6 +42,16 @@ const INITIAL_VALUES: SearchFormValueType = {
 };
 
 const SearchContainer = () => {
+  const [searchQueries, setSearchQueries] = useState<ListQuery>();
+  const [isRandomSearch, setIsRandomSearch] = useState<boolean>(false);
+  const [shouldFetch, setShouldFetch] = useState<boolean>(false);
+
+  const {
+    data: searchResult,
+    isLoading: isLoadingSearchResult,
+    isError,
+  } = useAPIList(shouldFetch, searchQueries, isRandomSearch);
+
   const {
     values: {
       queryParams: { title, description, https, category },
@@ -68,16 +74,6 @@ const SearchContainer = () => {
     },
   });
 
-  const [searchQueries, setSearchQueries] = useState<ListQuery>(undefined);
-  const [isRandomSearch, setIsRandomSearch] = useState<boolean>(false);
-  const [shouldFetch, setShouldFetch] = useState<boolean>(false);
-
-  const {
-    data: searchResult,
-    isLoading: isLoadingSearchResult,
-    isError,
-  } = useAPIList(shouldFetch, searchQueries, isRandomSearch);
-
   const { data: categories } = useAPICategories();
 
   const toast = useToast();
@@ -176,8 +172,8 @@ const SearchContainer = () => {
                         value={category}
                         onChange={handleChange}
                       >
-                        {categories?.map((categoryItem: string, index) => (
-                          <Text as="option" key={index}>
+                        {categories?.map((categoryItem: string) => (
+                          <Text as="option" key={categoryItem}>
                             {categoryItem}
                           </Text>
                         ))}

src/components/item/ItemCard.tsx

@@ -18,7 +18,31 @@ import { AiFillCheckCircle, AiFillCloseCircle } from "react-icons/ai";
 import { FiExternalLink } from "react-icons/fi";
 import { ImCopy } from "react-icons/im";
 
-import { ListItem } from "../models/list";
+import { ListItem } from "components/models/list";
+
+type APIDetailsProps = Omit<ListItem, "API" | "Description" | "Link">;
+
+const APIDetails = ({ Category, HTTPS, Cors, Auth }: APIDetailsProps) => {
+  return (
+    <>
+      <Text>Category: {Category}</Text>
+      <Text>Support: </Text>
+      <Box marginLeft={4}>
+        <Flex alignItems="center">
+          <Text marginRight={2}>HTTPS :</Text>
+          {HTTPS ? (
+            <AiFillCheckCircle color="green" />
+          ) : (
+            <AiFillCloseCircle color="red" />
+          )}
+        </Flex>
+
+        <Text>CORS : {Cors}</Text>
+      </Box>
+      {Auth && <Text>Auth : {Auth}</Text>}
+    </>
+  );
+};
 
 type ItemCardProps = {
   value: ListItem;
@@ -111,28 +135,4 @@ const ItemCard = ({ value, useAccordion = true }: ItemCardProps) => {
   );
 };
 
-type APIDetailsProps = Omit<ListItem, "API" | "Description" | "Link">;
-
-const APIDetails = ({ Category, HTTPS, Cors, Auth }: APIDetailsProps) => {
-  return (
-    <>
-      <Text>Category: {Category}</Text>
-      <Text>Support: </Text>
-      <Box marginLeft={4}>
-        <Flex alignItems="center">
-          <Text marginRight={2}>HTTPS :</Text>
-          {HTTPS ? (
-            <AiFillCheckCircle color="green" />
-          ) : (
-            <AiFillCloseCircle color="red" />
-          )}
-        </Flex>
-
-        <Text>CORS : {Cors}</Text>
-      </Box>
-      {Auth && <Text>Auth : {Auth}</Text>}
-    </>
-  );
-};
-
 export default ItemCard;

src/components/item/ItemContainer.tsx

@@ -1,8 +1,8 @@
 import { Grid } from "@chakra-ui/react";
 
-import ItemCard from "./ItemCard";
+import { ListItem } from "components/models/list";
 
-import { ListItem } from "../models/list";
+import ItemCard from "./ItemCard";
 
 type ItemContainerProps = {
   entries: Array<ListItem>;
@@ -16,8 +16,8 @@ const ItemContainer = ({ entries, useAccordion }: ItemContainerProps) => {
       templateColumns={["repeat(1)", "repeat(1)", "repeat(2, 1fr)"]}
       gap={2}
     >
-      {entries.map((entry, index) => (
-        <ItemCard value={entry} key={index} useAccordion={useAccordion} />
+      {entries.map((entry) => (
+        <ItemCard value={entry} key={entry.API} useAccordion={useAccordion} />
       ))}
     </Grid>
   );

src/components/layout/AppMenu.tsx

@@ -20,7 +20,8 @@ import {
 import { useEffect, useState } from "react";
 import { BiMenu } from "react-icons/bi";
 
-import { APP_NAME } from "../../pages/_document";
+import { APP_NAME } from "pages/_document";
+
 import Badges from "./Badges";
 
 type AppsType = {
@@ -76,12 +77,8 @@ const AppMenu = () => {
             {loading && <Spinner />}
             {apps
               .filter((app) => app.name !== APP_NAME)
-              .map(({ name, icon, url, description }, index) => (
-                <Link
-                  key={index}
-                  href={url}
-                  _hover={{ textDecoration: "none" }}
-                >
+              .map(({ name, icon, url, description }) => (
+                <Link key={name} href={url} _hover={{ textDecoration: "none" }}>
                   <Flex
                     marginY={4}
                     alignItems="center"

src/components/layout/Footer.tsx

@@ -1,5 +1,4 @@
 import { Box, Flex, Link, Text } from "@chakra-ui/react";
-import Badges from "./Badges";
 
 const Footer = () => {
   return (

src/components/layout/Header.tsx

@@ -1,6 +1,7 @@
 import { Flex, Heading, Box, Text, useBreakpointValue } from "@chakra-ui/react";
 
-import AccessibleLink from "../AccessibleLink";
+import AccessibleLink from "components/AccessibleLink";
+
 import AppMenu from "./AppMenu";
 import ThemeToggle from "./ThemeToggle";
 

src/components/layout/index.tsx

@@ -1,10 +1,14 @@
 import { Box, Flex } from "@chakra-ui/react";
 
-import Header from "./Header";
 import Footer from "./Footer";
+import Header from "./Header";
 import Meta from "./Meta";
 
-const Layout = ({ children }) => {
+type LayoutProps = {
+  children: React.ReactNode;
+};
+
+const Layout = ({ children }: LayoutProps) => {
   return (
     <Box transition="0.5s ease-out">
       <Meta />

src/constants/umami.ts

@@ -0,0 +1,2 @@
+export const UMAMI_WEBSITE_ID = process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID ?? "";
+export const UMAMI_SRC = process.env.NEXT_PUBLIC_UMAMI_SRC ?? "";

src/pages/404.tsx

@@ -27,12 +27,12 @@ const Page404 = () => {
         <Heading textAlign="center">Page not Found.</Heading>
 
         <Box textAlign="center" marginTop={4}>
-          <Text>It's Okay!</Text>
+          <Text>It&apos;s Okay!</Text>
           <Link href="/" passHref>
             <Button
               backgroundColor={colorMode === "light" ? "gray.300" : "teal.500"}
             >
-              Let's Head Back
+              Let&apos;s Head Back
             </Button>
           </Link>
         </Box>

src/pages/_app.tsx

@@ -1,34 +1,13 @@
 import { ChakraProvider } from "@chakra-ui/react";
+import { AppProps } from "next/app";
 import Head from "next/head";
-import { useRouter } from "next/router";
-import { useEffect } from "react";
 import "@fontsource/jost/latin.css";
 
-import Layout from "../components/layout";
-
-import { initGA, logPageView } from "../helpers/analytics";
-
-import customTheme from "../styles/customTheme";
-import "../styles/globals.css";
-
-const MyApp = ({ Component, pageProps }) => {
-  const router = useRouter();
-
-  useEffect(() => {
-    initGA();
-    if (!router.asPath.includes("?")) {
-      logPageView();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    router.events.on("routeChangeComplete", logPageView);
-    return () => {
-      router.events.off("routeChangeComplete", logPageView);
-    };
-  }, [router.events]);
+import Layout from "components/layout";
+import customTheme from "styles/customTheme";
+import "styles/globals.css";
 
+const MyApp = ({ Component, pageProps }: AppProps) => {
   return (
     <ChakraProvider theme={customTheme}>
       <Head>

src/pages/_document.tsx

@@ -1,10 +1,19 @@
-import Document, { Html, Head, Main, NextScript } from "next/document";
+// eslint-disable-next-line @next/next/no-document-import-in-page
+import Document, {
+  Html,
+  Head,
+  Main,
+  NextScript,
+  DocumentContext,
+} from "next/document";
+
+import { UMAMI_SRC, UMAMI_WEBSITE_ID } from "constants/umami";
 
 export const APP_NAME = "Public APIs";
 const APP_DESCRIPTION = "Find public APIs for your next projects.";
 
 class MyDocument extends Document {
-  static async getInitialProps(ctx) {
+  static async getInitialProps(ctx: DocumentContext) {
     const initialProps = await Document.getInitialProps(ctx);
     return { ...initialProps };
   }
@@ -35,6 +44,14 @@ class MyDocument extends Document {
             href="https://sznm.dev/app_icons/pub-apis.svg"
           />
           <link rel="manifest" href="/manifest.json" />
+
+          {/* umami self-hosted analytics */}
+          <script
+            async
+            defer
+            data-website-id={UMAMI_WEBSITE_ID}
+            src={UMAMI_SRC}
+          />
         </Head>
         <body>
           <Main />