1
/*
2
Given a project_id, creates a link to that project showing the title.
3

4
This does a database call (with caching) to get the title from the
5
project_id, so won't be rendered instantly.
6
*/
7

8
import { useEffect, useState } from "react";
9
import A from "components/misc/A";
10
import editURL from "lib/share/edit-url";
11
import Loading from "components/share/loading";
12
import apiPost from "lib/api/post";
13

14
export default function ProjectLink({ project_id }) {
15
  const [title, setTitle] = useState<string>("");
16
  useEffect(() => {
17
    (async () => {
18
      const query = {
19
        projects: { project_id, title: null },
20
      };
21
      try {
22
        const title = (await apiPost("/user-query", { query }))?.query?.projects
23
          ?.title;
24
        setTitle(title ? title : project_id);
25
      } catch (_err) {
26
        setTitle(project_id);
27
      }
28
    })();
29
  }, []);
30
  let body;
31
  if (!title) {
32
    body = <Loading style={{ display: "inline-block" }} />;
33
  } else {
34
    body = title;
35
  }
36
  return (
37
    <A href={editURL({ project_id, type: "collaborator" })} external>
38
      {body}
39
    </A>
40
  );
41
}
42

43