feat: setup trello import

src/app/boards/components/ImportBoardsForm.tsx

@@ -0,0 +1,196 @@
+"use client";
+
+import { Fragment, useState } from "react";
+import { api } from "~/trpc/react";
+import { Listbox, Transition } from "@headlessui/react";
+
+import { FaTrello } from "react-icons/fa";
+import { HiChevronUpDown, HiXMark } from "react-icons/hi2";
+
+import { useModal } from "~/app/providers/modal";
+
+import { useFormik } from "formik";
+
+interface TrelloFormValues {
+  apiKey: string;
+  token: string;
+}
+
+const sources = [{ source: "Trello" }];
+
+const SelectSource = ({ handleNextStep }: { handleNextStep: () => void }) => {
+  const formik = useFormik({
+    initialValues: {
+      source: "Trello",
+    },
+    onSubmit: () => {
+      handleNextStep();
+    },
+  });
+
+  return (
+    <form onSubmit={formik.handleSubmit}>
+      <label
+        htmlFor="name"
+        className="block pb-2 text-sm font-normal leading-6 text-dark-1000"
+      >
+        Source
+      </label>
+      <Listbox value={formik.values.source} onChange={formik.handleChange}>
+        {({ open }) => (
+          <>
+            <div className="relative">
+              <Listbox.Button className="block w-full rounded-md border-0 bg-dark-300 bg-white/5 px-4 py-1.5 text-dark-1000 shadow-sm ring-1 ring-inset ring-dark-700 focus:ring-2 focus:ring-inset focus:ring-dark-700 sm:text-sm sm:leading-6">
+                <span className="flex items-center">
+                  <FaTrello />
+                  <span className="ml-2 block truncate">
+                    {formik.values.source}
+                  </span>
+                </span>
+                <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                  <HiChevronUpDown
+                    className="h-5 w-5 text-gray-400"
+                    aria-hidden="true"
+                  />
+                </span>
+              </Listbox.Button>
+
+              <Transition
+                show={open}
+                as={Fragment}
+                leave="transition ease-in duration-100"
+                leaveFrom="opacity-100"
+                leaveTo="opacity-0"
+              >
+                <Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-dark-300 py-2 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+                  {sources.map(({ source }, index) => (
+                    <Listbox.Option
+                      key={`source_${index}`}
+                      className="relative cursor-default select-none px-2 text-dark-1000 "
+                      value={source}
+                    >
+                      {() => (
+                        <div className="flex items-center rounded-[5px] p-2 hover:bg-dark-400">
+                          <FaTrello />
+                          <span className="ml-2 block truncate font-normal">
+                            {source}
+                          </span>
+                        </div>
+                      )}
+                    </Listbox.Option>
+                  ))}
+                </Listbox.Options>
+              </Transition>
+            </div>
+          </>
+        )}
+      </Listbox>
+      <div className="mt-5 sm:mt-6">
+        <button
+          type="submit"
+          className="inline-flex w-full justify-center rounded-md bg-dark-1000 px-3 py-2 text-sm font-semibold text-dark-50 shadow-sm focus-visible:outline-none"
+        >
+          Select source
+        </button>
+      </div>
+    </form>
+  );
+};
+
+interface ImportTrelloProps {
+  handleSetAuthDetails: (apiKey: string, token: string) => void;
+}
+
+const ImportTrello: React.FC<ImportTrelloProps> = ({
+  handleSetAuthDetails,
+}) => {
+  const formik = useFormik({
+    initialValues: {
+      apiKey: "",
+      token: "",
+    },
+    onSubmit: (values: TrelloFormValues) => {
+      handleSetAuthDetails(values.apiKey, values.token);
+    },
+  });
+
+  return (
+    <form onSubmit={formik.handleSubmit}>
+      <label
+        htmlFor="apiKey"
+        className="block pb-2 text-sm font-normal leading-6 text-dark-1000"
+      >
+        API Key
+      </label>
+      <input
+        id="apiKey"
+        name="apiKey"
+        className="mb-2 block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 text-dark-1000 shadow-sm ring-1 ring-inset ring-dark-700 focus:ring-2 focus:ring-inset focus:ring-dark-700 sm:text-sm sm:leading-6"
+        value={formik.values.apiKey}
+        onChange={formik.handleChange}
+      />
+      <label
+        htmlFor="token"
+        className="block pb-2 text-sm font-normal leading-6 text-dark-1000"
+      >
+        Token
+      </label>
+      <input
+        id="token"
+        name="token"
+        className="block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 text-dark-1000 shadow-sm ring-1 ring-inset ring-dark-700 focus:ring-2 focus:ring-inset focus:ring-dark-700 sm:text-sm sm:leading-6"
+        value={formik.values.token}
+        onChange={formik.handleChange}
+      />
+      <div className="mt-5 sm:mt-6">
+        <button
+          type="submit"
+          className="inline-flex w-full justify-center rounded-md bg-dark-1000 px-3 py-2 text-sm font-semibold text-dark-50 shadow-sm focus-visible:outline-none"
+        >
+          Fetch boards
+        </button>
+      </div>
+    </form>
+  );
+};
+
+export function ImportBoardsForm() {
+  // const utils = api.useUtils();
+  const { closeModal } = useModal();
+  const [step, setStep] = useState(1);
+  const [apiKey, setApiKey] = useState("");
+  const [token, setToken] = useState("");
+
+  const boards = api.import.trello.getBoards.useQuery(
+    { apiKey, token },
+    {
+      enabled: apiKey && token ? true : false,
+    },
+  );
+
+  const handleSetAuthDetails = (apiKey: string, token: string) => {
+    setApiKey(apiKey);
+    setToken(token);
+  };
+
+  // const refetchBoards = () => utils.board.all.refetch();
+
+  return (
+    <>
+      <div className="flex w-full justify-between pb-4">
+        <h2 className="text-sm font-medium text-dark-1000">New import</h2>
+        <button
+          className="rounded p-1 hover:bg-dark-300"
+          onClick={() => closeModal()}
+        >
+          <HiXMark size={18} className="text-dark-900" />
+        </button>
+      </div>
+
+      {step === 1 && <SelectSource handleNextStep={() => setStep(step + 1)} />}
+      {step === 2 && (
+        <ImportTrello handleSetAuthDetails={handleSetAuthDetails} />
+      )}
+    </>
+  );
+}

