feat: switch repo to Next.js

.eslintrc.json

@@ -0,0 +1,9 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "jest": true,
+    "node": true
+  },
+  "extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended"]
+}

.github/workflows/tests.yml

@@ -0,0 +1,16 @@
+name: 'Tests'
+
+on:
+  pull_request:
+    branches: [main]
+
+jobs:
+  tests:
+    name: Tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+      - run: yarn install
+      - name: Run tests
+        run: make test

.gitignore

@@ -1,23 +1,36 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-node_modules
-.pnp
+/node_modules
+/.pnp
 .pnp.js
 
 # testing
-coverage
+/coverage
+
+# next.js
+/.next/
+/out/
 
 # production
-build
+/build
 
 # misc
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+*.pem
 
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.prettierignore

@@ -1,9 +1,8 @@
-coverage
-lib
-tmp
-charts
+graphql/__generated__
+ci/
+
+.next
 .vscode
 
-**/*.yaml
-**/*.yml
-**/*.md
+.github
+ci/vendor

Makefile

@@ -1,2 +1,5 @@
 check-code:
 	yarn check-code
+
+test:
+	yarn test

README.md

@@ -10,12 +10,17 @@ With a default installation, Admin Panel can be accessed with `admin.domain.com`
 
 ## How to run this repo locally?
 
-In the project directory, you can run:
+This project uses Next.js, to run it locally, you need to set the following environment variable (in a `.env.local` file):
+
+```
+NEXT_PUBLIC_GRAPHQL_URL=https://admin-api.staging.galoy.io/graphql
+```
+
+Then, nn the project directory, you can run:
 
 ```
 yarn install
-export GRAPHQL_URI="https://graphql-admin.domain.com"
-yarn start
+yarn dev
 ```
 
 Runs the app in the development mode.\
@@ -32,6 +37,4 @@ It correctly bundles React in production mode and optimizes the build for the be
 The build is minified and the filenames include the hashes.\
 Your app is ready to be deployed!
 
-
-
 See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.

codegen.ts

@@ -0,0 +1,22 @@
+import { CodegenConfig } from "@graphql-codegen/cli"
+
+const config: CodegenConfig = {
+  schema:
+    "https://raw.githubusercontent.com/GaloyMoney/galoy/main/src/graphql/admin/schema.graphql",
+  documents: ["graphql/**/*.ts"],
+  generates: {
+    "./graphql/__generated__/": {
+      preset: "client",
+      plugins: [],
+      presetConfig: {
+        gqlTagName: "gql",
+      },
+      config: {
+        inlineFragmentTypes: "combine",
+      },
+    },
+  },
+  ignoreNoDocuments: true,
+}
+
+export default config

src/components/AccountDetails/BusinessMapUpdate.js → components/account/business-map-update.tsx

@@ -1,43 +1,54 @@
-import React, { useState, useEffect } from "react"
-import PropTypes from "prop-types"
+"use client"
 
-const isValidLatitude = (latitude) => isFinite(latitude) && Math.abs(latitude) <= 90
-const isValidLongitude = (longitude) => isFinite(longitude) && Math.abs(longitude) <= 180
-const isValidTitle = (title) => title.length >= 3
-const isValidBusinessInfo = ({ title, latitude, longitude }) =>
-  isValidLatitude(latitude) && isValidLongitude(longitude) && isValidTitle(title)
+import { useState, useEffect } from "react"
+import { AccountBusinessInfo, AccountData } from "./index"
 
-function BusinessMapUpdate({
-  accountDetails,
-  update,
-  updating = false,
-  loading = false,
-}) {
+const isValidLatitude = (latitude: number) =>
+  isFinite(latitude) && Math.abs(latitude) <= 90
+const isValidLongitude = (longitude: number) =>
+  isFinite(longitude) && Math.abs(longitude) <= 180
+const isValidTitle = (title: string) => title.length >= 3
+const isValidBusinessInfo = ({ title, coordinates }: AccountBusinessInfo) =>
+  isValidLatitude(coordinates.latitude) &&
+  isValidLongitude(coordinates.longitude) &&
+  isValidTitle(title)
+
+const BusinessMapUpdate: React.FC<{
+  accountDetails: AccountData
+  update: (info: AccountBusinessInfo) => void
+  updating: boolean
+  loading: boolean
+}> = ({ accountDetails, update, updating = false, loading = false }) => {
   const data = accountDetails
 
   const [title, setTitle] = useState(data?.title || "")
-  const [latitude, setLatitude] = useState(data?.coordinates?.latitude || "")
-  const [longitude, setLongitude] = useState(data?.coordinates?.longitude || "")
+  const [latitude, setLatitude] = useState<number | "">(data?.coordinates?.latitude || "")
+  const [longitude, setLongitude] = useState<number | "">(
+    data?.coordinates?.longitude || "",
+  )
 
-  let emptyClass = loading ? "filter blur-sm animate-pulse" : ""
+  const emptyClass = loading ? "filter blur-sm animate-pulse" : ""
 
   useEffect(() => {
     setTitle(data?.title || "")
     setLatitude(data?.coordinates?.latitude || "")
     setLongitude(data?.coordinates?.longitude || "")
   }, [data])
 
-  const submit = async (event) => {
+  const submit: React.FormEventHandler<HTMLFormElement> = async (event) => {
     event.preventDefault()
 
     const businessInfo = {
-      title: title,
-      longitude: Number(longitude),
-      latitude: Number(latitude),
+      title,
+      coordinates: {
+        latitude: Number(latitude),
+        longitude: Number(longitude),
+      },
     }
 
-    if (isValidBusinessInfo(businessInfo)) {
-      return update && update(businessInfo)
+    if (update && isValidBusinessInfo(businessInfo)) {
+      update(businessInfo)
+      return
     }
 
     alert("Invalid business info")
@@ -56,10 +67,12 @@ function BusinessMapUpdate({
             type="text"
             placeholder="Enter longitude"
             value={latitude}
-            onChange={(e) => setLatitude(e.target.value)}
+            onChange={(e) =>
+              setLatitude(e.target.value !== "" ? Number(e.target.value) : "")
+            }
             disabled={!!emptyClass}
             className={`${emptyClass} ${
-              !isValidLatitude(latitude) && "border-red-500"
+              latitude !== "" && !isValidLatitude(latitude) && "border-red-500"
             } mt-4 shadow appearance-none border rounded w-full py-2 px-3 text-gray-600 focus:outline-none focus:shadow-outline`}
           />
         </div>
@@ -73,10 +86,12 @@ function BusinessMapUpdate({
             type="text"
             placeholder="Enter longitude"
             value={longitude}
-            onChange={(e) => setLongitude(e.target.value)}
+            onChange={(e) =>
+              setLongitude(e.target.value !== "" ? Number(e.target.value) : "")
+            }
             disabled={!!emptyClass}
             className={`${emptyClass} ${
-              !isValidLongitude(longitude) && "border-red-500"
+              longitude !== "" && !isValidLongitude(longitude) && "border-red-500"
             } mt-4 shadow appearance-none border rounded w-full py-2 px-3 text-gray-600 focus:outline-none focus:shadow-outline`}
           />
         </div>
@@ -100,7 +115,7 @@ function BusinessMapUpdate({
         <div className={`${emptyClass} flex items-end justify-end`}>
           <button
             type="submit"
-            disabled={!title || !latitude || !longitude}
+            disabled={title === "" || latitude === "" || longitude === ""}
             className="mb-0 w-full bg-blue-400 hover:bg-blue-500 text-white font-bold p-2 my-4 border border-blue-500 rounded disabled:opacity-50"
           >
             {updating ? "Updating..." : "Update"}
@@ -111,17 +126,4 @@ function BusinessMapUpdate({
   )
 }
 
-BusinessMapUpdate.propTypes = {
-  accountDetails: PropTypes.shape({
-    title: PropTypes.string,
-    coordinates: PropTypes.shape({
-      latitude: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-      longitude: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    }),
-  }),
-  update: PropTypes.func,
-  updating: PropTypes.bool,
-  loading: PropTypes.bool,
-}
-
 export default BusinessMapUpdate

src/components/AccountDetails/Details.js → components/account/details.tsx

@@ -1,10 +1,14 @@
-import React from "react"
-import PropTypes from "prop-types"
+"use client"
+
+import { AccountData } from "./index"
 import { formatDate } from "../../utils"
 
-function Details({ accountDetails, loading = false }) {
+const Details: React.FC<{
+  accountDetails: AccountData
+  loading?: boolean
+}> = ({ accountDetails, loading = false }) => {
   const data = accountDetails
-  let emptyClass = loading ? "filter blur-sm animate-pulse" : ""
+  const emptyClass = loading ? "filter blur-sm animate-pulse" : ""
 
   return (
     <div className="shadow p-6 min-w-0 rounded-lg shadow-xs overflow-hidden bg-white grid grid-cols-2 gap-4">
@@ -47,9 +51,4 @@ function Details({ accountDetails, loading = false }) {
   )
 }
 
-Details.propTypes = {
-  accountDetails: PropTypes.object,
-  loading: PropTypes.bool,
-}
-
 export default Details