Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Comments: Display a Note #53

Closed
jayair opened this issue Apr 10, 2017 · 15 comments

Comments

Projects
None yet
5 participants
@jayair
Copy link
Member

commented Apr 10, 2017

@jayair jayair added the Discussion label Apr 10, 2017

@AndrewWrightNZ

This comment has been minimized.

Copy link

commented Sep 12, 2017

Hey I can view all notes in the list view on Home.js but when I click on a note I get the error:

TypeError: Failed to fetch

{message: "Missing Authentication Token"}
message
:
"Missing Authentication Token"

Any ideas?

@jayair

This comment has been minimized.

Copy link
Member Author

commented Sep 12, 2017

@AndrewWrightNZ That's weird that it's looking for the token. Can I just do a sanity check and look at your serverless.yml for the backend?

@AndrewWrightNZ

This comment has been minimized.

@jayair

This comment has been minimized.

Copy link
Member Author

commented Sep 13, 2017

@AndrewWrightNZ Yeah that looks okay.

In a previous version of the tutorial we were sending the userToken in each of the invokeApig calls. Can I see your Home.js?

@AndrewWrightNZ

This comment has been minimized.

Copy link

commented Sep 14, 2017

Yeah - https://github.com/AndrewWrightNZ/notes-app-client/blob/master/src/containers/Home.js

From a quick google search it may be AWS config related?

@jayair

This comment has been minimized.

Copy link
Member Author

commented Sep 14, 2017

@AndrewWrightNZ Not sure if this is the right version but I tried your repo and the invokeApig call in Home.js is making a request to the wrong API endpoint? And there is no Notes.js? If you push the updated version I'll take a look.

@AndrewWrightNZ

This comment has been minimized.

Copy link

commented Sep 15, 2017

@jayair awesome, just reviewed all of the routes and its working 💯

@tommedema

This comment has been minimized.

Copy link

commented Oct 20, 2017

Is there any reason why some async functions are not defined as async. Is this deliberate?

I.e.

getNote() {
    return invokeApig({ path: `/notes/${this.props.match.params.id}` });
}

instead of

async getNote() {
    return await invokeApig({ path: `/notes/${this.props.match.params.id}` });
}
@jayair

This comment has been minimized.

Copy link
Member Author

commented Oct 20, 2017

@tommedema Not all functions that return Promises need to be marked as async. The better way to think about this is; mark a function as async if you need to use await, as that is the purpose of the async keyword.

There are other advantages to doing things this way, especially if you intend to act on those promises differently. But in the case we aren't doing anything special with the promise, so this would be more of a style choice.

@eldadmel

This comment has been minimized.

Copy link

commented Dec 7, 2017

My note.noteId is always "undefined". Any idea what I did wrong?

@jayair

This comment has been minimized.

Copy link
Member Author

commented Dec 11, 2017

@eldadmel You can try to console.log(results) to see what you are getting back from the API.

@mochfauz

This comment has been minimized.

Copy link

commented Mar 29, 2018

He Jay, may I know how to render images on list notes? I had tried a different way, but still stuck with it.
Because I only got a database attachment text.

@mochfauz

This comment has been minimized.

Copy link

commented Mar 29, 2018

Here is my code

import React, { Component } from "react";
import { PageHeader, ListGroup, ListGroupItem } from "react-bootstrap";
import "../Home.css";
import { API } from "aws-amplify";
import { Link } from "react-router-dom"

export default class Home extends Component {
    constructor(props) {
        super(props);

        this.state = {
            isLoading: true,
            coins: []
        };
    }





    async componentDidMount() {
        if (!this.props.isAuthenticated) {
            return;
        }

        try {
            const coins = await this.coins();
            this.setState({ coins });
        } catch (e) {
            alert(e);
        }

        this.setState({ isLoading: false });
    }

    coins() {
        return API.get("notes", "/coins");
    }


    renderCoinsList(coins) {
        return [{}].concat(coins).map(
            (coin, i) =>
                i !== 0
                    ?
                    <div >

                        <div className="m-widget5">
                            <div className="m-widget5__item"  key={coin.coinId} style={{borderBottom: "0.07rem solid #ebedf2"}}>
                                <div className="m-widget5__pic">
                                    <img className="m-widget7__img" src="/assets/app/media/img/products/product6.jpg" alt="" />
                                </div>
                                <div className="m-widget5__stats1">
                                    <span className="m-widget5__number">{coin.namecoin}</span><br/>

                                </div>
                                <div className="m-widget5__stats1">
                                    <span className="m-widget4__title">{coin.currency}</span><br/>

                                </div>
                                <div className="m-widget5__stats1">
                                    <span className="m-widget4__title">{coin.pricebtc}</span><br/>

                                </div>
                                <div className="m-widget5__stats1">
                                    <span className="m-widget4__titler">{coin.priceusd}</span><br/>

                                </div>
                                <div className="m-widget5__stats1">
                                    <span className="m-widget4__title">{coin.currentblock}</span><br/>

                                </div>
                                <div className="m-widget5__stats1">
                                    <span className="m-widget4__title">more info</span><br/>

                                </div>

                            </div>


                        </div>





                    </div>
                    : <div/>
        );
    }

    handleNoteClick = event => {
        event.preventDefault();
        this.props.history.push(event.currentTarget.getAttribute("href"));
    }

    renderLander() {
        return (
            <div className="lander">
                <h1>Scratch</h1>
                <p>A simple note taking app</p>
            </div>
        );
    }

    renderCoins() {
        return (
            <div className="notes">
                <ListGroup>
                    {!this.state.isLoading && this.renderCoinsList(this.state.coins)}
                </ListGroup>
            </div>
        );
    }

    render() {
        return (
            <div className="Home">





                <div className="m-portlet m-portlet--full-height ">
                    <div className="m-portlet__head">
                        <div className="m-portlet__head-caption">
                            <div className="m-portlet__head-title">
                                <h3 className="m-portlet__head-text">
                                    Coins List
                                </h3>
                            </div>
                        </div>
                        <div className="m-portlet__head-tools">
                            <ul className="nav nav-pills nav-pills--brand m-nav-pills--align-right m-nav-pills--btn-pill m-nav-pills--btn-sm" role="tablist">
                                <li className="nav-item m-tabs__item">
                                    <Link className="nav-link m-tabs__link active"  to="/coins/new" >
                                        Add Coin
                                    </Link>
                                </li>

                            </ul>
                        </div>
                    </div>
                    <div className="m-portlet__body">

                        <div className="tab-content">
                            <div className="tab-pane active" id="m_widget5_tab1_content" aria-expanded="true">
                                <div className="m-widget5">
                                    <div className="m-widget5__item"   style={{borderBottom: "0.07rem solid #ebedf2"}}>
                                        <div className="m-widget5__stats1" style={{textAlign: 'left'}}>
                                            <span className="m-widget5__number">Logo</span><br/>

                                        </div>
                                        <div className="m-widget5__stats1">
                                            <span className="m-widget5__number">Name</span><br/>

                                        </div>
                                        <div className="m-widget5__stats1">
                                            <span className="m-widget5__number">currency</span><br/>

                                        </div>
                                        <div className="m-widget5__stats1">
                                            <span className="m-widget5__number">price btc</span><br/>

                                        </div>
                                        <div className="m-widget5__stats1">
                                            <span className="m-widget5__number">price usd</span><br/>

                                        </div>
                                        <div className="m-widget5__stats1">
                                            <span className="m-widget5__number">current block</span><br/>

                                        </div>
                                        <div className="m-widget5__stats1">
                                            <span className="m-widget5__number">etc</span><br/>

                                        </div>

                                    </div>


                                </div>



                                {this.props.isAuthenticated ? this.renderCoins() : this.renderLander()}


                            </div>


                        </div>

                    </div>
                </div>





            </div>
        );
    }
}
@jayair

This comment has been minimized.

Copy link
Member Author

commented Mar 30, 2018

@jayair

This comment has been minimized.

Copy link
Member Author

commented May 9, 2018

@jayair jayair closed this May 9, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.