Day 089 - Project 89 : Community Chat App

If you have any questions, comments or issues with this project please post them here!

1 Like

i’m curious if anybody solved the challenge in a way that includes showing the profile pictures of posters next to their messages? while the challenge description says to show each user’s profile image, it’s missing in the example screenshot, so i didn’t do it either. it’s not in the solution either.

David shows you how to do it, IIRC it’s in the solution video.

Anyway the header for this is X-Replit-User-Profile-Image as said in the Replit docs.

Hi All

As part of the challenge for Day89 of #replit100daysofcode, I have made a basic chatroom where people can post their comments by logging in with their Replit profiles!

The comments are posted along with your Replit profile image and the time at which you have commented! Only the recent/latest 5 comments will be displayed at any given time!

Please check it out, post your comments and let me know if you have suggestions, as it will help me in validating the code for this project! Here is the link for the repl: https://replit.com/@SixftOne-MLH/Replit-Chatroom-Day89100DaysofCode?v=1

@ortelOJL check out my solution! Profile images are displayed right next to the username!

1 Like

i tried your solution, viewing works, but when i press send i get a “405 method not allowed” error. apparently the logged in page for non-admins has a different method for the button than the admin page.

apart from that, it seems to show the profile pic nicely! i didn’t know you could save images to replit db, that’s neat.

1 Like

Thanks for pointing that out! I have fixed the issue!. Please feel free to try again!

1 Like

yes, i can post messages now!

1 Like

nice job on this one… however, when david explained the picture option, it didn’t work for me for some reason… it was showing a block but without the pic itself… as if it’s pulling the image from files and it was missing…

Can you send a link to your Repl?

You can store the user’s display picture in replit db along with the other comment details that you are storing for each comment. Then you can easily extract it later on wherever you want to.

in this one I tried and got it working for when I’m logged in… when I open it from incognito tab it doesn’t show the pic
https://replit.com/@Thrsh001/88100-auth-login#main.py

I would like to get a hint about the deleting button. Please, not the solution. Just a hint. Quite stuck on it.
Thanks.

2 Likes

Here’s my project, it has the posts, a profile picture, and an admin delete button:

https://replit.com/@BrynParry/Day-89-100-Days?v=1

2 Likes

I did it by adding this to the html. I’m sure there are ways to make it look nicer though.

<form method="post" action="/deletePost">
<button type="submit" name = "postID" value = {postID}>X</button>
2 Likes

Bro, impossible (for me) to guess how to make work the deleting button. I had to watch the solution.

In case anyone else is stuck in here like me, here’s my hint:
forget about the Post methods… :wink:

cheers

pd. check the example above of @BrynParry if you want to see how to solve the deleting button using post method.

Anyways, I leave here a simplified example of the issue:
https://replit.com/@python-padawan/get-the-value-requesting-the-name-with-post-method#

if you press the button and check the console you will see that the “value” of the button is printed on it.

I hope this is useful for you as a hint to keep going!

1 Like

it’s taken me few hours to understand how you made the delete button work with the post method.
However, If im not wrong, here in the 100 days challenge it is not explained that you can’t get the tag “value” from a button requesting the “name” of it with post methods.

Cheers

1 Like

Now… time to devour day 90… :brain:

1 Like

I’ve been trying to debug the below but the posts won’t load and replace content from my html file… not sure what’s wrong, but I know it’s in main.py… anyone spot anything? Thanks in advance.

Here’s the repl: https://replit.com/@otto18/Day89100Days#main.py

from flask import Flask, redirect, request
from replit import db

app = Flask(__name__, static_url_path="/static")
 
def getPosts(): 
  entry = ""
  f = open("entry.html", "r")
  entry = f.read()
  f.close()
  keys = db.keys()
  keys = list(keys)
  content = ""
  for key in reversed(keys):
    thisEntry = entry 
    thisEntry = thisEntry.replace("{title}", request.headers["X-Replit-User-Name"])
    thisEntry = thisEntry.replace("{date}", db['date'])
    thisEntry = thisEntry.replace("{post}", db['date']['post'])
    content += thisEntry
  return content

@app.route('/')
def login():
  if request.headers["X-Replit-User-Name"]:
    return redirect("/chat")
  page=""
  f=open("login.html", "r")
  page=f.read()
  f.close()
  return page

@app.route('/chat')
def chat():
  if not request.headers["X-Replit-User-Name"]:
    return redirect("/")
  page=""
  f=open("post.html", "r")
  page+=f.read()
  if len(db.keys()) < 1:
    page = page.replace("{content}","No posts yet. Start the conversation!")
  f.close()
  return page

@app.route('/chat', methods=["POST"])
def post():
  if not request.headers["X-Replit-User-Name"]:
    return redirect("/")
  form = request.form 
  db[form['date']] = {"post":form['post']}
  page=""
  f = open("post.html", "r")
  page = f.read()
  if len(db.keys()) < 1:
    page = page.replace("{content}","No posts yet. Start the conversation!")
  page = page.replace("{content}",getPosts())
  f.close()
  return page

app.run(host='0.0.0.0', port=81)


In the solution video

David uses for key in reversed(keys) to display the chat posts in order from most recent to oldest, (from top to bottom)

For me this has the opposite effect.
This image shows how not reversing it gives the desired order.

This image shows that reversing it has the opposite effect.