src/app/boards/page.tsx

@@ -1,15 +1,16 @@
 "use client";
 
-import { HiOutlinePlusSmall } from "react-icons/hi2";
+import { HiArrowDownTray, HiOutlinePlusSmall } from "react-icons/hi2";
 import { BoardsList } from "./components/BoardsList";
 
 import { useModal } from "~/app/providers/modal";
 import Modal from "~/app/components/modal";
 
+import { ImportBoardsForm } from "~/app/boards/components/ImportBoardsForm";
 import { NewBoardForm } from "~/app/boards/components/NewBoardForm";
 
 export default function BoardsPage() {
-  const { openModal } = useModal();
+  const { openModal, modalContentType } = useModal();
 
   return (
     <div className="p-8">
@@ -18,22 +19,35 @@ export default function BoardsPage() {
           Boards
         </h1>
         <div>
+          <button
+            type="button"
+            className="bg-dark-3000 mr-2 inline-flex items-center gap-x-1.5 rounded-md border-[1px] border-dark-600 px-3 py-2 text-sm text-dark-1000 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+            onClick={() => openModal("IMPORT_BOARDS")}
+          >
+            <div className="flex h-5 w-5 items-center">
+              <HiArrowDownTray className="-mr-0.5 h-4 w-4" aria-hidden="true" />
+            </div>
+            Import
+          </button>
           <button
             type="button"
             className="inline-flex items-center gap-x-1.5 rounded-md bg-dark-1000 px-3 py-2 text-sm font-semibold text-dark-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
             onClick={() => openModal("NEW_BOARD")}
           >
-            <HiOutlinePlusSmall
+            <div className="h-5 w-5 items-center">
-              className="-mr-0.5 h-5 w-5"
+              <HiOutlinePlusSmall
-              aria-hidden="true"
+                className="-mr-0.5 h-5 w-5"
-            />
+                aria-hidden="true"
+              />
+            </div>
             New
           </button>
         </div>
       </div>
 
       <Modal>
-        <NewBoardForm />
+        {modalContentType === "NEW_BOARD" && <NewBoardForm />}
+        {modalContentType === "IMPORT_BOARDS" && <ImportBoardsForm />}
       </Modal>
 
       <div className="flex flex-row">

src/server/api/root.ts

@@ -2,6 +2,7 @@ import { boardRouter } from "~/server/api/routers/board";
 import { cardRouter } from "~/server/api/routers/card";
 import { labelRouter } from "~/server/api/routers/label";
 import { listRouter } from "~/server/api/routers/list";
+import { importRouter } from "~/server/api/routers/import";
 import { createTRPCRouter } from "~/server/api/trpc";
 
 /**
@@ -14,6 +15,7 @@ export const appRouter = createTRPCRouter({
   card: cardRouter,
   label: labelRouter,
   list: listRouter,
+  import: importRouter,
 });
 
 // export type definition of API

src/server/api/routers/import.ts

@@ -0,0 +1,63 @@
+import { z } from "zod";
+
+import {
+  createTRPCRouter,
+  publicProcedure,
+} from "~/server/api/trpc";
+
+const TRELLO_API_URL = 'https://api.trello.com/1';
+
+interface BoardData {
+  id: string;
+  name: string;
+}
+
+interface MemberData {
+  idBoards: string[];
+}
+
+export const importRouter = createTRPCRouter({
+  trello: createTRPCRouter({
+    getBoards: publicProcedure
+      .input(
+        z.object({
+          apiKey: z.string().length(32),
+          token: z.string().length(76),
+        }),
+      )
+      .query(async ({ ctx, input }) => {
+        const userId = ctx.session?.user.id;
+  
+        if (!userId) return;
+
+        console.log({ input })
+
+        const fetchMemberRes = await fetch(`${TRELLO_API_URL}/tokens/${input.token}/member?key=${input.apiKey}`)
+
+        const member = await fetchMemberRes.json() as MemberData;
+
+        const boardIds = member.idBoards;
+
+        const fetchBoard = async (boardId: string) => {
+          try {
+            const response = await fetch(`${TRELLO_API_URL}/boards/${boardId}?key=${input.apiKey}&token=${input.token}`);
+            const data = await response.json() as BoardData;
+        
+            return data;
+          } catch (error) {
+            throw error;
+          }
+        };
+
+        const boards = [];
+
+        for (const boardId of boardIds) {
+          boards.push(Promise.resolve(fetchBoard(boardId)));
+        }
+
+        const boardDataArray = await Promise.all(boards);
+        
+        return boardDataArray.map((board) => ({ id: board.id, name: board.name }));
+      }),
+  })
+});