Div bug fixes

components/Protected.tsx

@@ -27,8 +27,6 @@ const Protected: React.FC = (props) => {
     return <Loading />;
   }
 
-  console.log("user", session?.user);
-
   return (
     <UserContext.Provider value={null}>
       <div className="h-screen md:h-full">

constants/queries.ts

@@ -25,9 +25,11 @@ export const GET_TRANSACTIONS = gql`
 `;
 
 export const GET_USER = gql`
-  query queryUser($filter: UserFilter) {
-    queryUser(filter: $filter) {
+  query getUser($id: ID!) {
+    getUser(id: $id) {
       id
+      givenName
+      familyName
     }
   }
 `;

forms/AccountDetails.tsx

@@ -0,0 +1,59 @@
+import { Formik, Form, Field } from "formik";
+import { useIntl } from "react-intl";
+import * as Yup from "yup";
+import Button from "components/Button";
+import Input from "components/Input";
+
+const validationSchema = Yup.object().shape({
+  givenName: Yup.string().required("Required"),
+  familyName: Yup.string().required("Required"),
+});
+
+export interface AccountDetailsFormProps {
+  onSubmit: (values: AccountDetailsFormValues) => Promise<void>;
+  initialValues?: any;
+}
+
+export type AccountDetailsFormValues = {
+  givenName?: string;
+  familyName?: string;
+};
+
+const AccountDetails: React.FC<AccountDetailsFormProps> = (props) => {
+  const intl = useIntl();
+
+  return (
+    <Formik
+      initialValues={props.initialValues}
+      onSubmit={props.onSubmit}
+      validationSchema={validationSchema}
+    >
+      <Form className="w-full flex flex-col items-start p-5">
+        <Field
+          as={Input}
+          name="givenName"
+          type="text"
+          label="First name"
+          className="mb-4"
+        />
+        <Field
+          as={Input}
+          name="familyName"
+          type="text"
+          label="Last name"
+          className="mb-4"
+        />
+        <div className="flex flex-row justify-center w-full">
+          <Button
+            type="submit"
+            className="bg-gradient-to-br from-ikura-light to-ikura-dark text-white mt-2"
+          >
+            {intl.formatMessage({ defaultMessage: "Save" })}
+          </Button>
+        </div>
+      </Form>
+    </Formik>
+  );
+};
+
+export default AccountDetails;

forms/TransactionForm.tsx

@@ -2,7 +2,7 @@ import { Formik, Form, Field } from "formik";
 import { useIntl } from "react-intl";
 import { toast } from "react-hot-toast";
 import Link from "next/link";
-import { gql, useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client";
 import * as Yup from "yup";
 import { GET_CATEGORIES } from "constants/queries";
 import Input from "components/Input";
@@ -84,12 +84,20 @@ const TransactionForm: React.FC<TransactionFormProps> = (props) => {
             ))}
           </div>
         )}
-        <Button
-          type="submit"
-          className="bg-gradient-to-br from-ikura-light to-ikura-dark text-white mt-2"
-        >
-          {intl.formatMessage({ defaultMessage: "Save" })}
-        </Button>
+        <div className="flex flex-row justify-between w-full">
+          <Button
+            type="button"
+            className="bg-gradient-to-br from-ikura-light to-ikura-dark text-white mt-2"
+          >
+            {intl.formatMessage({ defaultMessage: "Income" })}
+          </Button>
+          <Button
+            type="button"
+            className="bg-gradient-to-br from-ikura-light to-ikura-dark text-white mt-2"
+          >
+            {intl.formatMessage({ defaultMessage: "Expence" })}
+          </Button>
+        </div>
       </Form>
     </Formik>
   );

pages/404.tsx

