From 0cbcdcaa9e0170c45b41f9527124d6b7d7ece8e8 Mon Sep 17 00:00:00 2001
From: 0x1eef <0x1eef@protonmail.com>
Date: Wed, 20 Dec 2023 17:48:34 -0300
Subject: [PATCH] frontend: add ConnectionSelect, useConnections

---
 twenty-frontend/src/css/main.scss             | 17 +++++++++++++++++
 .../src/js/components/Connections.tsx         | 17 +++--------------
 .../js/components/forms/ConnectionSelect.tsx  | 10 ++++++++++
 .../src/js/components/forms/NewIssueForm.tsx  | 15 ++++++++++++---
 .../src/js/hooks/useConnections.ts            | 19 +++++++++++++++++++
 5 files changed, 61 insertions(+), 17 deletions(-)
 create mode 100644 twenty-frontend/src/js/components/forms/ConnectionSelect.tsx
 create mode 100644 twenty-frontend/src/js/hooks/useConnections.ts

diff --git a/twenty-frontend/src/css/main.scss b/twenty-frontend/src/css/main.scss
index b28c449..d5f0357 100644
--- a/twenty-frontend/src/css/main.scss
+++ b/twenty-frontend/src/css/main.scss
@@ -1,6 +1,10 @@
 @import "fonts";
 @import "colors";
 
+html, html body, .form {
+  height: 100%;
+}
+
 body {
   font-family: "Dhurjati Regular";
   margin: 0;
@@ -24,10 +28,23 @@ header {
 }
 
 .body {
+  height: 100%;
   font-size: larger;
   ul.connections {
     margin: 0;
     padding: 0;
     list-style-type: none;
   }
+  .form {
+    .row {
+      display: flex;
+      width: 100%;
+      textarea, input {
+        width: 100%;
+      }
+    }
+    .row.content {
+      height: 55%;
+    }
+  }
 }
diff --git a/twenty-frontend/src/js/components/Connections.tsx b/twenty-frontend/src/js/components/Connections.tsx
index 2b1381d..8eb0ce4 100644
--- a/twenty-frontend/src/js/components/Connections.tsx
+++ b/twenty-frontend/src/js/components/Connections.tsx
@@ -1,23 +1,12 @@
-import React, {useEffect, useState} from "react";
-
-type Connection = {
-  name: string;
-  path: string;
-}
+import React from "react";
+import { useConnections } from "/hooks/useConnections";
 
 export function Connections() {
-  const [connections, setConnections] = useState<Connection[]>([]);
+  const connections = useConnections();
   const items = connections.map((conn, i) => {
     return (<li key={i}>{conn.name}</li>);
   })
 
-  useEffect(() => {
-    fetch("/servlet/connections")
-    .then((res) => res.json())
-    .then((conns: Connection[]) => setConnections(conns))
-  }, []);
-
-
   return (
     <>
       <span>Connections</span>
diff --git a/twenty-frontend/src/js/components/forms/ConnectionSelect.tsx b/twenty-frontend/src/js/components/forms/ConnectionSelect.tsx
new file mode 100644
index 0000000..f57fe88
--- /dev/null
+++ b/twenty-frontend/src/js/components/forms/ConnectionSelect.tsx
@@ -0,0 +1,10 @@
+import { useConnections } from "/hooks/useConnections";
+import React from "react";
+
+export function ConnectionSelect() {
+  const connections = useConnections();
+  const options = connections.map((conn) => {
+    return <option value={conn.id}>{conn.name}</option>
+  })
+  return (<select name="connection_id">{options}</select>)
+}
diff --git a/twenty-frontend/src/js/components/forms/NewIssueForm.tsx b/twenty-frontend/src/js/components/forms/NewIssueForm.tsx
index af6903f..8ec1bab 100644
--- a/twenty-frontend/src/js/components/forms/NewIssueForm.tsx
+++ b/twenty-frontend/src/js/components/forms/NewIssueForm.tsx
@@ -1,10 +1,19 @@
 import React from "react";
+import { ConnectionSelect } from "/components/forms/ConnectionSelect";
 
 export function NewIssueForm() {
   return (
-    <form>
-      <input name="title" type="text" placeholder="The title of the issue" />
-      <button type="submit">Save</button>
+    <form className="form">
+      <div className="row">
+        <ConnectionSelect/>
+        <input name="title" type="text" placeholder="The title of the issue" />
+      </div>
+      <div className="row content">
+        <textarea name="content"/>
+      </div>
+      <div className="row">
+        <button type="submit">Save</button>
+      </div>
     </form>
   );
 }
diff --git a/twenty-frontend/src/js/hooks/useConnections.ts b/twenty-frontend/src/js/hooks/useConnections.ts
new file mode 100644
index 0000000..beffccc
--- /dev/null
+++ b/twenty-frontend/src/js/hooks/useConnections.ts
@@ -0,0 +1,19 @@
+import { useState, useEffect } from "react";
+
+type Connection = {
+  id: number;
+  name: string;
+  path: string;
+}
+
+export function useConnections() {
+  const [conns, setConns] = useState<Connection[]>([]);
+
+  useEffect(() => {
+    fetch("/servlet/connections")
+    .then((res) => res.json())
+    .then((conns: Connection[]) => setConns(conns))
+  }, []);
+
+  return conns;
+}