From 97375bb77272cbf414711b1c9762e3d155a01c01 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Tue, 18 May 2021 19:15:53 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20tweet=20listing=20box?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../base/summary/SummaryLeft.module.css       |  1 +
 .../components/base/summary/SummaryText.js    |  4 ++-
 .../base/summary/SummaryText.module.css       | 22 +++++++++++++
 .../interactive/BoxRepositoryTweets.js        | 14 ++++++++
 .../interactive/SummaryRepository.js          |  2 +-
 .../components/interactive/SummaryTweet.js    | 32 +++++++++++++++++++
 .../components/interactive/SummaryUser.js     |  2 +-
 nest_frontend/index.css                       |  4 +++
 nest_frontend/routes/PageRepository.js        | 16 ++++++++--
 .../routes/PageRepository.module.css          |  5 ++-
 10 files changed, 96 insertions(+), 6 deletions(-)
 create mode 100644 nest_frontend/components/base/summary/SummaryText.module.css
 create mode 100644 nest_frontend/components/interactive/BoxRepositoryTweets.js
 create mode 100644 nest_frontend/components/interactive/SummaryTweet.js

diff --git a/nest_frontend/components/base/summary/SummaryLeft.module.css b/nest_frontend/components/base/summary/SummaryLeft.module.css
index 2cf21a4..e4491f9 100644
--- a/nest_frontend/components/base/summary/SummaryLeft.module.css
+++ b/nest_frontend/components/base/summary/SummaryLeft.module.css
@@ -1,4 +1,5 @@
 .SummaryLeft {
+    min-width: 175px;
     width: 275px;
 
     display: grid;
diff --git a/nest_frontend/components/base/summary/SummaryText.js b/nest_frontend/components/base/summary/SummaryText.js
index 9086edf..d01ba11 100644
--- a/nest_frontend/components/base/summary/SummaryText.js
+++ b/nest_frontend/components/base/summary/SummaryText.js
@@ -6,7 +6,9 @@ import classNames from "classnames"
 export default function SummaryText({ children, className, ...props }) {
     return (
         <div className={classNames(Style.SummaryText, className)} {...props}>
-            {children}
+            <div className={Style.Text}>
+                {children}
+            </div>
         </div>
     )
 }
diff --git a/nest_frontend/components/base/summary/SummaryText.module.css b/nest_frontend/components/base/summary/SummaryText.module.css
new file mode 100644
index 0000000..7013698
--- /dev/null
+++ b/nest_frontend/components/base/summary/SummaryText.module.css
@@ -0,0 +1,22 @@
+.SummaryText {
+    flex-grow: 3;
+
+    padding: 0 0 0 20px;
+
+    background-color: var(--bg-light);
+
+    display: flex;
+    justify-content: stretch;
+    align-items: center;
+
+    font-size: small;
+}
+
+.Text {
+    height: 60px;
+    overflow-y: auto;
+
+    /* Custom scrollbar (firefox only!) */
+    scrollbar-color: var(--bg-accent) var(--bg-light);
+    scrollbar-width: auto;
+}
\ No newline at end of file
diff --git a/nest_frontend/components/interactive/BoxRepositoryTweets.js b/nest_frontend/components/interactive/BoxRepositoryTweets.js
new file mode 100644
index 0000000..3ca1e7a
--- /dev/null
+++ b/nest_frontend/components/interactive/BoxRepositoryTweets.js
@@ -0,0 +1,14 @@
+import React from "react"
+import BoxFullScrollable from "../base/BoxFullScrollable"
+import SummaryTweet from "./SummaryTweet"
+
+
+export default function BoxRepositoryTweets({ tweets, ...props }) {
+    // TODO: Translate this
+
+    return (
+        <BoxFullScrollable header={"Tweets"} {...props}>
+            {tweets.map(tweet => <SummaryTweet tweet={tweet}/>)}
+        </BoxFullScrollable>
+    )
+}
diff --git a/nest_frontend/components/interactive/SummaryRepository.js b/nest_frontend/components/interactive/SummaryRepository.js
index 46a9543..0d7bb5e 100644
--- a/nest_frontend/components/interactive/SummaryRepository.js
+++ b/nest_frontend/components/interactive/SummaryRepository.js
@@ -40,7 +40,7 @@ export default function SummaryRepository(
     }
 
     return (
-        <SummaryBase>
+        <SummaryBase {...props}>
             <SummaryLeft
                 icon={repo.is_active ? faFolderOpen : faFolder}
                 title={repo.name}
diff --git a/nest_frontend/components/interactive/SummaryTweet.js b/nest_frontend/components/interactive/SummaryTweet.js
new file mode 100644
index 0000000..5f64122
--- /dev/null
+++ b/nest_frontend/components/interactive/SummaryTweet.js
@@ -0,0 +1,32 @@
+import React from "react"
+import SummaryBase from "../base/summary/SummaryBase"
+import SummaryLeft from "../base/summary/SummaryLeft"
+import { faComment, faMapPin } from "@fortawesome/free-solid-svg-icons"
+import SummaryText from "../base/summary/SummaryText"
+import SummaryRight from "../base/summary/SummaryRight"
+
+
+export default function SummaryTweet({ tweet, ...props }) {
+    let icon
+    if(tweet.place) {
+        icon = faMapPin
+    }
+    else {
+        icon = faComment
+    }
+
+    return (
+        <SummaryBase {...props}>
+            <SummaryLeft
+                icon={icon}
+                title={`@${tweet.poster}`}
+                subtitle={tweet.place}
+                onClick={() => window.open(`https://twitter.com/${tweet.poster}/status/${tweet.snowflake}`)}
+            />
+            <SummaryText>
+                {tweet.content}
+            </SummaryText>
+            <SummaryRight/>
+        </SummaryBase>
+    )
+}
diff --git a/nest_frontend/components/interactive/SummaryUser.js b/nest_frontend/components/interactive/SummaryUser.js
index d158ddf..98e34cb 100644
--- a/nest_frontend/components/interactive/SummaryUser.js
+++ b/nest_frontend/components/interactive/SummaryUser.js
@@ -12,7 +12,7 @@ export default function SummaryUser({ user, destroyUser, running, ...props }) {
     const { strings } = useContext(ContextLanguage)
 
     return (
-        <SummaryBase>
+        <SummaryBase {...props}>
             <SummaryLeft
                 icon={user.isAdmin ? faStar : faUser}
                 title={user.username}
diff --git a/nest_frontend/index.css b/nest_frontend/index.css
index 99c0f40..840c96b 100644
--- a/nest_frontend/index.css
+++ b/nest_frontend/index.css
@@ -28,6 +28,10 @@ h1, h2, h3, h4, h5, h6 {
     cursor: not-allowed;
 }
 
+a {
+    color: var(--fg-primary)
+}
+
 .ThemeDark {
     --bg-primary: #3B7097;
     --fg-primary: #FFFFFF;
diff --git a/nest_frontend/routes/PageRepository.js b/nest_frontend/routes/PageRepository.js
index a73158b..f48501d 100644
--- a/nest_frontend/routes/PageRepository.js
+++ b/nest_frontend/routes/PageRepository.js
@@ -1,13 +1,25 @@
 import React from "react"
 import Style from "./PageRepository.module.css"
 import classNames from "classnames"
-import BoxWordcloud from "../components/interactive/BoxWordcloud"
+import BoxRepositoryTweets from "../components/interactive/BoxRepositoryTweets"
 
 
 export default function PageRepository({ className, ...props }) {
     return (
         <div className={classNames(Style.PageRepository, className)} {...props}>
-            <BoxWordcloud className={Style.Wordcloud}/>
+            <BoxRepositoryTweets
+                tweets={[
+                    {
+                        "conditions": [],
+                        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere lacinia eleifend. Maecenas a neque augue. Nulla dapibus lobortis gravida. Quisque quis ultricies elit. Donec in tortor augue. Cras eget aliquam felis. Nunc tempor, ipsum in lobortis tristique, nunc ante velit.",
+                        "insert_time": "2021-05-18T18:56Z",
+                        "location": null,
+                        "place": "Casa mia",
+                        "poster": "USteffo",
+                        "snowflake": "1394698342282809344",
+                    },
+                ]}
+            />
         </div>
     )
 }
diff --git a/nest_frontend/routes/PageRepository.module.css b/nest_frontend/routes/PageRepository.module.css
index 7203ab8..1ca5e2d 100644
--- a/nest_frontend/routes/PageRepository.module.css
+++ b/nest_frontend/routes/PageRepository.module.css
@@ -1,7 +1,10 @@
 .PageRepository {
     display: grid;
 
-    grid-template-areas: "a";
+    grid-template-areas:
+            "a b"
+            "c d"
+    ;
 
     grid-gap: 10px;