From f2678e7bc00455e9597e8f0653d162a818fc260b Mon Sep 17 00:00:00 2001
From: Coki <hashcookie404@gmail.com>
Date: Sat, 7 Sep 2024 12:24:34 +0800
Subject: [PATCH] feat: add initial value handling and middleware for model
 editor

---
 app/components/ModelEditor.tsx | 10 ++++++++--
 app/model-editor/layout.tsx    |  9 +++++++++
 app/model-editor/page.tsx      | 18 ++++++++++++------
 middleware.ts                  | 18 ++++++++++++++++++
 4 files changed, 47 insertions(+), 8 deletions(-)
 create mode 100644 app/model-editor/layout.tsx
 create mode 100644 middleware.ts

diff --git a/app/components/ModelEditor.tsx b/app/components/ModelEditor.tsx
index b319511..88f92c7 100644
--- a/app/components/ModelEditor.tsx
+++ b/app/components/ModelEditor.tsx
@@ -12,7 +12,13 @@ import { newModel } from 'casbin';
 import { setError } from '@/app/utils/errorManager';
 
 export const ModelEditor = ({ initialValue = '' }: { initialValue: string }) => {
-  const [modelText, setModelText] = useState(initialValue);
+  const [modelText, setModelText] = useState('');
+
+  useEffect(() => {
+    if (initialValue) {
+      setModelText(initialValue);
+    }
+  }, [initialValue]);
 
   const validateModel = useCallback(async (text: string) => {
     try {
@@ -74,4 +80,4 @@ export const ModelEditor = ({ initialValue = '' }: { initialValue: string }) =>
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/app/model-editor/layout.tsx b/app/model-editor/layout.tsx
new file mode 100644
index 0000000..90954f9
--- /dev/null
+++ b/app/model-editor/layout.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function ModelEditorLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return <>{children}</>;
+}
diff --git a/app/model-editor/page.tsx b/app/model-editor/page.tsx
index 440f316..cd562d5 100644
--- a/app/model-editor/page.tsx
+++ b/app/model-editor/page.tsx
@@ -1,16 +1,22 @@
 'use client';
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { ModelEditor } from '../components/ModelEditor';
 
-const ModelEditorPage = ({ searchParams }: { searchParams: { model?: string } }) => {
-  const initialValue = searchParams.model ? decodeURIComponent(searchParams.model) : '';
+export default function ModelEditorPage() {
+  const [initialValue, setInitialValue] = useState('');
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const modelParam = params.get('model');
+    if (modelParam) {
+      setInitialValue(decodeURIComponent(modelParam));
+    }
+  }, []);
 
   return (
     <div style={{ width: '100%', height: '100vh' }}>
       <ModelEditor initialValue={initialValue} />
     </div>
   );
-};
-
-export default ModelEditorPage;
\ No newline at end of file
+}
diff --git a/middleware.ts b/middleware.ts
new file mode 100644
index 0000000..03fee3c
--- /dev/null
+++ b/middleware.ts
@@ -0,0 +1,18 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+export function middleware(request: NextRequest) {
+  const response = NextResponse.next();
+  const origin = request.headers.get('origin') || '*';
+
+  response.headers.set('Access-Control-Allow-Origin', origin);
+  response.headers.set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
+  response.headers.set('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
+  response.headers.set('Access-Control-Allow-Credentials', 'true');
+
+  return response;
+}
+
+export const config = {
+  matcher: '/model-editor/:path*',
+};