I am using express nodejs to create a fullstack app, this page has to show users and products but it is rendering a blank page. If I delete the {} of user, it renders the page but with no results.
import React, { useContext, useState } from 'react';
import CoffeeContext from '../contexts/CoffeeContext';
import { Link } from "react-router-dom";
import '../App.css'
import UserContext from '../contexts/UserContext';
function CoffeeList(props) {
let { deleteCoffee } = useContext(CoffeeContext);
let { user } = useContext(UserContext)
return (
<CoffeeContext.Consumer>
{
({ coffee }) => {
return <div>
<h1>Posts</h1>
<h4>Hello <span> {user.username}'Insert user's name here' Thanks for visiting our website!</span></h4>
<button>Add New Post</button>
<div>
{coffee.map((c) => {
console.log(coffee)
return (
<div key={c._id}>
<h2>{c.name}</h2>
<Link to={`/edit/${c._id}`}>
<button>Edit</button>
</Link>
<button onClick={() => { deleteCoffee(c._id)}}>Delete</button>
<h6>{user.username}</h6>
</div>
)
})}
</div>
</div>
}
}
</CoffeeContext.Consumer>
);
}
export default CoffeeList;
Related
I am on the way to learning Jest and React Testing Library.
When I run the test below, it is 'passed' but I see the console.error message.
[sectionIntro.spec.js]
import React from "react";
import { fireEvent, render, screen } from "#testing-library/react";
import SectionIntro from "../../components/home/SectionIntro.jsx";
import { CV_URL } from "../../lib/socials";
describe("SectionIntroComponent", () => {
it("Should open the CV link when CV button is clicked", () => {
render(<SectionIntro />);
const cv_link = screen.getByText(/Check My CV/i);
expect(cv_link.href).toBe(CV_URL);
});
});
// Also a mock file is used for an image file.
[SectionIntro.jsx]
import * as React from "react";
import Image from "next/image";
import profilePic from "../../public/me.png";
import styles from "../../styles/SectionIntro.module.css";
import { CV_URL } from "../../lib/socials";
const SectionIntro = () => {
return (
<>
<div>
<div>
<Image
className="rounded-full"
src={profilePic}
alt="The author of the website"
objectFit="cover"
sizes="30vw"
/>
</div>
</div>
<div>
<button
className={`${styles.btnCV}`}
>
<a
href={CV_URL}
aria-label="CV"
target="_blank"
rel="noopener noreferrer"
>
Check My CV
</a>
</button>
</div>
</>
);
};
export default SectionIntro;
[mocks/mockFile.js]
export default "";
My question is if the test result is passed why the console.error is shown?
Would it be okay to ignore console.error?
If it is not a good idea to hide the console, why is it so?
Thanks alot in advance!
I am having an issue with the npm package react-google-login. The issue is that I have a redirectUri passed into the component but when I try to redirect with the popup nothing happens , but when I add uxMode='redirect' it works but it gives me an awfully long url which is something I do not like. Is there a way to make the popup version of the redirect work?
Here is my code below, the clientID is removed:
import React from 'react';
import GoogleLogin from 'react-google-login';
import ChatRoom from './ChatRoom';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faGoogle } from '#fortawesome/free-brands-svg-icons';
import { faQuestionCircle } from '#fortawesome/free-solid-svg-icons';
import {Link} from 'react-router-dom';
const responseGoogle = (res) => {
console.log('Failed');
}
const successLogin = () => {
console.log('success');
}
const Authentication = () => {
return (
<div className='auth-wrapper'>
<div className="auth-container">
<h1 className="auth-header">Choose Your Sign in Method</h1>
<div className="btn-container2">
<GoogleLogin
clientId="none"
buttonText="Sign in with Google"
onSuccess={successLogin}
onFailure={responseGoogle}
cookiePolicy={'single_host_origin'}
uxMode='popup'
redirectUri='http://localhost:3000/ChatRoom'
render={renderProps => (
<button className="btn2 btn-primary2 animate shake" onClick={renderProps.onClick} disabled={renderProps.disabled}><FontAwesomeIcon size='lg' icon={faGoogle} /> Sign in with Google</button>
)}
/>
<Link to='/ChatRoom'>
<button className="space btn2 btn-primary2 animate shake">
<FontAwesomeIcon size='lg' icon={faQuestionCircle} /> Continue as Guest
</button>
</Link>
</div>
</div>
</div>
)
}
export default Authentication
Essentially all I had to do was use useHistory from react-router-dom and utilize history.push('/page'); to navigate to the page whenever the user gets authenticated.
let history = useHistory();
// Redirects user after authentication to the ChatRoom
const successLogin = () => {
history.push('/ChatRoom');
}
I create a login button that onClick logs the user in and then the generated information is stored in the local storage, but I keep getting an "Expected onClick listener to be a function, instead got a value of string type. I am using reactJS to do so.
// Global Navigation Bar
import { connect } from "react-redux";
import React, { Component } from "react";
import cognitoUtils from "lib/cognitoUtils";
import "assets/css/Base.css";
import Avatar from "#material-ui/core/Avatar";
import Tooltip from "#material-ui/core/Tooltip";
import AccountCircleOutlinedIcon from "#material-ui/icons/AccountCircleOutlined";
import AccountCircleIcon from "#material-ui/icons/AccountCircle";
const mapStateToProps = state => {
return { session: state.session };
};
class SignInOut extends Component {
onSignOut = e => {
e.preventDefault();
cognitoUtils.signOutCognitoSession();
};
state = {
on: true
};
toggle = () => {
this.setState({
on: !this.state.on
});
};
render() {
return (
<div>
<button className="profile_button" onClick={this.toggle}>
{this.state.on && (
<div>
{this.props.session.isLoggedIn ? (
<div>
<a
className="Home-link"
href="/home"
onClick={this.onSignOut}
>
<Tooltip title="Profile">
<Avatar className="profile_icon">
<AccountCircleIcon className="profile_icon_in" />
</Avatar>
</Tooltip>
</a>
</div>
) : (
<div>
<a
className="Home-link"
href={cognitoUtils.getCognitoSignInUri()}
onClick="/home"
>
<Tooltip title="Profile">
<Avatar className="profile_icon">
<AccountCircleOutlinedIcon className="profile_icon" />
</Avatar>
</Tooltip>
</a>
</div>
)}
</div>
)}
</button>
</div>
);
}
}
export default connect(mapStateToProps)(SignInOut);
Because you are passing String type to onClick
onClick="/home"
You need to pass a function as stated in the error. something like you did before
onClick={this.onSignOut}
So I have a component(Posts) in which a loop through all the posts from the Database. In the component, I 'embedded' another component(PostItem) so I dont have to create a different component for viewing individual entries. Now inside the PostItem component I have another component with the name of 'PostGallery'.
This is the current code that I have in PostItem.js file:
import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import PostGallery from '../posts/PostGallery';
const PostItem = ({
post: { _id, text, name, files, avatar, user, likes, comments, date },
}) => (
<article className={_id}>
<Link to={`/posts/${_id}`}>
<div id="carouselExampleIndicators" className="carousel slide" data-ride="carousel">
<div className="carousel-inner">
{files.slice(0, 5).map((file, index) => (
<PostGallery key={index} post={file} />
))}
</div>
</div>
</Link>
</article>
);
PostItem.propTypes = {
post: PropTypes.object.isRequired,
};
export default connect(
null, null
)(PostItem);
When posting an entry the user can post URL from images separated by comma which is working just fine. The problem comes when displaying it in the front-end.
This is what I have in my PostGallery component:
import React from 'react';
import PropTypes from 'prop-types';
const PostGallery = ({
post: { files }
}) => {
return (
<div className="">
{post.files.length > 0 ? (
post.files.map(file => (
<img key={file} src={file} alt="" />
))) : (
<p>No images found</p>
)
}
</div>
);
};
PostGallery.propTypes = {
post: PropTypes.object.isRequired,
};
export default PostGallery;
I believe this should be easy but somehow its just now working and the console it's not trowing me any errors related to it. So if you guys can help...
Thanks!
I'm starting to work with react and redux, but I'm still a little lost about how to handle props and states.
I'm getting this type error:
TypeError: Cannot read property 'touched' of undefined
{name.touched && name.error && <div className="EmployeeForm-error">{name.error}</div>}
Could someone point me in the right direction or make me know what I'm doing wrong
EmployeeFormComponent.js:
import React from 'react';
import { reduxForm } from 'redux-form';
const EmployeeForm = ({ addEmployee, fields: {name}, handleSubmit }) => {
return (
<form onSubmit={handleSubmit(addEmployee)} >
<div>
<input
type="text"
placeholder="Name"
{...name}
/>
{name.touched && name.error && <div className="EmployeeForm-error">{name.error}</div>}
</div>
...
</form>
);}
export default reduxForm({
form: 'employee',
fields: ['name'],
validate,
})(EmployeeForm);
EmployeeFormContainer.js
import { connect } from 'react-redux';
import EmployeeForm from './EmployeeFormComponent';
import React from 'react';
class EmployeeFormContainer extends React.Component {
render() {
return (
<EmployeeForm {...this.props}/>
)
}
}
To solve it I modified a little my previous changing it to this, now I'm using redux-form Field, and sending the input on component attribute.
import React from 'react';
import { Field, reduxForm } from 'redux-form';
const renderField = ({ input, label, type, meta: { touched, error, warning } }) => (
<div>
<input {...input} placeholder={label} type={type}/>
{touched && error && <div className="EmployeeForm-error">{error}</div>}
</div>
)
const EmployeeForm = ({ addEmployee, fields: { name, surname}, handleSubmit }) => {
return (
<form onSubmit={handleSubmit(addEmployee)}>
<div>
<Field name="name" type="text" component={renderField} label="name"/>
</div>
...
</form>
);}