add: box render

amirhnajafiz-presentations · Dec 8, 2022 · 32e3a33 · 32e3a33
1 parent a737783
commit 32e3a33
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 4 deletions.
diff --git a/application/src/components/Box/index.css b/application/src/components/Box/index.css
@@ -5,4 +5,54 @@
     border-top: 2px solid #e8e8e8;
 
     overflow: scroll;
+}
+
+.row {
+    width: 50%;
+
+    margin: 0 auto 40px;
+    padding: 20px 40px 20px;
+
+    border: 1px solid #e8e8e8;
+    border-radius: 4px;
+}
+
+.row-des {
+    font-size: 0.9rem;
+    margin-top: 40px;
+    padding: 20px 5px;
+}
+
+.list {
+    list-style-type: none;
+    margin-top: 50px;
+
+    padding-bottom: 30px;
+    border-bottom: 1px solid #000000;
+}
+
+.list-item {
+    font-size: 0.6em;
+
+    display: inline-block;
+    margin-right: 5px;
+
+    padding: 5px 10px;
+
+    background: #47caff;
+    color: #ffffff;
+
+    border-radius: 15px;
+}
+
+.row-opt {
+    display: flex;
+    justify-content: space-around;
+
+    margin-top: 20px;
+}
+
+.row-link {
+    outline: none;
+    color: inherit;
 }
diff --git a/application/src/components/Box/index.js b/application/src/components/Box/index.js
@@ -4,11 +4,58 @@ import './index.css';
 
 class Box extends React.Component {
     render() {
+        function sortFunc(a, b) {
+            return b.stargazers_count - a.stargazers_count
+        }
+
+        let array = [];
+        Object.keys(this.props.userInformation).forEach((key) => {
+            array.push(this.props.userInformation[key])
+        })
+
+        array.sort(sortFunc)
+
         return(
             <div className={"response"}>
-                  <pre>
-                      { this.props.userInformation }
-                  </pre>
+                  {
+                      array.map((repo) => (
+                          <div className={"row"}>
+                              <h3>
+                                  {repo.full_name}
+                              </h3>
+                              <p className={"row-des"}>
+                                  {repo.description}
+                              </p>
+                              <ul className={"list"}>
+                                  {
+                                      repo.topics.map((topic) => (
+                                          <li className={"list-item"}>
+                                              {topic}
+                                          </li>
+                                      ))
+                                  }
+                              </ul>
+                              <div className={"row-opt"}>
+                                  <small>
+                                      {repo.language}
+                                  </small>
+                                  <small>
+                                      Stars: {repo.stargazers_count}
+                                  </small>
+                                  <small>
+                                      <a
+                                          className={"row-link"}
+                                          href={repo.html_url}
+                                          target={"_blank"}
+                                          rel={"noreferrer"}
+                                      >
+                                        Repo link
+                                      </a>
+                                  </small>
+                              </div>
+                          </div>
+                      ))
+                  }
             </div>
         )
     }

diff --git a/application/src/containers/App/index.js b/application/src/containers/App/index.js
@@ -65,7 +65,7 @@ class App extends React.Component {
                     return;
                 }
 
-                let viewData = JSON.stringify(JSON.parse(data.value), null, 4);
+                let viewData = JSON.parse(data.value);
 
                 this.updateResponse("OK");
                 this.updateUserInformation(viewData);