From 9e7701af2dfe001b92b7fee248f4c46acb42c8f5 Mon Sep 17 00:00:00 2001
From: _uchanlee <uchanlee.dev@gmail.com>
Date: Wed, 7 Apr 2021 13:24:52 +0900
Subject: [PATCH] =?UTF-8?q?v1.1.0=20=EA=B9=83=ED=97=88=EB=B8=8C=20?=
 =?UTF-8?q?=EB=A0=88=ED=8F=AC=20=EC=A3=BC=EC=86=8C=EB=A1=9C=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1=ED=95=98=EA=B8=B0=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json    |  2 +-
 src/Editor.tsx  | 45 +++++++++++++++++++++++++++++++++++++++++++++
 src/editor.scss | 11 +++++++++++
 3 files changed, 57 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d7c1617..283ca60 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   "dependencies": {
     "@types/clipboard": "^2.0.1",
     "@types/node": "^12.0.0",
-    "@types/react": "16",
+    "@types/react": "17",
     "@types/react-dom": "^17.0.0",
     "clipboard": "^2.0.8",
     "node-sass": "^5.0.0",
diff --git a/src/Editor.tsx b/src/Editor.tsx
index 2e1ac6f..b9819e7 100644
--- a/src/Editor.tsx
+++ b/src/Editor.tsx
@@ -190,10 +190,55 @@ export function Editor() {
 
   const [copyClicked, setCopyClicked] = useState(false);
 
+  const [githubRepositoryUrl, setGithubRepositoryUrl] = useState<string>('');
+
+  function onSubmit(e: React.MouseEvent<HTMLInputElement, MouseEvent> | React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    fetch(`https://api.github.com/repos/${githubRepositoryUrl}/git/trees/${branch}?recursive=1`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+      .then((res) => res.json())
+      .then((response) => {
+        setTreeContents(
+          response.tree.map((content: any, index: number) => {
+            const depth = content.path.split('/');
+            const textIndex = depth.length;
+            return {
+              id: index + 1,
+              depth: textIndex,
+              text: depth[textIndex - 1],
+              depthIndicator: '',
+            };
+          })
+        );
+        setRootText(githubRepositoryUrl.split('/')[1]);
+        console.log('Success:', JSON.stringify(response));
+      })
+      .catch((error) => {
+        console.error('Error:', error);
+        alert('깃허브로 부터 정보를 불러오는데 실패하였습니다.');
+      });
+  }
+
+  const [branch, setBranch] = useState<string>('main');
+
   return (
     <section>
       <div>
         <h2>Project Tree</h2>
+        <form className='github-repository-wrapper' onSubmit={onSubmit}>
+          <input
+            type='text'
+            value={githubRepositoryUrl}
+            placeholder='Generate by github repository url(e.g., woochanleee/project-tree-generator)'
+            onChange={(e) => setGithubRepositoryUrl(e.target.value)}
+          />
+          <input type='text' value={branch} onChange={(e) => setBranch(e.target.value)} placeholder='branch name' />
+          <input type='submit' onClick={onSubmit} />
+        </form>
         <div className='editor'>
           <button
             className={`copy-button ${copyClicked ? 'success' : ''}`}
diff --git a/src/editor.scss b/src/editor.scss
index 9912217..660fb1b 100644
--- a/src/editor.scss
+++ b/src/editor.scss
@@ -3,6 +3,17 @@ section {
   justify-content: center;
 
   > div {
+    > .github-repository-wrapper {
+      display: flex;
+      > input:first-child {
+        flex-basis: 0;
+        flex-grow: 1;
+      }
+      > input:nth-child(2) {
+        width: 100px;
+      }
+    }
+
     > .editor {
       overflow: scroll;
       position: relative;