Random Quote - Tweet and Test Suite problems

JavaScript
1

Hi,

I worked my way through React JS Course for Beginners - 2021 Tutorial - YouTube and decided to redo my random quote machine using React JS. My old one had stopped working probably due to the API not being available anymore.

It’s taken a while and it’s a bit hacked together but I’m pretty much done. I’m having two problems as follows.

  1. The Twitter icon disappears when I change the href for the tweet button.

If I set the href to “https://twitter.com/intent/tweet” then it works just fine. If I set the href to “https://twitter.com/intent/tweet?text=testing” then the tweet icon disappears altogether. I’m getting no errors that seem to relate to this. I’ve tried messing with the CSS (I’m using styled components). I can’t figure out why the icon disappears when I try to use anything other than the base URL of “https://twitter.com/intent/tweet”.

  1. The test suite https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js is not loading for me. It doesn’t show up on my local machine with npm start, nor in the build that I’ve deployed to Netlify. I’ve disabled addons and also tried it in Microsoft Edge. I have the script tag to include the test bundle after the closing body tag and before the closing html tag in my index.html.

Is there something else I need to do to get this to work with React and Netlify? I’ve literally just included the CDN on the index.html page and nothing else.

Netlify link: https://pedantic-dijkstra-add5bf.netlify.app/
Github: GitHub - Hallelujah78/random-quote-machine

It is probably something to do with Font Awesome but I have no idea what.

Code for the tweet component:

import React from "react";
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import { faTwitterSquare } from '@fortawesome/free-brands-svg-icons';
import {Wrapper} from './TweetQuote.styles';



const TweetQuote = () =>(
  <Wrapper>
  <a href="https://twitter.com/intent/tweet" id="tweet-quote" className='twitter-share-buttons'>
  <FontAwesomeIcon icon={faTwitterSquare} id="twitter-quote"/></a>
</Wrapper>

);

export default TweetQuote;

The CSS:

import styled from 'styled-components';


export const Wrapper = styled.div`
display: block;
clear: both;

/*This is the <a> tag*/
.twitter-share-button{
  clear: both;
  float: left;

  font-size: 50px;
  margin-left: 0.5rem;
  margin-bottom: 0.5rem;
  transition: 0.4s;
  path{fill: #ffc133;}

}

/*this is the button*/
#twitter-quote{
  clear: both;
  float: left;

  font-size: 50px;
  margin-left: 0.5rem;
  margin-bottom: 0.5rem;
  transition: 0.4s;
  path{fill: #ffc133;}
}

:hover{
  opacity: 0.8;
}
`;

Any hints or solutions appreciated!

2

I’d take a close look at those <scipt> tags.

1 Like
3

Jesus. I obviously haven’t got my IDE configured correctly since I got no warning about that. My bad. Thanks! I got 12/12 passed before it crashes with:

TypeError: Cannot read properties of undefined (reading 'length')
(anonymous function)
C:/Users/Hallelujah/my-app-quote/src/hooks/useQuoteFetch.js:48
  45 |     getQuotes();
  46 |   } else {
  47 | setIsLoadingQuote(false);
> 48 | const quoteIndex = getRandomArbitrary(0, state.quotes.length);
  49 | setState((prev) => ({
  50 |   quote: [state.quotes[quoteIndex].quote],
  51 |   author: [state.quotes[quoteIndex].author],
View compiled
▶ 12 stack frames were collapsed.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.  Click the 'X' or hit ESC to dismiss this message.

I guess that means it’s ready for live! :rofl:

After some sleep the problem of the disappearing Twitter icon just vanished. I tried to revert the script/scipt change and a few other minor edits to see if I could get it to misbehave again but the button refuses to disappear now. Issue completely solved.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.