Create a new astro.js chat component for website

[ageddesi]

On the main website I will want to show our api in action. so I want to create a chatbox with a feed,
On the left of the chatbox you can select the amount of users and messages you receive and by changing them will update the chatbox.

The main site is not in this repo but if you are able to make an astro component using tailwind css :) I can port it in no problem 👍

[computamike]

I haven't seen astro.js - so I'll take a look at seeing if I can knock something up -

[ageddesi]

Hi @computamike Astro.js is the framework I use for the frontend site. The frontend site is not part of this repo however, I am looking at adding a folder that is for making content that will appear on the site. :)

[cweave]

I started hacking something together just to check out astro.js. I can probably get something out by this weekend, if you aren't actively working already @computamike

[computamike]

I started hacking something together just to check out astro.js. I can probably get something out by this weekend, if you aren't actively working already @computamike

Thats fine.. I had a bit of a play with astro but hadn't managed to get anything working so far..

[cweave]

@ageddesi Sorry it took me a bit longer. Here's a repo and a live preview. I figured I'd at least have you get a look at it before I go down the rabbit hole more. The inputs don't update the numbers for the endpoint yet. I was having a hard time figuring out child => parent state/prop management in Astro and didn't wanna burn too much more time with it if you perhaps already knew the answer.

I'm using the chat/random endpoint since it returns both users and messages, and then using the data to filter messages based on the users. Kind of wanted to get the basic mechanics laid out, then go through and play with layout if need be.

The server constantly 502's on me. I even tried switching to axios instead of fetch just for a safer option, but was still having the same result.

[ageddesi]

Hi @cweave i will take a look at this first thing tomorrow. I have been getting the host to look into the to the error. I think our hosting needs upgrading to be honest.

The example looks great. Will look more later. Appreciate the hard work.

[ageddesi]

Hi @cweave for this task, its best to keep everything in one Astro file so its easy for me to import and use :) This also means you can control the whole form and input in the same js code block.

[cweave]

@ageddesi oh sweet! I'll refactor that badboy today/tomorrow 😎

[cweave]

@ageddesi is Astro the best thing to use? It seems to only make data request calls when the application is built: data fetching

I'm having a hell of a time trying to figure out how to get the Astro script (aka sever script) to rerun if the variables are updated from the form.

[ageddesi]

If you make your component This will make the code inside the component run on render locally and not online.

also you can make your <script is:inline> as well :)

The Astro docs really document this well. However if it becomes to much of an issue. I have can instal handlers so the component can be a vue component instead of an astro component if that helps.

[cweave]

Yeah I tried doing script is:inline and made some progress. It's a tricky bugger. I did update the repo I posted if you are able to take a quick peak.

It's almost there, just need to get the value update and cause a refetch to happen. Just missing that final piece.

[ageddesi]

Hi @cweave just pining to see if this is still something being worked on?

[cweave]

@ageddesi oh gee yeah sorry! Holidays and traveling happened and it slipped through the cracks! I think I was having some issue getting to endpoint to refetch after the values get updated after submitting new values. Wasn't sure if you had a chance to look at what I had in my repo.

I think it may be a limitation of Astro, but you mentioned switching it over to Vue perhaps, and I can look into doing that instead.

[cweave]

Just updating again: just getting over COVID and about to travel again 🙃 I'll be back after Christmas and will have some time off work to spend looking at this. Just wanted to let you know I didn't abandon it!