@@ -7,21 +7,17 @@ const Err404: NextPage = () => {
   const intl = useIntl();
 
   return (
-    <div className="container">
-      <div className="row justify-content-center">
-        <div className="col-12 col-md-5 col-xl-4 my-5">
-          <div className="text-center">
-            <h6 className="text-uppercase text-muted mb-4">404 error</h6>
-            <h1 className="display-4 mb-3">There’s no page here 😭</h1>
-            <p className="text-muted mb-4">
-              Looks like you ended up here by accident?
-            </p>
-            <Link href="/">
-              <a className="btn btn-lg btn-primary">Return to your dashboard</a>
-            </Link>
-          </div>
-        </div>
-      </div>
+    <div className="flex flex-col items-center mt-8">
+      <h6 className="text-4xl mb-5">
+        {intl.formatMessage({ defaultMessage: "404" })}
+      </h6>
+      <h1>There’s no page here 😭</h1>
+      <p className="mb-6">Looks like you ended up here by accident?</p>
+      <Link href="/">
+        <a className="px-6 py-3 rounded-full drop-shadow-lg bg-ikura-dark text-white">
+          {intl.formatMessage({ defaultMessage: "Return to your dashboard" })}
+        </a>
+      </Link>
     </div>
   );
 };

pages/account/settings.tsx

@@ -2,13 +2,58 @@ import type { NextPage } from "next";
 import { useIntl } from "react-intl";
 import Link from "next/link";
 import toast from "react-hot-toast";
+import { useSession } from "next-auth/react";
+import { useQuery, useMutation, gql } from "@apollo/client";
 import { signOut } from "next-auth/react";
 import { ArrowBack } from "@mui/icons-material";
+import { GET_USER } from "constants/queries";
+import AccountDetailsForm, {
+  AccountDetailsFormValues,
+} from "forms/AccountDetails";
 import Protected from "components/Protected";
 import Button from "components/Button";
+import Loading from "components/Loading";
+
+const UPDATE_USER_MUTATION = gql`
+  mutation updateUser($input: UpdateUserInput!) {
+    updateUser(input: $input) {
+      user {
+        id
+      }
+    }
+  }
+`;
 
 const Settings: NextPage = () => {
   const intl = useIntl();
+  const { data: session } = useSession();
+  const [updateUser] = useMutation(UPDATE_USER_MUTATION);
+  const { data, loading } = useQuery(GET_USER, {
+    variables: {
+      // @ts-ignore
+      id: session?.user?.id,
+    },
+  });
+
+  const onAccountDetailsSubmit = async (values: AccountDetailsFormValues) => {
+    try {
+      await updateUser({
+        mutation: UPDATE_USER_MUTATION,
+        variables: {
+          input: {
+            filter: {
+              // @ts-ignore
+              id: session?.user?.id,
+            },
+            set: { ...values },
+          },
+        },
+      });
+    } catch (err: any) {
+      console.error(err);
+      toast.error(err.message);
+    }
+  };
 
   const onLogout = async () => {
     try {
@@ -20,6 +65,10 @@ const Settings: NextPage = () => {
     }
   };
 
+  if (loading) {
+    return <Loading />;
+  }
+
   return (
     <Protected>
       <div className="flex flex-col">
@@ -33,7 +82,14 @@ const Settings: NextPage = () => {
             {intl.formatMessage({ defaultMessage: "Settings" })}
           </h1>
         </div>
-        <Button type="button" onClick={onLogout}>
+        <AccountDetailsForm
+          onSubmit={onAccountDetailsSubmit}
+          initialValues={{
+            givenName: data?.getUser?.givenName,
+            familyName: data?.getUser?.familyName,
+          }}
+        />
+        <Button type="button" onClick={onLogout} className="mt-8">
           {intl.formatMessage({ defaultMessage: "Sign out" })}
         </Button>
       </div>

pages/api/auth/token.ts

@@ -15,7 +15,6 @@ export default function handler(
     return res.status(401).json({ valid: false, accessToken: "" });
   }
   const cookies = parseCookie(req.headers.cookie);
-  console.log("cookies", cookies);
 
   if (cookies["__Secure-next-auth.session-token"]) {
     return res.status(200).json({

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -13,8 +17,16 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "baseUrl": "."
+    "baseUrl": ".",
+    "incremental": true
   },
-  "include": ["next-env.d.ts", "index.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "index.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }