App directory #4

apps/metamigo-frontend/app/_components/AdminLogin.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useEffect } from "react";
 import { CircularProgress, Typography, Grid } from "@mui/material";
 import { signIn, signOut, getSession } from "next-auth/react";

apps/metamigo-frontend/app/_components/Auth.tsx

@@ -1,7 +1,9 @@
+"use client";
+
 import { FC, PropsWithChildren, useEffect } from "react";
 import { CircularProgress } from "@mui/material";
 import { useSession } from "next-auth/react";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 
 export const Auth: FC<PropsWithChildren> = ({ children }) => {
   const router = useRouter();

apps/metamigo-frontend/app/_components/DigitInput/index.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 /* eslint-disable react/display-name */
 import { forwardRef } from "react";
 import useDigitInput, { InputAttributes } from "react-digit-input";

apps/metamigo-frontend/app/_components/MetamigoAdmin.tsx

@@ -1,12 +1,14 @@
+"use client";
+
 import { FC, useEffect, useState } from "react";
 import { Admin, Resource } from "react-admin";
 import { useApolloClient } from "@apollo/client";
 import polyglotI18nProvider from "ra-i18n-polyglot";
 import { ThemeProvider, createTheme } from "@mui/material";
-import { metamigoDataProvider } from "../lib/dataprovider";
+import { metamigoDataProvider } from "../_lib/dataprovider";
 import { theme } from "./layout/themes";
 import { Layout } from "./layout";
-import englishMessages from "../i18n/en";
+import englishMessages from "../_i18n/en";
 import users from "./users";
 import accounts from "./accounts";
 import whatsappBots from "./whatsapp/bots";

apps/metamigo-frontend/app/_components/MultiProvider.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { FC, PropsWithChildren } from "react";
+import { SessionProvider } from "next-auth/react";
+
+export const MultiProvider: FC<PropsWithChildren> = ({ children }) => (
+  <SessionProvider>{children}</SessionProvider>
+);

apps/metamigo-frontend/app/_components/accounts/AccountEdit.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { makeStyles } from "@mui/styles";
 import {

apps/metamigo-frontend/app/_components/accounts/AccountList.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import {
   List,

apps/metamigo-frontend/app/_components/accounts/index.ts

@@ -1,3 +1,5 @@
+"use client";
+
 /* eslint-disable import/no-named-as-default */
 /* eslint-disable import/no-anonymous-default-export */
 import AccountIcon from "@mui/icons-material/AccountTree";

apps/metamigo-frontend/app/_components/layout/AppBar.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 import { AppBar, UserMenu, MenuItemLink, useTranslate } from "react-admin";
 import Typography from "@mui/material/Typography";

apps/metamigo-frontend/app/_components/layout/Layout.tsx

@@ -1,4 +1,5 @@
-/* eslint-disable import/no-named-as-default */
+"use client";
+
 import { Layout as RaLayout, LayoutProps, Sidebar } from "react-admin";
 import AppBar from "./AppBar";
 import Menu from "./Menu";
@@ -6,7 +7,7 @@ import { theme } from "./themes";
 
 const CustomSidebar = (props: any) => <Sidebar {...props} size={200} />;
 
-const Layout = (props: LayoutProps) => (
+export const Layout = (props: LayoutProps) => (
   <RaLayout
     {...props}
     appBar={AppBar}
@@ -16,5 +17,3 @@ const Layout = (props: LayoutProps) => (
     theme={theme}
   />
 );
-
-export default Layout;

apps/metamigo-frontend/app/_components/layout/Logo.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { SVGProps } from "react";
 
 const Logo = (props: SVGProps<SVGSVGElement>) => (

apps/metamigo-frontend/app/_components/layout/Menu.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 /* eslint-disable camelcase */
 import { FC, useState } from "react";
 // import { useSelector } from "react-redux";

apps/metamigo-frontend/app/_components/layout/SubMenu.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, PropsWithChildren, Fragment, ReactElement } from "react";
 import ExpandMore from "@mui/icons-material/ExpandMore";
 import List from "@mui/material/List";

apps/metamigo-frontend/app/_components/layout/index.ts

@@ -1,3 +1,5 @@
+"use client";
+
 export { default as AppBar } from "./AppBar";
-export { default as Layout } from "./Layout";
+export { Layout } from "./Layout";
 export { default as Menu } from "./Menu";

apps/metamigo-frontend/app/_components/signal/bots/SignalBotCreate.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   SimpleForm,
   Create,
@@ -6,7 +8,7 @@ import {
   CreateProps,
 } from "react-admin";
 import { useSession } from "next-auth/react";
-import { validateE164Number } from "../../../lib/phone-numbers";
+import { validateE164Number } from "../../../_lib/phone-numbers";
 
 const SignalBotCreate = (props: CreateProps) => {
   const { data: session } = useSession();

apps/metamigo-frontend/app/_components/signal/bots/SignalBotEdit.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { SimpleForm, Edit, TextInput, required, EditProps } from "react-admin";
 
 const SignalBotEdit = (props: EditProps) => (

apps/metamigo-frontend/app/_components/signal/bots/SignalBotList.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   List,
   Datagrid,

apps/metamigo-frontend/app/_components/signal/bots/SignalBotShow.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from "react";
 import {
   Show,
@@ -28,7 +30,7 @@ import { SixDigitInput } from "../../DigitInput";
 import {
   sanitizeE164Number,
   isValidE164Number,
-} from "../../../lib/phone-numbers";
+} from "../../../_lib/phone-numbers";
 
 const Sidebar = ({ record }: any) => {
   const [phoneNumber, setPhoneNumber] = useState("");

apps/metamigo-frontend/app/_components/signal/bots/index.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import SignalBotIcon from "@mui/icons-material/ChatOutlined";
 import SignalBotList from "./SignalBotList";
 import SignalBotEdit from "./SignalBotEdit";

apps/metamigo-frontend/app/_components/signal/bots/shared.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 /* eslint-disable react/display-name */
 import {
   SelectInput,

apps/metamigo-frontend/app/_components/users/UserCreate.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import {
   SimpleForm,

apps/metamigo-frontend/app/_components/users/UserEdit.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { makeStyles } from "@mui/styles";
 import {
   SimpleForm,

apps/metamigo-frontend/app/_components/users/UserList.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   List,
   Datagrid,

apps/metamigo-frontend/app/_components/users/index.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import UserIcon from "@mui/icons-material/People";
 import UserList from "./UserList";
 import UserEdit from "./UserEdit";

apps/metamigo-frontend/app/_components/users/shared.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { SelectInput, useRecordContext } from "react-admin";
 
 export const UserRoleInput = (props: any) => {

apps/metamigo-frontend/app/_components/voice/providers/ProviderCreate.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   SimpleForm,
   TextInput,

apps/metamigo-frontend/app/_components/voice/providers/ProviderEdit.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   SimpleForm,
   TextInput,

apps/metamigo-frontend/app/_components/voice/providers/ProviderList.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { List, Datagrid, DateField, TextField, ListProps } from "react-admin";
 
 const ProviderList = (props: ListProps) => (

apps/metamigo-frontend/app/_components/voice/providers/index.ts

@@ -1,3 +1,5 @@
+"use client";
+
 /* eslint-disable import/no-anonymous-default-export */
 import ProviderIcon from "@mui/icons-material/Business";
 import ProviderList from "./ProviderList";

apps/metamigo-frontend/app/_components/voice/providers/shared.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { SelectInput } from "react-admin";
 
 export const ProviderKindInput = (props: any) => (

apps/metamigo-frontend/app/_components/voice/voicelines/MicInput.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useInput } from "react-admin";
 import React, { useState } from "react";
 import dynamic from "next/dynamic";

apps/metamigo-frontend/app/_components/voice/voicelines/VoiceLineCreate.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   SimpleForm,
   Create,

apps/metamigo-frontend/app/_components/voice/voicelines/VoiceLineEdit.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   SimpleForm,
   TextInput,

apps/metamigo-frontend/app/_components/voice/voicelines/VoiceLineList.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   List,
   ListProps,

apps/metamigo-frontend/app/_components/voice/voicelines/index.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import VoiceLineIcon from "@mui/icons-material/PhoneCallback";
 import VoiceLineList from "./VoiceLineList";
 import VoiceLineEdit from "./VoiceLineEdit";

apps/metamigo-frontend/app/_components/voice/voicelines/shared.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 /* eslint-disable react/display-name */
 import React, { useState, useEffect } from "react";
 import PlayIcon from "@mui/icons-material/PlayCircleFilled";
@@ -12,7 +14,7 @@ import {
   TextField,
 } from "react-admin";
 import { IconButton, CircularProgress } from "@mui/material";
-import absoluteUrl from "../../../lib/absolute-url";
+import absoluteUrl from "../../../_lib/absolute-url";
 import TwilioLanguages from "./twilio-languages";
 
 type TTSProvider = (voice: any, language: any, prompt: any) => Promise<void>;

apps/metamigo-frontend/app/_components/webhooks/WebhookCreate.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   SimpleForm,
   FormDataConsumer,

apps/metamigo-frontend/app/_components/webhooks/WebhookEdit.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   SimpleForm,
   TextInput,

apps/metamigo-frontend/app/_components/webhooks/WebhookList.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { List, Datagrid, DateField, TextField, ListProps } from "react-admin";
 import { BackendIdField } from "./shared";
 

apps/metamigo-frontend/app/_components/webhooks/index.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import WebhookIcon from "@mui/icons-material/Send";
 import WebhookList from "./WebhookList";
 import WebhookEdit from "./WebhookEdit";

apps/metamigo-frontend/app/_components/webhooks/shared.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { SelectInput, required } from "react-admin";
 
 import {

apps/metamigo-frontend/app/_components/whatsapp/attachments/WhatsappAttachmentList.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { List, Datagrid, TextField } from "react-admin";
 
 const WhatsappAttachmentList = (props: any) => (

apps/metamigo-frontend/app/_components/whatsapp/attachments/WhatsappAttachmentShow.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Show, ShowProps, SimpleShowLayout, TextField } from "react-admin";
 
 const WhatsappAttachmentShow = (props: ShowProps) => (

apps/metamigo-frontend/app/_components/whatsapp/attachments/index.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import WhatsappAttachmentIcon from "@mui/icons-material/AttachFile";
 import WhatsappAttachmentList from "./WhatsappAttachmentList";
 import WhatsappAttachmentShow from "./WhatsappAttachmentShow";

apps/metamigo-frontend/app/_components/whatsapp/bots/WhatsappBotCreate.tsx

@@ -1,7 +1,9 @@
+"use client";
+
 // import dynamic from "next/dynamic";
 import { SimpleForm, Create, TextInput, required } from "react-admin";
 import { useSession } from "next-auth/react";
-import { validateE164Number } from "../../../lib/phone-numbers";
+import { validateE164Number } from "../../../_lib/phone-numbers";
 
 const WhatsappBotCreate = (props: any) => {
   // const MuiPhoneNumber = dynamic(() => import("material-ui-phone-number"), {

apps/metamigo-frontend/app/_components/whatsapp/bots/WhatsappBotEdit.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { SimpleForm, Edit, TextInput, required, EditProps } from "react-admin";
 
 const WhatsappBotEdit = (props: EditProps) => (

apps/metamigo-frontend/app/_components/whatsapp/bots/WhatsappBotList.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   List,
   Datagrid,

apps/metamigo-frontend/app/_components/whatsapp/bots/WhatsappBotShow.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useEffect, useState } from "react";
 import {
   Card,

apps/metamigo-frontend/app/_components/whatsapp/bots/index.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import WhatsappBotIcon from "@mui/icons-material/WhatsApp";
 import WhatsappBotList from "./WhatsappBotList";
 import WhatsappBotEdit from "./WhatsappBotEdit";

apps/metamigo-frontend/app/_components/whatsapp/bots/shared.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 /* eslint-disable react/display-name */
 import {
   SelectInput,

apps/metamigo-frontend/app/_components/whatsapp/messages/WhatsappMessageList.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   List,
   ListProps,

apps/metamigo-frontend/app/_components/whatsapp/messages/WhatsappMessageShow.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   Show,
   ShowProps,

apps/metamigo-frontend/app/_components/whatsapp/messages/index.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import WhatsappMessageIcon from "@mui/icons-material/Message";
 import WhatsappMessageList from "./WhatsappMessageList";
 import WhatsappMessageShow from "./WhatsappMessageShow";

apps/metamigo-frontend/app/admin/_components/Admin.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { FC } from "react";
+import { ApolloProvider } from "@apollo/client";
+import { apolloClient } from "app/_lib/apollo-client";
+import dynamic from "next/dynamic";
+
+const MetamigoAdmin = dynamic(() => import("app/_components/MetamigoAdmin"), {
+  ssr: false,
+});
+
+export const Admin:FC = () => (
+    <ApolloProvider client={apolloClient}>
+      <MetamigoAdmin />
+    </ApolloProvider>
+  );

apps/metamigo-frontend/app/admin/page.tsx

@@ -0,0 +1,5 @@
+import {  Admin } from "./_components/Admin";
+
+export default function Home() {
+  return <Admin />
+}

apps/metamigo-frontend/app/api/auth/[...nextauth]/route.ts

@@ -1,14 +1,14 @@
-import { NextApiRequest, NextApiResponse } from "next";
+import { NextRequest } from "next/server";
 import NextAuth from "next-auth";
 import Google from "next-auth/providers/google";
 import GitHub from "next-auth/providers/github";
 import GitLab from "next-auth/providers/gitlab";
 import Cognito from "next-auth/providers/cognito";
 import { loadConfig, IAppConfig } from "@digiresilience/metamigo-config";
-import { MetamigoAdapter } from "../../../lib/nextauth-adapter";
-import { CloudflareAccessProvider } from "../../../lib/cloudflare";
+import { MetamigoAdapter } from "app/_lib/nextauth-adapter";
+import { CloudflareAccessProvider } from "app/_lib/cloudflare";
 
-const nextAuthOptions = (config: IAppConfig, req: NextApiRequest) => {
+const nextAuthOptions = (config: IAppConfig, req: NextRequest) => {
   const { nextAuth, cfaccess } = config;
   const adapter = MetamigoAdapter(config);
   const providers = [];
@@ -16,7 +16,7 @@ const nextAuthOptions = (config: IAppConfig, req: NextApiRequest) => {
   const { audience, domain } = cfaccess;
   const cloudflareAccessEnabled = audience && domain;
   if (cloudflareAccessEnabled)
-    providers.push(CloudflareAccessProvider(audience, domain, adapter, req));
+    providers.push(CloudflareAccessProvider(audience, domain, adapter, req as any));
   else {
     if (nextAuth.google?.id)
       providers.push(
@@ -78,11 +78,11 @@ const nextAuthOptions = (config: IAppConfig, req: NextApiRequest) => {
   };
 };
 
-const nextAuth = async (
-  req: NextApiRequest,
-  res: NextApiResponse
-): Promise<void> =>
-  // @ts-expect-error: Type mismatch
-  NextAuth(req, res, nextAuthOptions(await loadConfig(), req));
+const handler = async (req: NextRequest) => {
+  const config = await loadConfig();
+  const authOptions = nextAuthOptions(config, req);
+  // @ts-expect-error: non-existent property
+  return NextAuth(authOptions)(req);
+};
 
-export default nextAuth;
+export { handler as GET, handler as POST };

apps/metamigo-frontend/app/api/graphql/[[...path]]/route.ts

@@ -1,6 +1,6 @@
 import { createProxyMiddleware } from "http-proxy-middleware";
 
-export default createProxyMiddleware({
+export const POST = createProxyMiddleware({
   target:
     process.env.NODE_ENV === "production"
       ? "http://metamigo-api:3001"
@@ -28,9 +28,3 @@ export default createProxyMiddleware({
     }
   },
 });
-
-export const config = {
-  api: {
-    bodyParser: false,
-  },
-};

apps/metamigo-frontend/app/api/proxy/[[...path]]/route.js

@@ -1,6 +1,6 @@
 import { createProxyMiddleware } from "http-proxy-middleware";
 
-export default createProxyMiddleware({
+const handler = createProxyMiddleware({
   target:
     process.env.NODE_ENV === "production"
       ? "http://metamigo-api:3001"
@@ -30,8 +30,4 @@ export default createProxyMiddleware({
   },
 });
 
-export const config = {
-  api: {
-    bodyParser: false,
-  },
-};
+export { handler as GET, handler as POST, handler as PUT, handler as DELETE};

apps/metamigo-frontend/app/layout.tsx

@@ -0,0 +1,20 @@
+import { ReactNode } from "react";
+import "app/_styles/globals.css";
+import { MultiProvider } from "./_components/MultiProvider";
+
+type LayoutProps = {
+  children: ReactNode;
+}
+
+export default function Layout({ children }: LayoutProps) {
+  return (
+    <html lang="en">
+      <body>
+        <MultiProvider>
+          {children}
+        </MultiProvider>
+      </body>
+    </html>
+  );
+}
+

apps/metamigo-frontend/app/login/_components/Login.tsx

@@ -1,8 +1,10 @@
+"use client";
+
 import { FC } from "react";
 import { Button } from "@mui/material";
 import { signIn, signOut, useSession } from "next-auth/react";
 
-const MyComponent: FC = () => {
+export const Login: FC = () => {
   const { data: session } = useSession();
 
   return (
@@ -26,5 +28,3 @@ const MyComponent: FC = () => {
     </>
   );
 };
-
-export default MyComponent;

apps/metamigo-frontend/app/login/page.tsx

@@ -0,0 +1,5 @@
+import { Login } from "./_components/Login";
+
+export default function Page() {
+  return <Login />;
+}

apps/metamigo-frontend/app/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return null;
+}

apps/metamigo-frontend/pages/_app.tsx

@@ -1,13 +0,0 @@
-import "../styles/globals.css";
-import { AppProps } from "next/app";
-import { SessionProvider } from "next-auth/react";
-
-function MetamigoStarter({ Component, pageProps }: AppProps) {
-  return (
-    <SessionProvider session={(pageProps as any).session}>
-      <Component {...pageProps} />
-    </SessionProvider>
-  );
-}
-
-export default MetamigoStarter;

apps/metamigo-frontend/pages/admin.tsx

@@ -1,15 +0,0 @@
-import { ApolloProvider } from "@apollo/client";
-import { apolloClient } from "../lib/apollo-client";
-import dynamic from "next/dynamic";
-
-const MetamigoAdmin = dynamic(() => import("../components/MetamigoAdmin"), {
-  ssr: false,
-});
-
-export default function Home() {
-  return (
-    <ApolloProvider client={apolloClient}>
-      <MetamigoAdmin />
-    </ApolloProvider>
-  );
-}

apps/metamigo-frontend/pages/index.tsx

@@ -1,29 +0,0 @@
-import { NextPage } from "next";
-import { Typography, Box, Button, Grid, Link } from "@mui/material";
-import { FC, useEffect, PropsWithChildren } from "react";
-import { useRouter } from "next/router";
-
-export const RedirectToAdmin: FC<PropsWithChildren> = ({ children }) => {
-  const router = useRouter();
-  useEffect(() => {
-    router.push("/admin");
-  });
-
-  return <>{children}</>;
-};
-
-const Home: NextPage = () => (
-  <Box>
-    <Typography variant="h3">Metamigo</Typography>
-    <Grid container justifyContent="space-around" style={{ padding: 60 }}>
-      <Grid item>
-        <Link href="/admin">
-          <Button variant="contained">Admin</Button>
-          <RedirectToAdmin />
-        </Link>
-      </Grid>
-    </Grid>
-  </Box>
-);
-
-export default Home;

apps/metamigo-frontend/tsconfig.json

@@ -2,7 +2,11 @@
   "extends": "tsconfig-link",
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
@@ -17,9 +21,24 @@
     "strict": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./*", "../../node_modules/*"]
-    }
+      "@/*": [
+        "./*",
+        "../../node_modules/*"
+      ]
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }