hidjou / classsed-react-firebase-client Goto Github PK

Hi, I am having issues with the rendering of the Profile component. It seems as though I am the data for credentials is undefined.

export class Profile extends Component {
render() {
const {
classes,
user: {
credentials: { handle, createdAt, imageUrl, bio, website, location },
loading,
authenticated
}
} = this.props;

Below is a link to a Screencastify video. Help is much appreciated.

https://drive.google.com/file/d/1iJGMIntIpB3qeYh-dZl_gOVh7Gd1tN6W/view

I got:
Error: Request failed with status code 403 userActions.js:41
at createError (createError.js:16)
at settle (settle.js:17)
at XMLHttpRequest.handleLoad (xhr.js:61)

from my console and the profile section only says loading with no data! I think my code is all the same. I'm so confused please help!

EDIT: I think its working now but I'm getting an error on image upload...

`export class login extends Component {
constructor(){
super();
this.state={
email: '',
password:'',
loading: false,
errors:{}
}
}
handleSubmit = (event)=>{
event.preventDefault();
this.setState({
loading: true
});
const userData = {
email:this.state.email,
password:this.state.password
}
axios.post('/login',userData)
.then(res=>{
console.log(res.data);
this.setState({
loading:false
});
this.props.history.push('/')
})
}
handleChange = (event) => {
this.setState({
[event.target.name]: event.target.value
});
};

render(){
    const {classes}=this.props;
    return(
        <Grid container className={classes.form}>
            <Grid item sm={12} xs={12}>
            <Typography variant='h2' className={classes.pageTitle}>
            Login</Typography>
            <form noValidate onSubmit={this.handleSubmit}>
            <TextField className={classes.text} id="email" type='email' label="Email" variant="outlined" value={this.state.email} onChange={this.handleChange} fullWidth/><br/>
            <TextField className={classes.text} id="password" type='password'label="Password" variant="outlined" value={this.state.password} onChange={this.handleChange} fullWidth/><br/>
            <Button type='submit' variant="contained" color="primary" className={classes.button}>Login</Button>
            </form>
            </Grid>
        </Grid>
    );
}

}
`

Hi, there is a problem. In case redux dev tools does not installed, app throws a TypeError.

It caused of this line:

In case redux dev tool not installed windows.__REDUX_DEVTOOLS_EXTENSION__ returns undefined. Compose redux method does receive functions, and do not check either it function or not. Try to envoke apply on undefined goes to error.

As solution suppose move window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() out of compose().

https://github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup

This is the error I get, I run npm start and without doing anything I receive this error, the code is the exact same. Please help.

Amazing work on the video and these repos (this one and the functions ones)!

I had an issue with trying to make the authentication persistent -

Currently:
The user signs in -> gets a token (generated by getIdToken() on the backend) -> saves it in local storage -> every requests is being sent with a header containing the Authorization header -> FBAuth middleware uses VerifyIdToken()

Works flawlessly.. for an hour, then the token expires and my http requests start getting 403 and the auth/id-token-expired and the only way to handle this is to sign out the user and then sign in again.

Maybe I'm missing something?

Possible solutions I thought of

• generating a custom token on the backend, verifying them and when it fails my client-side tries to signInWithCustomToken or maybe regenrate it somehow?
• Start using the firebase client side SDK to make it handle all the work for me?

Any other thoughts? :)

Thanks!

Hi. anyone can help me? I have already checked the code last night, from this tutorial, but I did not find any difference ... this is a strange error and the picture, Please cooperate

In Scream.js a ScreamDialog is created with a screamId and a userHandle as props:
<ScreamDialog screamId={screamId} userHandle={userHandle} />

However in ScreamDialog.js it receives an object scream with comments:
const { classes, scream: { screamId, body, createdAt, likeCount, commentCount, userImage, userHandle, comments }, UI: { loading } } = this.props;

How is it achieved? I tried it myself and it does not work. Code does compile but it says cannot read those properties undefined while loading the home page. Could you please tell me what might be the problem?

when i click on like button its LikeCount is successFully Increase but it is not

this is my scream component

`import React,{Fragment,useEffect} from 'react'
import withStyles from '@material-ui/core/styles/withStyles'
import Card from '@material-ui/core/Card'
import CardContent from '@material-ui/core/CardContent'
import CardMedia from '@material-ui/core/CardMedia'
import Typography from '@material-ui/core/Typography'
import {Link} from 'react-router-dom'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'

import {connect} from 'react-redux'
import {likeScream,unlikeScream} from '../redux/actions/dataAction'

//icon
import FavoriteIcon from '@material-ui/icons/Favorite';
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';
import CommentIcon from '@material-ui/icons/Comment';
import ToolButton from './ToolButton'
import LikeButton from './LikeButton'

const style = {
card : {
display : 'flex',
marginBottom : 20,
},
image : {
minWidth : 200,

},
content :{
    padding : 25,
    objectFit : 'cover',
}

}

function Scream({classes,scream,scream : {body , createdAt , imageUrl , userHandle , Screamid , likeCount , commentCount },user }) {
dayjs.extend(relativeTime)

return (
    <Card className= {classes.card}>
        <CardMedia image = {imageUrl}  title = 'Profile Image' className= {classes.image} />
        <CardContent className = {classes.content}>
            <Typography variant = 'h5' component = {Link} to = {`user/${userHandle}`} color='primary'>{userHandle}</Typography>
            <Typography variant = 'body2' color= 'textSecondary' >{dayjs(createdAt).fromNow()}</Typography>
            <Typography variant = 'body1'>{body}</Typography>
            <LikeButton Screamid={Screamid} />
            <span>{likeCount} Likes</span>
            <ToolButton tip="comments">
                <CommentIcon color="primary" />
            </ToolButton>
            <span>{commentCount} comments</span>
        </CardContent>
    </Card>

)

}

const mapStateToProps = (state) => ({
user : state.user
})

export default connect(mapStateToProps)(withStyles(style)(Scream))
`

and this is my LikeButton component

`import React,{Fragment} from 'react'
import {connect} from 'react-redux'
import FavoriteIcon from '@material-ui/icons/Favorite';
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';
import ToolButton from './ToolButton'
import {Link} from 'react-router-dom'
import {likeScream,unlikeScream} from '../redux/actions/dataAction'
function LikeButton({user,Screamid,unlikeScream,likeScream}) {
const isLiked = () => {
if(user.likes && user.likes.find(like => like.Screamid === Screamid)){

        return true
    }else {
        return false
    }
}
let likeButton = user.authenticated ? (
    <Fragment>
    {isLiked() ? (
        <Fragment> 
        <ToolButton tip = 'unlike' onClick={() => unlikeScream(Screamid)}>
            <FavoriteIcon color = 'primary' />
        </ToolButton>
        </Fragment>
    ) : (
        <Fragment>
        <ToolButton tip = 'like' onClick = {() => likeScream(Screamid)}>
        <FavoriteBorderIcon color = 'primary' />
        </ToolButton> 
        </Fragment>  
    ) } 
    </Fragment>

) : (
    <Fragment>
    <ToolButton tip = 'login befor like'>
        <Link to = '/login'>
        <FavoriteBorderIcon color = 'primary' />
        </Link>
    </ToolButton>
    </Fragment>
)

return likeButton

}

const mapStateToProps = (state) => ({
user: state.user
});

const mapActionsToProps = {
likeScream,
unlikeScream
};

export default connect(
mapStateToProps,
mapActionsToProps
)(LikeButton);

please help me out

React is updating their way of handling the componentWillReceiveProps, so if you get this error.

You can update this:

componentWillReceiveProps(nextProps) {
    if(nextProps.UI.errors){
      this.setState({ errors: nextProps.UI.errors });
    }
  }

to this:

static getDerivedStateFromProps(props) {
    if (props.UI.errors) {
      return {
        errors: props.UI.errors
      }
    }
  }

you could keep using the first function above but would need to change it into UNSAFE_componentWillReceiveProps

Hi hidjou!
Thank you for this series. I have a bug that when I click the notifications from the user page, first time it's working. The scream dialog does not open when we are on a user page. Do you know how to solve this problem? Please help. Thank you!

Hi, I am having an issue where I've deployed the app to firebase and when I try to open the app using the firebase domain, it just shows a blank screen. I think it's because my index.html file somehow got changed to a blank template index.html file. However, when I look at the index.html file on here, it's exactly the same as that, so I'm confused. Can someone please share with me their index.html file so I can make sure that file is correct on my end?

When expanding a scream and clicking on like/unlike Comments.js errors:

The issue occurs because the liked/unliked scream returned does not include comments. Fix is in dataReducer.js LIKE_SCREAM/UNLIKE_SCREAM, to spread state.scream as follows:

if (state.scream.screamId === action.payload.screamId) {
  state.scream = { ...state.scream, ...action.payload };
}

I can submit a pull request if I can push my branch with the fix.

It says TypeError: color.charAt is not a function.
Here is a link to the screenshot of the error : https://drive.google.com/open?id=1HL-Fy1M4tHp9qMUpt88PzOfI10AHHem-

Please help.

Getting a 500 error when trying to login. I even set the cors in the index.js of the functions after I got cors error fetching Screams.

<MyButton tip="comments"> <ChatIcon color="primary" /> </MyButton>

Do we not need any action to submit new comment?

@hidjou

Comment count doesn't update in Scream component, only updates in ScreamDialog if you don't refresh the page. This is because in our state we only update commentCount in scream (accessed by ScreamDialog and not also screams (accessed by Scream).

This can be fixed in dataReducer.js by replacing the code for case SUBMIT_COMMENT: with the following:

case SUBMIT_COMMENT:
      let commentedOnIndex = state.screams.findIndex(
        scream => scream.screamId === action.payload.screamId
      );
      return {
        ...state,
        scream: {
          ...state.scream,
          comments: [action.payload, ...state.scream.comments],
          commentCount: state.scream.commentCount + 1
        },
        screams: state.screams.map((scream, screamsArrIndex) =>
          screamsArrIndex === commentedOnIndex
            ? { ...scream, commentCount: scream.commentCount + 1 }
            : scream
        )
      };

i keep getting this error everytime i try to load the application

TypeError: color.charAt is not a function
decomposeColor
node_modules/@material-ui/core/styles/colorManipulator.js:140
137 | return color;
138 | }
139 |

140 | if (color.charAt(0) === '#') {
| ^ 141 | return decomposeColor(hexToRgb(color));
142 | }
143 |

@hidjou, I am following your code and youtube channel quite from some days, but I have a small confusion in this code, What is the role of creating two different folders name "pages" and "components" in your project?

hi guys ,
i have an issue in showing profile info and the edit/logout buttons

any solutions please

I can upload new image from postman but I cannot upload image from web app.

export const uploadImage = formData => dispatch => { dispatch({ type: LOADING_USER }); axios .post("/user/image", formData) .then(() => { dispatch(getUserData()); }) .catch(err => console.log(err)); };