Merge pull request #11 from andreped/ui-ux-fixes

Improved UI; added support for likes; refactored widgets to be more twitter-like

app.py

@@ -1,10 +1,17 @@
 import streamlit as st
 
 from postly.clients.singleton_client import SingletonPostlyClient
+from postly.common.css import get_theme
 
 # Initialize the PostlyClient singleton
 client = SingletonPostlyClient.get_instance()
 
+# Custom CSS for Twitter-like feel
+st.markdown(
+    get_theme(),
+    unsafe_allow_html=True,
+)
+
 # Initialize user session state
 if "logged_in" not in st.session_state:
     st.session_state.logged_in = False
@@ -14,8 +21,8 @@ if "current_user" not in st.session_state:
 
 def register():
     st.title("Register")
-    user_name = st.text_input("Enter user name")
-    password = st.text_input("Enter password", type="password")
+    user_name = st.text_input("Enter user name", placeholder="Username")
+    password = st.text_input("Enter password", type="password", placeholder="Password")
     if st.button("Register"):
         if user_name and password:
             try:
@@ -32,8 +39,8 @@ def register():
 
 def login():
     st.title("Login")
-    user_name = st.text_input("Enter user name")
-    password = st.text_input("Enter password", type="password")
+    user_name = st.text_input("Enter user name", placeholder="Username")
+    password = st.text_input("Enter password", type="password", placeholder="Password")
     if st.button("Login"):
         if client.authenticate_user(user_name, password):
             st.session_state.logged_in = True
@@ -52,7 +59,7 @@ def logout():
 
 
 def delete_own_user():
-    st.title("Delete Account")
+    st.title("Delete Account ❌")
     if st.button("Delete Account"):
         try:
             client.delete_user(st.session_state.current_user)
@@ -62,19 +69,8 @@ def delete_own_user():
             st.error(f"Error: {e}")
 
 
-def add_post():
-    st.title("Add Post")
-    post_text = st.text_area("Enter post text")
-    if st.button("Add Post"):
-        try:
-            client.add_post(st.session_state.current_user, post_text)
-            st.success("Post added successfully.")
-        except Exception as e:
-            st.error(f"Error: {e}")
-
-
 def get_posts_for_user():
-    st.title("Get Posts for User")
+    st.title("Get Posts for User 🔎")
     users = client.get_users()
     user_name = st.selectbox("Select user name", users)
     if st.button("Get Posts"):
@@ -82,24 +78,24 @@ def get_posts_for_user():
             posts = client.get_posts_for_user(user_name)
             st.write(f"Posts for user '{user_name}':")
             for post in posts:
-                st.write(post)
+                st.markdown(post)
         except KeyError as e:
             st.error(f"Error: {e}")
 
 
 def get_posts_for_topic():
-    st.title("Get Posts for Topic")
+    st.title("Get Posts for Topic 🔎")
     topics = client.get_topics()
     topic = st.selectbox("Enter topic", topics)
     if st.button("Get Posts"):
         posts = client.get_posts_for_topic(topic)
         st.write(f"Posts for topic '{topic}':")
         for post in posts:
-            st.write(post)
+            st.markdown(post)
 
 
 def get_trending_topics():
