App directory #3

apps/leafcutter/app/(main)/about/_components/About.tsx

@@ -7,8 +7,8 @@ import Link from "next/link";
 import { Grid, Container, Box, Button } from "@mui/material";
 import { useAppContext } from "@/app/_components/AppProvider";
 import { PageHeader } from "@/app/_components/PageHeader";
-import { AboutFeature } from "@/app/_components/AboutFeature";
-import { AboutBox } from "@/app/_components/AboutBox";
+import { AboutFeature } from "./AboutFeature";
+import { AboutBox } from "./AboutBox";
 import AbstractDiagram from "images/abstract-diagram.png";
 import AboutHeader from "images/about-header.png";
 import Globe from "images/globe.png";

apps/leafcutter/app/(main)/about/_components/AboutBox.tsx

@@ -2,7 +2,7 @@
 
 import { FC, PropsWithChildren } from "react";
 import { Box } from "@mui/material";
-import { useAppContext } from "./AppProvider";
+import { useAppContext } from "../../../_components/AppProvider";
 
 type AboutBoxProps = PropsWithChildren<{
   backgroundColor: string;

apps/leafcutter/app/(main)/about/_components/AboutFeature.tsx

@@ -4,7 +4,7 @@ import { FC } from "react";
 import Image from "next/legacy/image";
 import { Grid, Box, GridSize } from "@mui/material";
 import AboutDots from "images/about-dots.png";
-import { useAppContext } from "./AppProvider";
+import { useAppContext } from "app/_components/AppProvider";
 
 interface AboutFeatureProps {
   title: string;

apps/leafcutter/app/(main)/create/_components/Create.tsx

@@ -11,10 +11,9 @@ import { VisualizationBuilder } from "@/app/_components/VisualizationBuilder";
 
 type CreateProps = {
   templates: any;
-  embedded: boolean;
 };
 
-export const Create: FC<CreateProps> = ({ templates, embedded }) => {
+export const Create: FC<CreateProps> = ({ templates }) => {
   const t = useTranslate();
   const {
     colors: { cdrLinkOrange },

apps/leafcutter/app/(main)/create/page.tsx

@@ -3,7 +3,6 @@ import { Create } from "./_components/Create";
 
 export default async function Page() {
   const templates = await getTemplates(100);
-  console.log({templates});
 
-  return <Create templates={templates} embedded={false}/>;
+  return <Create templates={templates} />;
 };

apps/leafcutter/app/(main)/layout.tsx

@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+import "app/_styles/global.css";
+import "@fontsource/poppins/400.css";
+import "@fontsource/poppins/700.css";
+import "@fontsource/roboto/400.css";
+import "@fontsource/roboto/700.css";
+import "@fontsource/playfair-display/900.css";
+// import getConfig from "next/config";
+// import { LicenseInfo } from "@mui/x-data-grid-pro";
+import { InternalLayout } from "app/_components/InternalLayout";
+import { headers } from 'next/headers'
+
+type LayoutProps = {
+  children: ReactNode;
+};
+
+export default function Layout({ children }: LayoutProps) {
+  const allHeaders = headers();
+  const embedded = Boolean(allHeaders.get('x-leafcutter-embedded'));
+console.log({embedded})
+  return <InternalLayout embedded={embedded}>{children}</InternalLayout>;
+}

apps/leafcutter/app/(main)/preview/[...visualizationID]/_components/Preview.tsx

@@ -0,0 +1,21 @@
+import { FC } from "react";
+/* eslint-disable no-underscore-dangle */
+import { RawDataViewer } from "@/app/_components/RawDataViewer";
+import { VisualizationDetail } from "@/app/_components/VisualizationDetail";
+
+interface PreviewProps {
+  visualization: any;
+  visualizationType: string;
+  data: any[];
+}
+
+export const Preview: FC<PreviewProps> = ({
+  visualization,
+  visualizationType,
+  data,
+}) =>
+  visualizationType === "rawData" ? (
+    <RawDataViewer rows={data} height={750} />
+  ) : (
+    <VisualizationDetail {...visualization} />
+  );

apps/leafcutter/app/(main)/preview/[...visualizationID]/page.tsx

@@ -1,29 +1,12 @@
-import { FC } from "react";
 /* eslint-disable no-underscore-dangle */
 // import { Client } from "@opensearch-project/opensearch";
-import { RawDataViewer } from "@/app/_components/RawDataViewer";
-import { VisualizationDetail } from "@/app/_components/VisualizationDetail";
+import { Preview } from "./_components/Preview";
 // import { createVisualization } from "lib/opensearch";
 
-interface PreviewProps {
-  visualization: any;
-  visualizationType: string;
-  data: any[];
+export default function Page() {
+  return <Preview visualization={undefined} visualizationType={""} data={[]}/>;
 }
 
-const Preview: FC<PreviewProps> = ({
-  visualization,
-  visualizationType,
-  data,
-}) =>
-  visualizationType === "rawData" ? (
-    <RawDataViewer rows={data} height={750} />
-  ) : (
-    <VisualizationDetail {...visualization} />
-  );
-
-export default Preview;
-
 /*
 export const getServerSideProps: GetServerSideProps = async (
   context: GetServerSidePropsContext

apps/leafcutter/app/(main)/setup/_components/Setup.tsx

@@ -1,11 +1,13 @@
+"use client";
+
+import { FC } from "react";
 import { useLayoutEffect } from "react";
-import { NextPage } from "next";
 import { useRouter } from "next/navigation";
 import { Grid, CircularProgress } from "@mui/material";
 import Iframe from "react-iframe";
 import { useAppContext } from "@/app/_components/AppProvider";
 
-const Setup: NextPage = () => {
+export const Setup:FC = () => {
   const {
     colors: { leafcutterElectricBlue },
   } = useAppContext();

apps/leafcutter/app/(main)/setup/page.tsx

@@ -0,0 +1,6 @@
+import { Setup } from './_components/Setup';
+
+export default function Page() {
+  return <Setup />;
+}
+

apps/leafcutter/app/_components/VisualizationDetail.tsx

@@ -26,7 +26,7 @@ export const VisualizationDetail: FC<VisualizationDetailProps> = ({
     typography: { h4, p },
   } = useAppContext();
   const finalURL = `${process.env.NEXT_PUBLIC_NEXTAUTH_URL}${url}&_g=(filters%3A!()%2CrefreshInterval%3A(pause%3A!t%2Cvalue%3A0)%2Ctime%3A(from%3Anow-3y%2Cto%3Anow))`;
-
+console.log({finalURL})
   return (
     <Box key={id}>
       {!editing ? (

apps/leafcutter/app/api/visualizations/create/route.ts

@@ -3,7 +3,7 @@ import { getServerSession } from "next-auth";
 import { authOptions } from "@/app/_lib/auth";
 import { createUserVisualization } from "@/app/_lib/opensearch";
 
-export const POSt = async (req: NextRequest) => {
+export const POST = async (req: NextRequest) => {
     const session = await getServerSession(authOptions);
     const { user: { email } }: any = session;
     const { visualizationID, title, description, query } = await req.json();

apps/leafcutter/app/api/visualizations/update/route.ts

@@ -3,7 +3,7 @@ import { getServerSession } from "next-auth";
 import { authOptions } from "@/app/_lib/auth";
 import { updateUserVisualization } from "@/app/_lib/opensearch";
 
-const handler = async (req: NextRequest) => {
+export const POST = async (req: NextRequest) => {
     const session = await getServerSession(authOptions);
     const { user: { email } }: any = session;
     const { id, title, description, query } = await req.json();
@@ -18,5 +18,4 @@ const handler = async (req: NextRequest) => {
     return NextResponse.json({ id });
 };
 
-export default handler;
 

apps/leafcutter/app/layout.tsx

@@ -9,8 +9,6 @@ import "@fontsource/playfair-display/900.css";
 // import getConfig from "next/config";
 // import { LicenseInfo } from "@mui/x-data-grid-pro";
 import { MultiProvider } from "app/_components/MultiProvider";
-import { InternalLayout } from "app/_components/InternalLayout";
-import { headers } from 'next/headers'
 
 export const metadata: Metadata = {
   title: "Leafcutter",
@@ -21,8 +19,6 @@ type LayoutProps = {
 };
 
 export default function Layout({ children }: LayoutProps) {
-  const allHeaders = headers();
-  const embedded = Boolean(allHeaders.get('x-leafcutter-embedded'));
   // const { publicRuntimeConfig } = getConfig();
   // LicenseInfo.setLicenseKey(publicRuntimeConfig.muiLicenseKey);
 
@@ -30,7 +26,7 @@ export default function Layout({ children }: LayoutProps) {
     <html lang="en">
       <body>
         <MultiProvider>
-          <InternalLayout embedded={embedded}>{children}</InternalLayout>
+         {children}
         </MultiProvider>
       </body>
     </html>