Exercise - Extend your Coin Exchange with more functionality

bjamRez · October 4, 2021, 1:35am

@Malik Question, what is a "helicopter button?

bjamRez · October 6, 2021, 8:01pm

for anyone else who may encounter the same problem. I could not get the buttons to work from the bonus video - I added an extra btn word to the script to match the current script from bootswatch
so that it reads btn btn-info instead of btn-info
now it’s working

  const buttonClass = "btn" + (props.showBalance ? "btn btn-warning" : "btn btn-info");

bjamRez · October 13, 2021, 4:41pm

@thecil, @Malik , @Lizette
Hello devs, I am trying to add Buy and sell functionality to the exchange app. I created a Modal which pops up when I press the buy and sell button with an input for how many tokens you are to buy or sell but I am having trouble connecting that to the App and of course I still have to add more code to make it work.

I posted a link to my Github and I may not be explaining the problem well enough. I will try to improve my question.

At the bottom of my code I pasted where I think the Modal might have to be imported to be read as one inputs a number…of tokens to purchase. The complete code in in my GitHub

export default function CoinList(props) {
    return (
      <div style={OTHER_CONTENT_STYLES}>
          <Table className="table table-primary table border">
      <thead>
        <tr>
          <th>Name</th>
          <th>Ticker</th>
          <th>Price</th>
          <th>Balance</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
      {
          //distructured version - recommended; more explicit
          props.coinData.map(({key, name, ticker, price, balance}) =>
              <Coin key={key} 
              handleRefresh={props.handleRefresh}
              handleTransaction={props.handleTransaction}
              name={name} 
              ticker={ticker}
              showBalance={props.showBalance}
              balance={balance}
              price={price}
              tickerId={key}
              />
            )
        }
      </tbody>
    </Table>
        <Modal 
        setIsOpen={props.setIsOpen}
        isOpen={props.isOpen}
        />

      </div>
    
    )

https://github.com/brlojam4932/my-App.git

Malik · October 16, 2021, 2:16am

I downloaded your code from Github, and I found out that you are not passing the props to the CoinList component. Please let us know if that’s the case with your latest code as well.

Thanks

bjamRez · October 18, 2021, 2:00am

@Malik hello Malik, thank you for checking out my code to see what is the matter.
I’ve been practicing React on my own, this last week so maybe with this insight I can pin point the solution
Thank you

Kippie · October 19, 2021, 11:56pm

Great learning exercise! Most difficult portion for me was working with widgets, and not realizing that some widgets only want to be utilized once, while others can handle multiple calls.

Here’s my Github Repository: https://github.com/kaphillip/coin-exchange

Here’s my Github Page: https://kaphillip.github.io/coin-exchange/

Hooray BTC ATH!!!

DaveRad · October 20, 2021, 3:45pm

Holy! you have really “upped the game” here.
Nice work! I love the moving tickers

bjamRez · October 22, 2021, 4:29am

@Malik hello Malik so I’ve been trying to work out the buying and selling of tokens. I can’t seem to figure it out.
I am using a modal so that it pops up. I also moved the modal to the top of the App

I click on a buy button, modal appears but the submit only submits once there already is a number there so it’s not refreshing and is not actually submitting correctly.

Basically, I have been trying various sorts of ways to get the modal input to talk to the buy button for over a week now. I did not include everything I’ve tried, it would be too messy.
I’ve also tried other ways but I get NaN

Can you please take a look at my project again on Git-hub and if you can explain how to connect the modal input to the buy and sell buttons.

Thank you - hope it’s not too much trouble

…here is just some of the code at App level. The link to my Git-hub proj is down below

const handleTransaction = (isBuy, valueChangeId) => {
    //alert("handleTransaction clicked", e)
    //let amountInputToFloat = parseFloat(setCoinAmountInput).value; // did not work
    setIsOpen(true);
    let balanceChange = isBuy ? values : values;
   
    const newCoinData = coinData.map(function (values) {
      let newValues = { ...values };
      if (valueChangeId === values.key) {
        // check the coin exists
        newValues.balance += balanceChange;
        setBalance(prevBalance => prevBalance - balanceChange * newValues.price);

      }
      return newValues;

    });
    setCoinData(newCoinData);
  }

<Modal
          name={props.name}
          amount={balance}
          showBalance={showBalance}
          coinData={coinData}
          handleTransaction={handleTransaction}
          handleRefresh={handleRefresh}
          values={values}
          setValues={setValues}
          open={isOpen}
          onClose={() => setIsOpen(false)}>
          {/* children go here */
            <>
              <form onSubmit={() => setIsOpen(false)}>
                <section>
                  <label>Number of tokens</label>
                  <input
                    id='userInput'
                    type="number"
                    required
                    placeholder='Enter Amount'
                    value={values}
                    onChange={(e) => setValues(e.target.value)}
                  />
                </section>
                <button>Submit</button>
                <p > Amount of tokens: {values} </p>

              </form>


            </>
          }
        </Modal>

https://github.com/brlojam4932/my-App

bjamRez · October 25, 2021, 2:50am

@Malik Disregard my inquiry - I had to copy code from other fellow students. I was somehow not realizing I had to pass the props from Coin and Modal components to CoinList component, so that the App component could read it all but the function to take care of the if buy or sell conditions were also tricky for me and just could not really get my head around it all.
I am still working on it so this code has already changed quite a bit

bjamRez · October 25, 2021, 11:28pm

Great work @sbelka1703 - I tried for almost two weeks to use a modal to buy and sell but it got to the point where I just used a a lot of your code to do it. I think I was not importing props to the CoinList and the buy/sell functions…too many parts to handle but great thanks for posting your code, hope is all-right.

sbelka1703 · October 26, 2021, 4:17pm

I am happy to hear that you found my code helpful! The Modal took me couple of weeks to figure out as well, I tried putting the modal in a separate component but the props wouldn’t import either so that is why I have it as is. Good luck with the rest of your journey!

bjamRez · October 26, 2021, 6:33pm

Yes, I also had it at the App level as it is recommended but that was not working…great work and good luck as well!

DaveRad · October 29, 2021, 12:17am

crypto-mart-screenshot
Holy Moly!
I am totally new to coding/developing. I started the academy on Jan 2 2021. I have been worked on it an avg of 8 hours per day.

I finished the first half of my curriculum including html, javascript, c++ and reactjs by June.
I have to say, I was totally lost and my head was spinning.

Regarding this exercise, I had no clue on how I would implement any change. It was all gobbledygook to me.
I thought I better “bone up” on reactjs before going any further, as this would also solidify a grasp in html, javascript and C++ courses that I took as well.

I could not move on until I accomplish this goal…like an obsession

IT TOOK ME 5 MONTHS!

So glad I did it though. Now I can continue my curriculum and “HAVE A CLUE”.

Exercise:

prevent buying and selling of coins when insufficient balances
prevent adding funds and buying and selling of coins when balances are hidden
remove individual refresh price and add refresh all prices
add search filter
add coin images
add mini charts
change the look and style
add ticker widget

This is as good as I can get things for now but, things I would like to improve are as follows:

grabbing all data from top level
refresh the chart data as well
pass props to and from non-related components.
center the orientation of the chart
implement the search from any component

The search filter works fine i.e., the mini charts reload when the search field changes. However, after using the buy, sell and/or price refresh buttons, the charts will not refresh when using the search filter. And, if you try to reload the whole app, none of the data will load unless you close the browser and open it again.

Thus, if you want to test the search filter, I suggest trying it first and then, try the rest of the functionality. However, the rest of the functionality will work even if the charts will not reload.

If anyone could help me out with the above improvements I would be over the moon!

Anyway,
Here is the app: https://cryptonube.github.io/crypto-mart/
And, here is my repository: https://github.com/CryptoNube/crypto-mart

P.S. don’t get too excited, prices in Canadian dollars lol!

bjamRez · November 1, 2021, 2:32am

Congrats! I am working this project right now. I had skipped it and went into Ethereum Solidity programming but eventually, I came back to React and I am hooked. I agree, I think this course can really help you and one can even focus more on the front-end if one likes it.

bjamRez · November 1, 2021, 5:25am

@Malik @zsolt-nagy @thecil

Hello Devs, I have been working on my exchange, I added a Modal, button styling, buy/sell alerts, a bit more info about each coin and I am now trying to add Pagination.

I was wondering if you can take a look at my project. When the data from Coin Paprika is idle, the pagination works but I get no symbol and no prices.

When the data arrives, I get back everything but the pagination does not load the other pages…?
Hope you get a chance to check it out. Thanks.

react_modal
react_popup

Here is where I am stuck…prices and symbols not loading, though pagination works.

react_paggination

https://github.com/brlojam4932/my-App.git

thecil · November 5, 2021, 7:05pm

Hey @bjamRez, hope you are well.

Here
https://github.com/brlojam4932/my-App/blob/master/src/App.js

from code line 57:

    const ticketUrl = 'https://api.coinpaprika.com/v1/tickers/';
    // we get a promise that our data will be sent to us sometime in the future
    const promises = coinIds.map(id => axios.get(ticketUrl + id));

does the axios.get(tickerUrl + id) should be async?
const promises = coinIds.map(id => await axios.get(ticketUrl + id));

Carlos Z

bjamRez · November 5, 2021, 7:57pm

Hey Carlos, the tickerUrl is in the async function

const componentDidMount = async () => {...}

also, I have made some progress and now it can paginate a small amount of pages, like 4 and two or a few more posts and Buy and Sell work again so now I am just trying to find out why it fails when I add more postings.

There are two places where I am slicing the length of the coinData length. I am not sure if this is causing a problem?

line 100

const currentPosts = coinData.slice(indexOfFirstPost, indexOfLastPost);

and line 56

const coinIds = response.data.slice(0, COIN_COUNT).map(coin => coin.id);

thecil · November 5, 2021, 9:13pm

can you console.log the results of it?
console.log("currentPosts ", currentPosts )

same for coinIds, would be good to know what data is contained.

Carlos Z

bjamRez · November 5, 2021, 9:52pm

here are a few snips…
here, I get console.log, it posts 8 coins as totalPosts but the currentPosts is empty
coinExchange_consoleLog

What I do get back is coming from coinData
coinExchange_coinData

Here, visually, I get back 4 pages with two posts/coins each, based on my settings
coinExchange_pages

page 4…
coinExchange_pages4

bjamRez · November 7, 2021, 8:58pm

Hey Carlos, over the weekend, I changed the pagination code. I am receiving the coinData and the paginatedPges data back but only with a small number of total posts since I keep getting a “too many requests” error code from Coin Paprika.
The buy and sell work but balance is not printed unless I click back and forth between pages.
I think I am close…I just need a little bit of help to sort these two issues, if you can. Thank you.

coinExchange_data
Paginated Posts: I am posting only two posts per page to limit errors from Coin Paprika
coinExchange_paginatedPosts