-    st.title("Get Trending Topics")
+    st.title("Get Trending Topics 📊")
     current_timestamp = client.get_current_timestamp()
     from_timestamp = st.number_input("Enter from timestamp", min_value=0, step=1)
     to_timestamp = st.number_input(
@@ -116,21 +112,51 @@ def get_trending_topics():
 
 
 def get_all_posts():
-    st.title("All Posts")
+    st.title("Feed")
+
+    # Add post section at the top
+    post_text = st.text_area("What's happening? 💬", key="new_post_text")
+    if st.button("Add Post 🖊️"):
+        try:
+            client.add_post(st.session_state.current_user, post_text)
+            st.success("Post added successfully.")
+            st.rerun()
+        except Exception as e:
+            st.error(f"Error: {e}")
+
+    # Display all posts
     posts = client.get_posts()
     all_posts = []
     for user_name, user_posts in posts.items():
         for post in user_posts:
             all_posts.append((user_name, post))
-    sorted_posts = sorted(all_posts, key=lambda x: x[1].timestamp)
+    sorted_posts = sorted(all_posts, key=lambda x: x[1].timestamp)[::-1]
     for user_name, post in sorted_posts:
-        st.markdown(f"**{user_name}**")
-        st.markdown(f"{post.content}")
-        st.markdown("---")
+        liked = st.session_state.current_user in post.liked_by
+        like_button_label = "👍" if not liked else "👎"
+
+        col1, col2 = st.columns([4, 1])
+        with col1:
+            st.markdown(
+                f"""
+                <div class="post-container">
+                    <div class="post-header">{user_name}</div>
+                    <div class="post-content">{post.content}</div>
+                    <div class="post-timestamp">{post.timestamp}</div>
+                    <div class="post-likes">Likes: {post.likes}</div>
+                </div>
+                """,
+                unsafe_allow_html=True,
+            )
+        with col2:
+            if st.button(like_button_label, key=f"like_{post.timestamp}"):
+                client.like_post(st.session_state.current_user, post.timestamp)
+                st.rerun()
 
 
 def main():
-    st.sidebar.title("Postly\nSimple social media platform")
+    st.sidebar.title("Postly 📝\nSimple social media platform")
+
     if st.session_state.logged_in:
         st.sidebar.write(f"Logged in as: {st.session_state.current_user}")
         if st.sidebar.button("Logout"):
@@ -138,18 +164,17 @@ def main():
         page = st.sidebar.selectbox(
             "Choose an action",
             [
-                "Add Post",
+                "View All Posts",
                 "Delete Account",
                 "Get Posts for User",
                 "Get Posts for Topic",
                 "Get Trending Topics",
-                "View All Posts",
             ],
-            index=5,
+            index=0,
         )
 
-        if page == "Add Post":
-            add_post()
+        if page == "View All Posts":
+            get_all_posts()
         elif page == "Delete Account":
             delete_own_user()
         elif page == "Get Posts for User":
@@ -158,14 +183,27 @@ def main():
             get_posts_for_topic()
         elif page == "Get Trending Topics":
             get_trending_topics()
-        elif page == "View All Posts":
-            get_all_posts()
     else:
-        page = st.sidebar.selectbox("Choose an action", ["Login", "Register"], index=0)
-        if page == "Login":
-            login()
-        elif page == "Register":
+        page = st.sidebar.selectbox("Choose an action", ["Register", "Login"], index=0)
+        if page == "Register":
             register()
+        elif page == "Login":
+            login()
+
+    st.sidebar.markdown(
+        """
+        **About Postly**
+
+        Welcome to Postly, a simple social media platform created for fun.
+        This app allows different users to share posts and like each other's posts.
+
+        **Important Information**
+
+        - The entire app is kept in global memory for all users accessing the app on the same instance.
+        - Do not use a username and password actually used with any other apps.
+        - We hash the password, but no real attempt to make a bulletproof solution was made.
+        """
+    )
 
 
 if __name__ == "__main__":

postly/clients/postly_client.py

@@ -214,3 +214,36 @@ class PostlyClient:
 
         # retrieve top topics in descending order
         return [topic for topic, _ in topics_frequency.most_common()]
+
+    def like_post(self, user_name: str, post_id: int) -> None:
+        """
+        Like or unlike a post.
+
+        Args:
+            user_name: The name of the user liking the post.
+            post_id: The ID of the post to like or unlike.
+        Returns:
+            None
+        """
+        post = self.get_post_by_id(post_id)
+        if user_name in post.liked_by:
+            post.liked_by.remove(user_name)
+            post.likes -= 1
+        else:
+            post.liked_by.add(user_name)
+            post.likes += 1
+
+    def get_post_by_id(self, post_id: int) -> Post:
+        """
+        Get a post by its ID.
+
+        Args:
+            post_id: The ID of the post to retrieve.
+        Returns:
+            The post with the given ID.
+        """
+        for user_posts in self.userPosts.values():
+            for post in user_posts:
+                if post.timestamp == post_id:
+                    return post
+        raise KeyError("Post not found")

postly/common/css.py

@@ -0,0 +1,52 @@
+def get_theme():
+    return """
+    <style>
+    body {
+        background-color: #ffffff;
+        color: #1DA1F2;
+    }
+    .stButton>button {
+        background-color: #1DA1F2;
+        color: white;
+    }
+    .stTextInput>div>div>input {
+        border: 1px solid #1DA1F2;
+    }
+    .stTextArea>div>div>textarea {
+        border: 1px solid #1DA1F2;
+    }
+    .stSelectbox>div>div>div>div {
+        border: 1px solid #1DA1F2;
+    }
+    .post-container {
+        border: 1px solid #1DA1F2;
+        border-radius: 10px;
+        padding: 10px;
+        margin-bottom: 10px;
+        background-color: #f5f8fa;
+        min-height: 100px; /* Adjust this value as needed */
+        position: relative; /* Ensure absolute positioning works within this container */
+    }
+    .post-header {
+        font-weight: bold;
+        color: #1DA1F2;
+    }
+    .post-content {
+        color: #14171A;
+    }
+    .post-likes {
+        color: #657786;
+        font-size: 14px;
+        position: absolute;
+        bottom: 10px;
+        right: 10px;
+    }
+    .like-button {
+        background-color: transparent;
+        border: none;
+        color: #1DA1F2;
+        cursor: pointer;
+        font-size: 20px;
+    }
+    </style>
+    """

postly/common/models.py

@@ -1,5 +1,7 @@
 from dataclasses import dataclass
+from dataclasses import field
 from typing import List
+from typing import Set
 
 from pydantic import BaseModel
 
@@ -8,6 +10,8 @@ class StrictPost(BaseModel):
     content: str
     timestamp: int
     topics: List[str]
+    likes: int = 0
+    liked_by: Set[str] = set()
 
 
 @dataclass
@@ -15,11 +19,25 @@ class Post:
     content: str
     timestamp: int
     topics: List[str]
+    likes: int = 0
+    liked_by: Set[str] = field(default_factory=set)
 
 
 if __name__ == "__main__":
     # this should be OK, as not strictly typed
-    Post(content=1, timestamp=1, topics=["1"])
+    post = Post(content="1", timestamp=1, topics=["1"])
+    post.likes += 1
+    post.liked_by.add("user1")
+    print(post)
 
     # this should result in a validation error, as pydantic enforces strict typing on runtime
-    StrictPost(content=1, timestamp=1, topics=["1"])
+    try:
+        strict_post = StrictPost(content=1, timestamp=1, topics=["1"])
+    except Exception as e:
+        print(f"Validation error: {e}")
+
+    # this should be OK, as strictly typed
+    strict_post = StrictPost(content="1", timestamp=1, topics=["1"])
+    strict_post.likes += 1
+    strict_post.liked_by.add("user1")
+    print(strict_post)