merge

.gitignore

@@ -39,4 +39,7 @@ next-env.d.ts
 # next-sitemap
 robots.txt
 sitemap.xml
-sitemap-*.xml
+sitemap-*.xml
+
+#cloudfare
+.wrangler/*

env.d.ts

@@ -0,0 +1,10 @@
+import { loadEnvConfig } from '@next/env'
+
+const projectDir = process.cwd()
+loadEnvConfig(projectDir)
+
+declare global {
+  interface CloudflareEnv {
+    DB: D1Database
+  }
+}

jest.config.js

@@ -10,7 +10,6 @@ const createJestConfig = nextJest({
 const customJestConfig = {
   // Add more setup options before each test is run
   setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
-
   // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
   moduleDirectories: ['node_modules', '<rootDir>/'],
 

migrations/0001_form_fields.sql

@@ -0,0 +1,23 @@
+-- Migration number: 0001 	 2024-08-12T08:14:43.040Z
+
+
+create table form_fields (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    form_id integer not null,
+    field_name varchar(255) not null,
+    field_type varchar(255) not null,
+    field_order integer not null,
+    created_at timestamp not null default current_timestamp,
+    updated_at timestamp not null default current_timestamp
+);
+
+create table responses(
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    response text not null
+);
+
+INSERT INTO form_fields (form_id, field_name, field_type, field_order)
+VALUES 
+(1, 'Name', 'text', 1),
+(1, 'Email', 'email', 2),
+(1, 'Age', 'number', 3);

next.config.js

@@ -1,4 +1,8 @@
 /** @type {import('next').NextConfig} */
+const { setupDevPlatform } = require('@cloudflare/next-on-pages/next-dev');
+if (process.env.NODE_ENV === 'development') {
+  setupDevPlatform();
+}
 const nextConfig = {
   eslint: {
     dirs: ['src'],

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "nextjs-materia-mui-typescript-hook-form-scaffold-boilerplate-starter",
+  "name": "template",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -15,23 +15,34 @@
     "format": "prettier -w .",
     "format:check": "prettier -c .",
     "postbuild": "next-sitemap --config next-sitemap.config.js",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "api": "wrangler pages dev .",
+    "cloudflare-start": " npx wrangler pages dev .vercel/output/static",
+    "apply-d1-remote": "wrangler d1 migrations apply template-demo --remote",
+    "pages:build": "npx @cloudflare/next-on-pages",
+    "preview": "npm run pages:build && wrangler pages dev",
+    "deploy": "npm run pages:build && wrangler pages deploy"
   },
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@hookform/resolvers": "^3.3.1",
     "@mui/icons-material": "^5.14.9",
     "@mui/material": "^5.14.10",
+    "@next/env": "^14.2.5",
+    "@types/node": "^22.2.0",
     "dayjs": "^1.11.10",
     "next": "^14.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.46.2",
     "react-icons": "^4.10.1",
+    "wrangler": "^3.70.0",
     "zod": "^3.22.4"
   },
   "devDependencies": {
+    "@cloudflare/next-on-pages": "^1.13.2",
+    "@cloudflare/workers-types": "^4.20240806.0",
     "@commitlint/cli": "^16.3.0",
     "@commitlint/config-conventional": "^16.2.4",
     "@svgr/webpack": "^8.0.1",
@@ -53,15 +64,16 @@
     "next-sitemap": "^2.5.28",
     "postcss": "^8.4.26",
     "prettier": "^2.8.8",
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "vercel": "^35.2.4"
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx}": [
-      "eslint --max-warnings=0",
       "prettier -w"
     ],
     "**/*.{json,css,scss,md,webmanifest}": [
       "prettier -w"
     ]
-  }
-}
+  },
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+}

src/app/api/getform/route.ts

@@ -0,0 +1,17 @@
+export const runtime = 'edge';
+import { D1Database } from '@cloudflare/workers-types'
+import { NextResponse } from 'next/server';
+
+export interface Env {
+  DB: D1Database;
+}
+import { getRequestContext } from '@cloudflare/next-on-pages'
+
+
+export async function GET() {
+  const { env } = getRequestContext()
+  const myDb = env.DB;
+  const data: any = await myDb.prepare('SELECT * FROM form_fields').all();
+
+  return NextResponse.json(data.results);
+}

src/app/api/getform/types.ts

@@ -0,0 +1,7 @@
+export type FormFieldRow = {
+  form_field_id: number;
+  form_id: number;
+  field_name: string;
+  field_type: string;
+  field_order: number;
+};

src/app/api/submitForm/route.ts

@@ -0,0 +1,41 @@
+export const runtime = 'edge';
+import { D1Database } from '@cloudflare/workers-types'
+import { NextRequest, NextResponse } from 'next/server';
+import { SubmitForm } from '@/app/api/submitForm/types';
+export interface Env {
+  DB: D1Database;
+}
+import { getRequestContext } from '@cloudflare/next-on-pages'
+
+
+export async function POST(req: NextRequest) {
+
+  const { env } = getRequestContext()
+  const myDb = env.DB;
+
+  try {
+    // Get JSON data from the POST request body
+    const data = await req.json();
+    console.log('Received data:', data);
+    // Assuming data is an array of objects with { key, value }
+    const entriesArray = (data as SubmitForm[]).map(({ Field, Value }) => `${Value}`);
+    console.log(entriesArray);
+
+    // Construct the SQL statement
+    let stmt = "INSERT INTO responses (response) VALUES ";
+    const values = entriesArray.map(value => `('${value}')`).join(", ");
+    stmt += values + ";";
+
+    // Process the data as needed
+    console.log('Executing SQL statement:', stmt);
+    const res = await myDb.prepare(stmt).run();
+
+    // Send a response back to the client
+    return NextResponse.json({ message: 'Data received successfully', data, res });
+  } catch (error) {
+    console.error('Error processing POST request:', error);
+    return NextResponse.json({ message: 'Internal Server Error' }, { status: 500 });
+  }
+
+
+}

