frontend: add ConnectionSelect, useConnections

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%;
+    }
+  }
 }

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>

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>)
+}

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>
+    <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>
   );
 }

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;
+}