Add Feeds needs to be now to be connected front end to back end

[c3ho]

Issue This PR Addresses

Fixes #745

Type of Change

• Bugfix: Change which fixes an issue
• New Feature: Change which adds functionality
• Documentation Update: Change which improves documentation
• UI: Change which improves UI

Description

Connected this to the back end, I had to repurpose the + button to add feeds for now! Sorry @Silvyre.

Easiest way to test this is to just change the index.js under pages to display myfeeds component. To add a feed use the + button after inputting name and feed info, make sure devTools is opened prior to clicking the button so you can evaluate the response from the server. A 409 error means your feed already exists, to get around it just modify some of the characters for the blog url.

Checklist

• Quality: This PR builds and passes our npm test and works locally
• Tests: This PR includes thorough tests or an explanation of why it does not
• Screenshots: This PR includes screenshots or GIFs of the changes made or an explanation of why it does not (if applicable)
• Documentation: This PR includes updated/added documentation to user exposed functionality or configuration variables are added/changed or an explanation of why it does not(if applicable)

[Silvyre]

Thank you so much for your work on this! A few comments:

[Silvyre]

I'm having some trouble testing the POSTing functionality to due technical shortcomings (VM struggles to run a Gatsby development build plus Docker, etc).

While I struggle with getting Docker Toolbox running, hopefully some other reviewers can cover for me, here.

[Silvyre]

Alright, managed to configure my new environment. I finally was able to use this component to successfully POST a feed (RSS feed for Mozilla's blog), but attempting to handle that feed ended up causing my backend to crash:

Any ideas, @c3ho?

[c3ho]

@Silvyre I just checked the dev tools thing, apparently using process.env.telescopeURL appends a weird /undefined in between the telescopeURL and /feeds route. So on my machine it became http://localhost:3000/undefined/feeds. Can you try hardcoding the url for the fetch and let me know if it still crashes?

I hard coded the url and re-tested, it was displaying the proper output without crashing whatsoever.

Also I don't know why but the front-end portion is unable to find process.env.API_URL

[Silvyre]

Here, telescopeUrl should be replaced with API_URL and provided with a default value.

For example, borrowing code from gatsby-config.js:

try {
  const telescopeUrl = process.env.API_URL || `http://localhost:${process.env.PORT || 3000}`;
  const response = await fetch(`${telescopeUrl}/feeds/`, {

[Grommers00]

Agreed ^

[Silvyre]

Now that I have a working environment, I can confirm that this feature does indeed work as intended!

I was able to add the aforementioned Mozilla feed and verify its addition by checking the /opml route:

<outline text="60407f78e2" title="Mozilla&apos;s blog" type="rss" xmlUrl="https://blog.mozilla.org/rss" htmlUrl="https://blog.mozilla.org"/>

Great work!

[Silvyre]

Just make that change, and it's an approve from me: #748 (comment)

[Grommers00]

I got it working - but agreed with @Silvyre changes.

[Silvyre]

Fantastic work! 👍 👍

[cindyorangis]

How do I go about testing this?

[Silvyre]

How do I go about testing this?

Here's how I tested:

1. Run the backend and frontend locally
2. Navigate to the /myfeeds page, i.e. localhost:8000/myfeeds
3. Enter a blog feed author and URL into the supplied text fields (e.g. Mozilla, https://blog.mozilla.org/rss)
4. Press the '+' button to add the feed to Telescope
5. After waiting a minute or so, observe the feed's presence within a response served by any of our backend /feed/* routes designed for Telescope feed sharing, e.g. localhost:3000/feed/opml

[cindyorangis]

Wow this is neat! I added a feed for Cindy Cash for testing, how do I remove it? XD

[c3ho]

We don't have a way to do that yet haha

[Silvyre]

Wow this is neat! I added a feed for Cindy Cash for testing, how do I remove it? XD

Provided you're running your own instance of Redis, your feed will disappear when you kill that instance. :)

As @c3ho mentioned, we'll want to add functionality to the My Feeds page to remove added feeds in the future.

[cindyorangis]

Not sure if this is a bug but I have two different localhost:8000/myfeeds and localhost:3000/myfeeds looks different.

I ran docker-compose up --build
then in another terminal npm run develop and went to both URLs

[Silvyre]

Not sure if this is a bug but I have two different localhost:8000/myfeeds and localhost:3000/myfeeds looks different.

Yeah, this is already causing problems.

changeed

[c3ho]

Merging as this was a rebase