frontend: add ShowIssue, add useLocationHash

twenty-frontend/nanoc/rules/issues.rules

@@ -29,3 +29,18 @@ compile("/js/entry-point/issues.tsx") do
   filter(:webpack, depend_on: %w[/js/components /js/hooks/ /js/types])
   write("/js/entry-point/issues.js")
 end
+
+##
+# GET /issues/show#<issue-id>
+compile("/html/issues/show/index.html.erb") do
+  layout "/default.*"
+  filter(:erb)
+  write("/issues/show/index.html")
+end
+
+##
+# GET /js/entry-point/show-issue.js
+compile("/js/entry-point/show-issue.tsx") do
+  filter(:webpack, depend_on: %w[/js/components /js/hooks/ /js/types])
+  write("/js/entry-point/show-issue.js")
+end

twenty-frontend/src/html/issues/show/index.html.erb

@@ -0,0 +1,4 @@
+<div class="pure-g">
+  <div id="reactapp"></div>
+  <script src="/js/entry-point/show-issue.js"></script>
+</div>

twenty-frontend/src/js/components/Issues.tsx

@@ -3,13 +3,12 @@ import { useIssues } from "/hooks/useIssues";
 
 export function Issues() {
   const [issues] = useIssues();
-  console.log({issues})
   return (
     <>
       <span>Issues</span>
       <ul className="connections">
         {issues.map((issue, key) => {
-          return (<li key={key}>{issue.title}</li>);
+          return <li key={key}>{issue.title}</li>;
         })}
       </ul>
     </>

twenty-frontend/src/js/components/ShowIssue.tsx

@@ -0,0 +1,21 @@
+import React, { useState, useEffect } from "react";
+import { Issue } from "/types/schema";
+import { useLocationHash } from "/hooks/useLocationHash";
+
+export function ShowIssue() {
+  const [id] = useLocationHash();
+  const [issue, setIssue] = useState<Issue | null>(null);
+
+  useEffect(() => {
+    if (!id) return;
+    fetch(`/servlet/issues/${id}/`)
+      .then(res => res.json())
+      .then(res => setIssue(res.issue));
+  }, [id]);
+
+  if (id.length && issue) {
+    return <>{issue.title}</>;
+  } else {
+    return <>No issue</>;
+  }
+}

twenty-frontend/src/js/components/forms/NewIssue.tsx

@@ -27,10 +27,7 @@ export function NewIssue() {
     <form className="new-issue pure-form" onSubmit={handleSubmit(onSave)}>
       <div className="pure-u-1-1">
         <div className="left">
-          <Select
+          <Select {...register("connectionId")} ref={selectRef}>
-            {...register("connectionId")}
-            ref={selectRef}
-          >
             {connections.map((conn, key) => {
               return (
                 <option key={key} value={conn.id}>

twenty-frontend/src/js/entry-point/show-issue.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { ShowIssue } from "/components/ShowIssue";
+
+(function () {
+  const root = document.getElementById("reactapp")!;
+  ReactDOM.createRoot(root).render(<ShowIssue />);
+})();

twenty-frontend/src/js/hooks/useConnections.ts

@@ -12,7 +12,7 @@ export function useConnections() {
   useEffect(() => {
     fetch("/servlet/connections")
       .then(res => res.json())
-      .then((res) => setConns(res.connections));
+      .then(res => setConns(res.connections));
   }, []);
 
   return [conns];

twenty-frontend/src/js/hooks/useIssues.ts

@@ -7,7 +7,7 @@ export function useIssues() {
   useEffect(() => {
     fetch("/servlet/issues")
       .then(res => res.json())
-      .then((res) => setIssues(res.issues));
+      .then(res => setIssues(res.issues));
   }, []);
 
   return [issues];

twenty-frontend/src/js/hooks/useLocationHash.ts

@@ -0,0 +1,18 @@
+import { useEffect, useState } from "react";
+
+export function useLocationHash() {
+  const [hash, setHash] = useState<string>("");
+
+  function set() {
+    const normalized = location.hash.substring(1, location.hash.length);
+    setHash(normalized);
+  }
+
+  useEffect(set, [location.hash]);
+  useEffect(() => {
+    window.addEventListener("hashchange", set);
+    return () => window.removeEventListener("hashchange", set);
+  }, []);
+
+  return [hash];
+}

twenty-frontend/src/js/types/schema.ts

@@ -5,9 +5,9 @@ export type Connection = {
 };
 
 export type Issue = {
-  id: number,
+  id: number;
-  title: string,
+  title: string;
-  content: string,
+  content: string;
-  state: "open" | "closed",
+  state: "open" | "closed";
-  connection_id: number
+  connection_id: number;
-}
+};