Revert "feat(QueryInput): rewrite styles for QueryInput"

backend/core/templates.sql

@@ -0,0 +1,26 @@
+INSERT INTO templates_template (id, name, author, type, dump)
+VALUES
+(
+  1,
+  'Empty Postgres',
+  'Database Playground',
+  'PSQL',
+  ''
+),
+(
+  2,
+  'Some Users',
+  'Database Playground',
+  'PSQL',
+  'CREATE TABLE users (id SERIAL PRIMARY KEY, name VARCHAR(30), age INT);
+   INSERT INTO users (name, age) VALUES (''Timur'', 19);
+   INSERT INTO users (name, age) VALUES (''Kostya'', 18);
+   INSERT INTO users (name, age) VALUES (''Arseniy'', 10);'
+),
+(
+  3,
+  'Empty Mongo',
+  'Database Playground',
+  'MGDB',
+  ''
+);

frontend-37/src/features/main/Register.tsx

@@ -14,7 +14,7 @@
   const [password, setPassword] = useState("");
   const [repeatPassword, setRepeatPassword] = useState("");
 
   const onRegister = async () => {
     console.log(username, email, password, repeatPassword);
     if (password != repeatPassword) {
       alert("passwords do not match");
@@ -31,6 +31,7 @@
     });
 
     const json = await res.json();
