Moved to new template and auth system

.env.example

@@ -0,0 +1,10 @@
+NEXT_PUBLIC_GRAPHQL_ENDPOINT=''
+
+NEXT_PUBLIC_FIREBASE_PROJECT_ID=''
+NEXT_PUBLIC_FIREBASE_DATABASE_URL=''
+NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=''
+NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY=''
+NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=''
+NEXT_PUBLIC_FIREBASE_MESSAGE_SENDER_ID=''
+NEXT_PUBLIC_FIREBASE_APP_ID=''
+NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=''

components/DailySpendCard.tsx

@@ -1,4 +1,4 @@
-import { Fragment, memo } from "react";
+import { memo } from "react";
 import { useIntl } from "react-intl";
 import { gql, useQuery } from "@apollo/client";
 import { DateTime } from "luxon";
@@ -39,46 +39,31 @@ const DailySpendCard: React.FC = () => {
   };
 
   return (
-    <div className="col-12 col-lg-6 col-xl">
-      <div className="card">
-        <div className="card-body">
-          <div className="row align-items-center gx-0">
-            <div className="col">
-              <h6 className="text-uppercase text-muted mb-2">Daily spend</h6>
-              {loading ? (
-                <div className="spinner-border spinner-border-sm" role="status">
-                  <span className="visually-hidden">
-                    {intl.formatMessage({
-                      defaultMessage: "Loading...",
-                      description: "default loading",
-                    })}
-                  </span>
-                </div>
-              ) : (
-                <Fragment>
-                  <span className="h2 mb-0">
-                    {intl.formatMessage(
-                      {
-                        defaultMessage: "{amount} $",
-                        description: "monetary amount readout",
-                      },
-                      {
-                        amount: intl.formatNumber(getAmount()),
-                      }
-                    )}
-                  </span>
-                  {false && (
-                    <span
-                      className="badge bg-danger-soft mt-n1"
-                      style={{ marginLeft: 5 }}
-                    >
-                      +0.3%
-                    </span>
-                  )}
-                </Fragment>
+    <div className="card border-left-primary shadow h-100 py-2">
+      <div className="card-body">
+        <div className="row no-gutters align-items-center">
+          <div className="col mr-2">
+            <div className="text-xs font-weight-bold text-primary text-uppercase mb-1">
+              {intl.formatMessage({
+                defaultMessage: "Loading...",
+                description: "default loading",
+              })}
+            </div>
+            <div className="h5 mb-0 font-weight-bold text-gray-800">
+              {intl.formatMessage(
+                {
+                  defaultMessage: "{amount} $",
+                  description: "monetary amount readout",
+                },
+                {
+                  amount: intl.formatNumber(getAmount()),
+                }
               )}
             </div>
           </div>
+          <div className="col-auto">
+            <i className="fas fa-calendar fa-2x text-gray-300"></i>
+          </div>
         </div>
       </div>
     </div>

components/DropdownToggle.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+// eslint-disable-next-line react/display-name
+const DropdownToggle = React.forwardRef(
+  ({ children, onClick, className }: any, ref: any) => (
+    <a
+      className={
+        className
+          ? `${className.split("dropdown-toggle")[0]}`
+          : "dropdown-toggle"
+      }
+      href="#"
+      ref={ref}
+      onClick={(e) => {
+        e.preventDefault();
+        onClick(e);
+      }}
+    >
+      {children}
+    </a>
+  )
+);
+
+export default DropdownToggle;

components/Footer.tsx

@@ -1,7 +1,24 @@
+import { useContext } from "react";
+import UserContext from "contexts/User";
+
 const Footer: React.FC = () => {
+  const user = useContext(UserContext);
+
   const getYear = () => new Date().getFullYear();
 
-  return <footer className="mt-auto"></footer>;
+  if (!user) {
+    return null;
+  }
+
+  return (
+    <footer className="sticky-footer bg-white mt-5">
+      <div className="container my-auto">
+        <div className="copyright text-center my-auto">
+          <span>Copyright © Ikura {getYear}</span>
+        </div>
+      </div>
+    </footer>
+  );
 };
 
 export default Footer;

components/Input.tsx

@@ -1,35 +1,38 @@
 import { FieldInputProps } from "formik";
-import { classNames, fieldHasError } from "../utils";
+import { classNames, fieldHasError } from "utils";
 
 export interface InputProps {
   name: string;
   touched: { [key: string]: boolean };
   errors: { [key: string]: string };
-  type: "text" | "number" | "date";
+  type: "text" | "number" | "date" | "email" | "password";
   pattern?: string;
+  className?: string;
   label?: string;
+  placeholder?: string;
   disabled?: boolean;
   readOnly?: boolean;
   tabIndex?: number;
 }
 
 const Input: React.FC<InputProps & FieldInputProps<any>> = (props) => {
   return (
-    <div className={classNames("form-group")}>
+    <div className="form-group">
       {props.label && (
         <label className="form-label" htmlFor={`input-${props.name}`}>
           {props.label}
         </label>
       )}
       <input
         className={classNames(
-          "form-control",
+          `form-control ${props.className || ""}`,
           fieldHasError(props) ? "is-invalid" : ""
         )}
         id={`input-${props.name}`}
         type={props.type}
         name={props.name}
-        value={props.value || ""}
+        value={props.value}
+        placeholder={props.placeholder}
         pattern={props.pattern}
         onChange={props.onChange}
         onBlur={props.onBlur}

components/Loading.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+export interface LoadingProps {
+  className?: string;
+}
+
+const Loading: React.FC<LoadingProps> = (props) => (
+  <div className={`d-flex justify-content-center ${props.className}`}>
+    <div className="spinner-border" role="status">
+      <span className="sr-only">Loading...</span>
+    </div>
+  </div>
+);
+
+export default React.memo(Loading);

components/Navbar.tsx

@@ -1,96 +1,68 @@
-/* eslint-disable @next/next/no-html-link-for-pages */
-import { forwardRef } from "react";
+import React, { useContext } from "react";
 import { useRouter } from "next/router";
 import { useIntl } from "react-intl";
-import { useAuthUser } from "next-firebase-auth";
+import { getAuth } from "firebase/auth";
+import toast from "react-hot-toast";
 import Link from "next/link";
-import { Navbar as StrapNavbar, Nav, Dropdown } from "react-bootstrap";
-import NavbarSearch from "./NavbarSearch";
-import { classNames } from "../utils";
+import { Navbar as BsNavbar, Nav, Dropdown } from "react-bootstrap";
+import UserContext from "contexts/User";
+import DropdownToggle from "components/DropdownToggle";
 
 const Navbar: React.FC = () => {
   const router = useRouter();
+  const user = useContext(UserContext);
   const intl = useIntl();
-  const user = useAuthUser();
+  const auth = getAuth();
 
-  if (!user.id) {
+  const onLogout = async () => {
+    try {
+      await auth.signOut();
+      toast.success("signed out");
+      router.push("/signin");
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  if (!user) {
     return null;
   }
 
   return (
-    <StrapNavbar expand="lg">
-      <div className="container">
-        <StrapNavbar.Toggle className="me-auto" aria-controls="navbar">
-          <span className="navbar-toggler-icon" />
-        </StrapNavbar.Toggle>
-        <Link href="/">
-          <a className="navbar-brand me-auto">
-            <img src="/img/logo.png" alt="logo" className="navbar-brand-img" />
-          </a>
-        </Link>
-        <NavbarSearch />
-        <div className="navbar-user">
-          <Dropdown>
-            <Dropdown.Toggle as={CustomToggle}>
-              <img
-                src={user?.photoURL || "/img/avatars/default.png"}
-                alt="profile"
-                className="avatar-img rounded-circle"
-              />
-            </Dropdown.Toggle>
-            <Dropdown.Menu className="dropdown-menu-end mt-3">
-              <Link href="/settings">
-                <a className="dropdown-item">
-                  {intl.formatMessage({
-                    defaultMessage: "Settings",
-                    description: "navbar dropdown option",
-                  })}
-                </a>
-              </Link>
-              <hr className="dropdown-divider" />
-              <a onClick={() => user.signOut()} className="dropdown-item">
-                {intl.formatMessage({
-                  defaultMessage: "Logout",
-                  description: "navbar dropdown option",
-                })}
-              </a>
-            </Dropdown.Menu>
-          </Dropdown>
-        </div>
-        <StrapNavbar.Collapse className="me-lg-auto order-lg-first">
-          <Nav>
-            <Link href="/">
-              <a
-                className={classNames(
-                  "nav-link",
-                  router.asPath === "/" && "active"
-                )}
-              >
-                {intl.formatMessage({
-                  defaultMessage: "Dashboard",
-                  description: "navbar",
-                })}
+    <BsNavbar className="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
+      <form className="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search"></form>
+      <ul className="navbar-nav ml-auto">
+        <Dropdown className="nav-item no-arrow">
+          <Dropdown.Toggle as={DropdownToggle} className="nav-link">
+            <span className="mr-2 d-none d-lg-inline text-gray-600 small">
+              {auth.currentUser?.displayName || auth.currentUser?.email}
+            </span>
+            <img
+              className="img-profile rounded-circle"
+              src={
+                auth.currentUser?.photoURL ||
+                "https://startbootstrap.github.io/startbootstrap-sb-admin-2/img/undraw_profile.svg"
+              }
+              alt="profile"
+            />
+          </Dropdown.Toggle>
+          <Dropdown.Menu>
+            <Link href="/settings">
+              <a className="dropdown-item">
+                <i className="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
+                &nbsp;Account
               </a>
             </Link>
-          </Nav>
-        </StrapNavbar.Collapse>
-      </div>
-    </StrapNavbar>
+            <div className="dropdown-divider" />
+            <button type="button" className="dropdown-item" onClick={onLogout}>
+              <i className="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
+              &nbsp;Logout
+            </button>
+          </Dropdown.Menu>
+        </Dropdown>
+      </ul>
+    </BsNavbar>
   );
 };
 
-// eslint-disable-next-line react/display-name
-const CustomToggle = forwardRef(({ children, onClick }: any, ref: any) => (
-  <a
-    ref={ref}
-    onClick={(e) => {
-      e.preventDefault();
-      onClick(e);
-    }}
-    className="avatar avatar-sm dropdown-toggle"
-  >
-    {children}
-  </a>
-));
-
 export default Navbar;