src/app/api/submitForm/types.ts

@@ -0,0 +1,4 @@
+export type SubmitForm = {
+  Field: string;
+  Value: string;
+};

src/app/api/test/route.ts

@@ -1,22 +1,11 @@
 import { NextResponse } from 'next/server';
-
-// Test local NextJs API /api/test method GET with parameters
-export const GET = async (req: Request) => {
-  const { searchParams } = new URL(req.url);
-  const reqData = Object.fromEntries(searchParams);
-  return NextResponse.json({
-    message: 'Test getApiResponse GET success!',
-    method: 'GET',
-    reqData,
-  });
-};
-
-// Test local NextJs API /api/test method POST with variables
-export const POST = async (req: Request) => {
-  const reqData = await req.json();
-  return NextResponse.json({
-    message: 'Test postApiResponse POST success!',
-    method: 'POST',
-    reqData,
-  });
-};
+export const runtime = 'edge';
+export const GET = async () => {
+  return NextResponse.json([
+    { field_name: 'Name', field_type: 'text' },
+    { field_name: 'Email', field_type: 'email' },
+    { field_name: 'Organization', field_type: 'text' },
+    { field_name: 'Surname', field_type: 'text' },
+    { field_name: 'Field', field_type: 'text' },
+  ]);
+};

src/app/layout.tsx

@@ -5,7 +5,6 @@ import * as React from 'react';
 
 import { SITE_CONFIG } from '@/constants';
 import { GLOBAL_STYLES } from '@/styles';
-
 // !STARTERCONF Change these default meta
 // !STARTERCONF Look at @/constant/config to change them
 export const metadata: Metadata = {

src/app/not-found.tsx

@@ -3,6 +3,8 @@ import { Metadata } from 'next';
 import * as React from 'react';
 import { RiAlarmWarningFill } from 'react-icons/ri';
 
+export const runtime = 'edge'
+
 export const metadata: Metadata = {
   title: 'Not Found',
 };

src/app/page.tsx

@@ -1,9 +1,10 @@
-import Homepage from '@/components/Homepage';
+import { Box } from '@mui/material';
 
-import { getApiResponse } from '@/utils/shared/get-api-response';
-
-import { NpmData, PageParams } from '@/types';
+import Register from '@/components/Register';
+import SignIn from '@/components/Signin';
 
+//import { PageParams } from '@/types';
+/*
 const loadDataFromApi = async (slug?: string) => {
   if (slug === 'testError500') {
     throw new Error('This is mock a ssr 500 test error');
@@ -28,16 +29,17 @@
     nextJsNpmData,
   };
 };
+*/
+//const AppHome = async ({ searchParams }: PageParams) => {
 
-const AppHome = async ({ searchParams }: PageParams) => {
-  const slug = searchParams?.slug;
-  const { reactNpmData, nextJsNpmData } = await loadDataFromApi(slug);
+const AppHome = async () => {
+  //const slug = searchParams?.slug;
+  //const { reactNpmData, nextJsNpmData } = await loadDataFromApi(slug);
 
   return (
-    <Homepage
-      reactVersion={reactNpmData?.version}
-      nextJsVersion={nextJsNpmData?.version}
-    />
+    <Box>
+      <Register />
+    </Box>
   );
 };
 

src/components/Register.tsx

@@ -0,0 +1,86 @@
+'use client';
+import { Button, Checkbox, FormControl, TextField, Box } from '@mui/material';
+//import Container from '@mui/material';
+//import { FormControl } from '@mui/material';
+import Grid from '@mui/material/Grid';
+import React, { useEffect, useState } from 'react';
+interface Field {
+
+  field_name: string;
+  field_type: string;
+}
+
+const Register: React.FC = () => {
+  const [fields, setFields] = useState<Field[]>();;
+
+  const [formValues, setFormValues] = useState<Map<string, string>>(new Map());
+  const [agree, setAgree] = useState(false);
+
+  useEffect(() => {
+    // Fetch API result and update fields state
+    fetch('/api/getform')
+      .then((response) => response.json())
+      .then((data) => setFields(data as Field[]));
+  }, []);
+
+  const handleInputChange = (label: string, value: string) => {
+    setFormValues((prevValues: Map<string, string>) => {
+      prevValues.set(label, value);
+      return prevValues;
+    });
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const entriesArray = Array.from(formValues.entries()).map(([key, value]) => ({ Field: key, Value: value }));
+    console.log('Submitting form:', formValues);
+    try {
+      const response = await fetch('/api/submitForm', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(entriesArray)
+      });
+
+      const result = await response.json();
+      console.log(result);
+    } catch (error) {
+      console.error('Error submitting form:', error);
+    }
+  };
+
+  return (
+    <Grid
+      container
+      direction='column'
+      justifyContent='center'
+      alignItems='center'
+    >
+      <Box component='form' onSubmit={handleSubmit} noValidate alignItems='center'>
+        {fields?.map((field, index) => (
+          <Grid item xs key={index}>
+            <TextField
+              key={index}
+              label={field.field_name}
+              type={field.field_type}
+              fullWidth
+              margin='normal'
+              onChange={(e) => handleInputChange(field.field_name, e.target.value)}
+            />
+          </Grid>
+        ))}
+        <Grid item xs>
+          <Checkbox checked={agree} onChange={(e) => setAgree(e.target.checked)} />
+        </Grid>
+        <Grid item xs>
+          <Button variant='contained' color='primary' type='submit'>
+            Register
+          </Button>
+        </Grid>
+      </Box>
+    </Grid>
+  );
+};
+
+export default Register;