+    console.log(json);
   };
 
   return (

frontend-37/src/features/main/index.tsx

@@ -16,20 +16,20 @@ export function Main() {
   useEffect(() => {
     const run = async () => {
       if (!localStorage.getItem("session_id")) {
-        const res = await fetch(API_URL + "/session", {
-          credentials: "include",
-        });
+        const res = await fetch(API_URL + "/session/");
         const { session_id } = await res.json();
         localStorage.setItem("session_id", session_id);
       } else {
-        const res = await fetch(API_URL + "/session/valid", {
-          credentials: "include",
+        const res = await fetch(API_URL + "/session/valid/", {
+          headers: {
+            Session: localStorage.getItem("session_id")!,
+          },
         });
         const { valid } = await res.json();
         console.log(valid);
         if (!valid) {
           localStorage.removeItem("session_id");
-          run();
+          await run();
         }
       }
     };

frontend-37/src/features/playground/TopBar.tsx

@@ -2,33 +2,31 @@ import saveImg from "@/assets/save.svg";
 import uploadImg from "@/assets/upload.svg";
 import { templateStore } from "@/shared/store/templateStore";
 import { Button } from "@/shared/ui/Button";
+import { ModalWindow } from "@/shared/ui/ModalWindow";
 import { TopBar } from "@/shared/ui/TopBar";
 import { TopBarElement } from "@/shared/ui/TopBarElement";
 import { useState } from "react";
 import styles from "./TopBar.module.css";
 import { TemplateChoice } from "../template-choice";
+import { Upload } from "./Upload";
 
-interface PlaygroundTopBarProps {
-  handleUpload: () => void;
-  handleSave: () => void;
-}
-
-export function PlaygroundTopBar({
-  handleUpload,
-  handleSave,
-}: PlaygroundTopBarProps) {
+export function PlaygroundTopBar() {
   const { template } = templateStore();
+  const [showUpload, setShowUpload] = useState(false);
   const [showTemplateChoice, setShowTemplateChoice] = useState(false);
 
   return (
     <TopBar className={styles.topbar} contentClassName={styles.topbarContent}>
       <TopBarElement>
-        <Button className={styles.saveButton} onClick={handleUpload}>
+        <Button
+          className={styles.saveButton}
+          onClick={() => setShowUpload(true)}
+        >
           <img src={uploadImg} alt="Upload"></img>
         </Button>
       </TopBarElement>
       <TopBarElement>
-        <Button className={styles.saveButton} onClick={handleSave}>
+        <Button className={styles.saveButton}>
           <img src={saveImg} alt="Save"></img>
         </Button>
       </TopBarElement>
@@ -40,6 +38,9 @@ export function PlaygroundTopBar({
           {template}
         </Button>
       </TopBarElement>
+      <ModalWindow isOpen={showUpload} setIsOpen={setShowUpload}>
+        <Upload onClose={() => setShowUpload(false)} />
+      </ModalWindow>
       <ModalWindow
         isOpen={showTemplateChoice}
         setIsOpen={setShowTemplateChoice}

frontend-37/src/features/playground/index.tsx

@@ -1,12 +1,9 @@
-import { ModalWindow } from "@/shared/ui/ModalWindow";
-import { DBType } from "@/types/DBType";
 import { useEffect, useState } from "react";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 import styles from "./Playground.module.css";
 import { API_URL } from "../../config/env";
 import { templateStore } from "../../shared/store/templateStore";
 import { PlaygroundTopBar } from "./TopBar";
-import { Upload } from "./Upload";
 import { QueryInput } from "./query-input";
 import { QueryResultList } from "./query-result-list";
 import { SchemaPanel } from "./schema-panel";
@@ -16,44 +13,41 @@
 export function Playground() {
   const session_id = localStorage.getItem("session_id");
   const { updateSchemas } = schemasStore();
-  const [templateType, setTemplateType] = useState("" as DBType);
+  const [templateType, setTemplateType] = useState("");
   const { updateTemplate } = templateStore();
-  const [showUpload, setShowUpload] = useState(false);
 
   useEffect(() => {
     const run = async () => {
-      const res1 = await fetch(
-        `${API_URL}/db/schema/?session_id=${session_id}`,
-        {
-          credentials: "include",
-        }
-      );
+      const res1 = await fetch(`${API_URL}/db/schema/`, {
+        headers: {
+          Session: session_id!,
+        },
+      });
       const json1 = await res1.json();
       updateSchemas(json1.tables);
 
-      const res2 = await fetch(
-        `${API_URL}/session/info/?session_id=${session_id}`
-      );
+      const res2 = await fetch(`${API_URL}/session/info/`, {
+        headers: {
+          Session: session_id!,
+        },
+      });
       const json2 = await res2.json();
 
-      const res3 = await fetch(`${API_URL}/template/${json2.template}`);
+      const res3 = await fetch(`${API_URL}/template/${json2.template}/`);
       const json3 = await res3.json();
       updateTemplate(json3.name);
-      setTemplateType(json3.type as DBType);
+      setTemplateType(json3.type);
     };
     run();
   }, []);
 
   return (
     <>
       {templateType == "PSQL" ? (
         <div className={styles.pageContainer}>
-          <PlaygroundTopBar
-            handleUpload={() => setShowUpload(true)}
-            handleSave={() => {}}
-          />
+          <PlaygroundTopBar />
 
-          <div className={`fira ${styles.contentContainer}`}>
+          <div className={`mono ${styles.contentContainer}`}>
             <PanelGroup
               direction="vertical"
               style={{
@@ -69,7 +63,7 @@
                   }}
                 >
                   <Panel className={styles.topContentPanel}>
-                    <QueryInput templateType={templateType} />
+                    <QueryInput />
                   </Panel>
 
                   <PanelResizeHandle className={styles.verticalResizeHandle} />
@@ -91,15 +85,12 @@
       ) : (
         <div className={styles.pageContainer}>
           <div>
-            <PlaygroundTopBar
-              handleUpload={() => setShowUpload(true)}
-              handleSave={() => {}}
-            />
+            <PlaygroundTopBar />
             <div className={styles.mongoSchemaWrapper}>
               <MongoSchema />
             </div>
           </div>
-          <div className={`fira ${styles.contentContainer}`}>
+          <div className={`mono ${styles.contentContainer}`}>
             <PanelGroup
               direction="horizontal"
               style={{
@@ -108,7 +99,7 @@
               }}
             >
               <Panel className={styles.topContentPanel}>
-                <QueryInput templateType={templateType} />
+                <QueryInput />
               </Panel>
 
               <PanelResizeHandle className={styles.verticalResizeHandle} />
@@ -120,10 +111,6 @@
           </div>
         </div>
       )}
-
-      <ModalWindow isOpen={showUpload} setIsOpen={setShowUpload}>
-        <Upload />
-      </ModalWindow>
     </>
   );
 }