So i gave made a login system, and it works fine, it's just that i try to only show my navbar after logging in, it worked at first, now it does not and i can't figure out why.
noder server.js
`
app.get("/login", (req, res)=> {
if (req.session.user) {
res.send({loggedIn: true, user: req.session.user})
}else{
res.send({loggedIn: false})
}
})
`
And here is the App.js where i try to see if they're logged in or not. If they are the menu should show, if not then it should not show.
`
import React, { useState } from "react";
import { Link } from "react-router-dom";
import Axios from "axios";
import Button from "./Button"
import { Cookie } from "express-session";
const Navbar = () => {
const Links = [
{name: "Home", link: "/home"},
{name: "Profile", link: "/profile"},
{name: "Settings", link: "/settings"},
];
const [openMenu, setOpenMenu] = useState(false)
return(
<div className="shadow-md w-full fixed top-0 left-0">
<div className="md:flex items-center justify-between bg-gray-800 dark:text-white py-4 md:px-10 px-7">
<div className="font-bold text-2xl cursor-pointer flex items-center">
Alex' file server
</div>
<div onClick={()=> {setOpenMenu(!openMenu)}} className="text-3xl absolute right-8 top-6 cursor-pointer md:hidden transition-transform duration-500">
<ion-icon name={openMenu ? "close" : "menu"}></ion-icon>
</div>
<ul className={`md:flex md:items-center md:pb-0 pb-12 absolute md:static bg-gray-800 md:z-auto z-[-1] left-0 w-full md:w-auto md:pl-0 pl-9 transition-all duration-500 ease-in ${openMenu ? "top-10 opacity-100" : "top-[-490px] md:opacity-100 opacity-0"}`}>
{
Links.map((link)=> (
<li key={link.name} className="md:ml-8 text-xl md:my-0 my-7">
<Link to={link.link} className="hover:text-teal-300 duration-500">{link.name}</Link>
</li>
))
}
<Button>
Logout
</Button>
</ul>
</div>
</div>
)
}
export default Navbar
`
I have tried to validate within the navbar itself, but that does not make sense
Related
When ever i am using useContext in the js file, it gives the error "TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))". Removing that line , it works perfectly fine . I am not able to figure out the problem with this. Any help would be appreciated.
import { useRef } from "react";
import "./login.css";
import { loginCall } from "../../apicalls";
import { useContext } from "react";
import {AuthContext} from '../../context/AuthContext.js'
export default function Login() {
const email = useRef();
const password = useRef();
const [user,dispatch] = useContext(AuthContext);
const handleClick = (e) => {
e.preventDefault();
// loginCall(
// { email: email.current.value, password: password.current.value },
// dispatch
// );
console.log('hi');
};
// console.log(user);
return (
<div className="login">
<div className="loginWrapper">
<div className="loginLeft">
<h3 className="loginLogo">SocioFolio</h3>
<span className="loginDesc">
Connect with friends and the world around you on SocioFolio.
</span>
</div>
<div className="loginRight">
<form action=""
onSubmit={handleClick}
>
<div className="loginBox">
<input placeholder="Email" type="email" required className="loginInput" />
<input placeholder="Password" type="password" required minLength="6" className="loginInput" />
<button className="loginButton">Log In</button>
<span className="loginForgot">Forgot Password?</span>
<button className="loginRegisterButton">
Create a New Account
</button>
</div>
</form>
</div>
</div>
</div>
);
}
I just try to hit the API when like and dislike button is clicked , but I get unauthorized error after passing the authorization header.
What is the solution of this problem. There is post where all users can like or dislike. There is only unauthorized error, everything is true.
This is the screenshot of where the action is written.
This is the screenshot where the error is displayed.
`JavaScript code
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import {Link} from 'react-router-dom';
import { deltePost, addLike, deleteLike } from
class PostItem extends Component {
onDelteClick(postId)
{
this.props.deltePost(postId);
}
onLikeClick(id)
{
this.props.addLike(id);
}
onunLikeClick(id)
{
this.props.deleteLike(id);
}
render() {
const {post,auth,showActions}=this.props;
return (
<section className="container">
<div className="posts">
<div className="post bg-white p-1 my-1">
<div>
<a href="profile.html">
<img
className="round-img"
src="//www.gravatar.com/avatar/05434e5d678bc30625550497804f6d0e?s=200&r=pg&d=mm"
alt=""
/>
<h4>{post.name}</h4>
</a>
</div>
<div>
<p className="my-1">
{post.text}
</p>
<p className="post-date">
{post.date}
</p>
{showActions ?(<span>
<button onClick={this.onLikeClick.bind(this, post._id)} type="button" className="btn btn-light">
<i className="fas fa-thumbs-up"></i>
<span>{post.likes.length}</span>
</button>
<button onClick={this.onunLikeClick.bind(this, post._id)} type="button" className="btn btn-light">
<i className="fas fa-thumbs-down"></i>
</button>
<Link to={`/post/${post._id}`} className="btn btn-primary">
Comments <span className='comment-count'>{post.comments.length}</span>
</Link>
{post.user === auth.user.id ?(
<button
type="button"
onClick={this.onDelteClick.bind(this,post._id)}
className="btn btn-danger"
>
<i className="fas fa-times"></i>
</button>
):null}
</span>) :null}
</div>
</div></div>
</section>
)
}
}
PostItem.defaultProps={
showActions:true
}
PostItem.propTypes={
deltePost:PropTypes.func.isRequired,
deleteLike:PropTypes.func.isRequired,
addLike:PropTypes.func.isRequired,
post:PropTypes.object.isRequired,
auth:PropTypes.object.isRequired
}
const mapStateToProps= state =>({
auth:state.auth
})
export default connect(mapStateToProps,{deltePost,addLike,deleteLike})(PostItem)
`
I'm working on this project and I want to display the content I got from the backend routes via axios to Showcase component. But the code doesn't give the output as expected the updated state console.log(cont) is working and no issue but it doesn't rendering contents.The app.js state is received by the component. I want to display the names. The child functional component as follows.
import React from 'react';
import {
Table,
Button
} from 'reactstrap';
function Showcase(props) {
const title = props.title;
const contents = props.contents;
let items_body = [];
items_body = contents.map(cont => {
console.log(cont)
if(cont.category === 'Men') {
return (
<div className="item_card" key={cont._id}>
<div className="itemC_right">
<div className="itemCR_topA">
<div className="itemCR_topA_title">{cont.name}</div>
</div>
</div>
</div>
)
}
else if(cont.category === 'Women') {
return (
<div className="lead content d-flex d-flex justify-content-center mb-3" key={cont.id}>
<div>Name : {cont.name}</div>
</div>
)
}
else if(cont.category === 'Kids') {
return (
<div className="lead content d-flex d-flex justify-content-center mb-3" key={cont.id}>
<div>Name : {cont.name}</div>
</div>
)
}
else
return (
null
)
})
return (
<div id="showcase">
<div id="showcase_card">
<div className="row">
<div className="col-sm-6 d-flex flex-row mt-1">
<h1 className="display-3 txt_secondary text-left" id="showcase_title">{title}</h1>
</div>
<div className="col-sm-6 d-flex flex-row-reverse mt-4">
<small className="txt_secondary text-right">Oreo is a online shopping store made just for you.</small>
</div>
</div>
<div>
{items_body}
</div>
</div>
</div>
)
}
export default Showcase;
The App.js class component
class App extends React.Component {
state = {
title: 'Oreo',
contents: []
}
changeState = (category,data) => {
this.setState({
title: category,
contents: data
})
}
handleNavigation = (e) => {
const option = e.target.innerHTML;
switch(option) {
case "Men":
axios.get('/api/items/men/2')
.then(res => {
this.changeState('Men',res.data);
// console.log(res.data)
})
break;
}
}
render() {
return (
<div>
<NavigationBar handleNavigation={this.handleNavigation} />
<Showcase title={this.state.title} contents={this.state.contents} />
<ItemWindow />
<BottomBar />
</div>
);
}
}
export default App;
In NavigationComponent.js when clicked on Men I'm sending it to App.js then it handles the click event. Why doesn't Showcase.js cannot show/render results? Help.
So I got rid of the if statements under the Showcase.js and could get my results. It seems that I was checking the category twice(in handleNavigation and here). I also added async and await as tonkalata's way.
Environment
ReduxForm: v6.5.0
Node: v8.1.2
Browser: Google Chrome
I've gone through all the existing issues on handleSubmit page refreshing, but none of them seems to solve my problem.
LoginForm
import React, { Component } from 'react'
import { reduxForm, Field, propTypes } from 'redux-form'
import classNames from 'classnames'
import loginValidation from './validation'
#reduxForm({
form: 'loginForm',
validate: loginValidation
})
export default class LoginForm extends Component {
static propTypes = {
...propTypes
}
inputField = ({ input, label, type, meta: { touched, error } }) => (
<fieldset className="form__fieldset login-form__fieldset">
<div className="form__field">
<input {...input}
type={type}
placeholder={touched && error ? error : label}
className={classNames('form__input login-form__input',
touched && error ? 'ng-invalid' : ''
)}
/> {/* .ng-invalid */}
</div>
{type === 'password' &&
<div className="form__helper login-form__helper">
<div className="small">
<a>I've forgotten my password</a>
</div>
</div>
}
</fieldset>
)
render() {
const { inputField, props } = this
const { handleSubmit, submitting } = props
return (
<div className="habbo-login-form">
<form className="login-form__form" onSubmit={handleSubmit}>
<Field name="username" type="text" component={inputField} label="Username" />
<Field name="password" type="password" component={inputField} label="Password" />
<button className="login-form__button" type="submit" disabled={submitting}>Let's go!</button>
</form>
<div className="login-form__social">
<div className="habbo-facebook-connect" type="large">
<button className="facebook-connect">Login with Facebook</button>
</div>
<div className="habbo-facebook-connect" type="small">
<button className="facebook-connect"></button>
</div>
</div>
</div>
)
}
}
And the HOC LoginHeader:
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import classNames from 'classnames'
import LoginForm from './LoginForm'
import { authActions } from '../redux/modules/auth'
#connect(
state => ({
user: state.auth.user,
...state.form.loginForm
}),
{ ...authActions }
)
export default class LoginHeader extends Component {
static propTypes = {
user: PropTypes.object,
login: PropTypes.func.isRequired,
logout: PropTypes.func.isRequired
}
static contextTypes = {
router: PropTypes.object
}
onSubmit = (data) => this.props.login(data).then(console.log)
render() {
const { submitFailed } = this.props
const headerLoginForm = classNames(
'header__login-form',
submitFailed ? 'animated shake' : ''
)
return (
<div className="header__top sticky-header sticky-header--top">
<div className="wrapper">
<div className="header__top__content">
<div className={headerLoginForm}>
<LoginForm onSubmit={this.onSubmit} />
</div>
</div>
</div>
</div>
)
}
}
Even when I try to replace <form onSubmit={handleSubmit}> with <form onSubmit={(e) => e.preventDefault()}> my page still refreshes.
I'm unsure whether or not this is a problem with my coding, browser, version, or whatever else because practically yesterday it worked without any problem.
I use jest snapshot testing for one of my component and the generated snap file is huge (199Kb and 4310 lines). All snapshot file is print to the console (that's 3-4 secs of rendering) when the snapshot test fails and it gave me this "you're doing something wrong" feeling.
So my question is : Am i using snapshot testing correctly ?
component code :
import _ = require('lodash');
import React = require('react');
import {TranslatedMessage} from 'translator';
import {UserProfile} from './user-profile';
import {ICustomerProfile} from '../customer/customer-profile';
interface IUserProfile {
firstName: string;
lastName: string;
id: string;
customer: ICustomerProfile;
job: string;
email: string;
contacts: string;
phoneNumber: string;
}
interface IUserProfileProps {
contact: IUserProfile;
}
interface IUserProfileState {}
export class UserProfile extends React.Component<IUserProfileProps, IUserProfileState> {
constructor(props: IUserProfileProps) {
super(props);
}
public render(): JSX.Element {
return (
<div className="ext-admin-user-infos-details">
<div className="ext-admin-user-infos-details-content">
<div className="row">
<div className="col-md-12">
<h3>{this.props.contact.firstName } {this.props.contact.lastName}</h3>
<p className="ext-subtitle">
<span className="ext-minor">{this.props.contact.id}</span>
</p>
</div>
</div>
<div className="row">
<div className="col-md-8">
<div className="ext-admin-user-infos-card">
<h6>
<TranslatedMessage messageKey="common.labels.customer" />
</h6>
<ul>
<li>{this.props.contact.customer.name}</li>
</ul>
</div>
<div className="ext-admin-user-infos-card">
<h6>
<TranslatedMessage messageKey="admin.contact.infos.job" />
</h6>
<ul>
<li>{this.props.contact.job}</li>
</ul>
</div>
<div className="ext-admin-user-infos-card">
<h6>
<TranslatedMessage messageKey="admin.contact.infos.email" />
</h6>
<ul>
<li>{this.props.contact.email}</li>
</ul>
</div>
</div>
<div className="col-md-4">
<div className="ext-admin-user-infos-card">
<h6>
<TranslatedMessage messageKey="common.labels.followed" />
</h6>
<ol>
{this.renderContacts(this.props.contact.contacts)}
</ol>
</div>
<div className="ext-admin-user-infos-card">
<h6>
<TranslatedMessage messageKey="common.labels.phone" />
</h6>
<ul>
<li>{this.props.contact.phoneNumber}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
);
}
protected renderContacts(contacts: IUserProfile[]): JSX.Element[] {
let contacts= [];
if (sales) {
_.map(sales, function(contact: IUserProfile): void {
salesContact.push(
<li>
{ contact.firstName}
{ contact.lastName}
</li>
);
});
}
return contacts;
}
}
And the test file
jest.mock('TranslatedMessage');
import React = require('react');
import {render} from 'enzyme';
import {user} from '../../../tests/tools';
import {UserProfile} from '../../../app/components/user-profile/user-profile';
describe('UserProfile', () => {
it('should match the snapshot', () => {
const tree = render(<UserProfile user={user} />);
expect(tree).toMatchSnapshot();
});
});
Trust that feeling.
You're using snapshot testing correctly, but you've reached the point where you need to break down large components into smaller components. Breaking them apart will allow you to mock the children components, which will cut down on your snapshot size (per snapshot, not in aggregate) and make your diffs easier to see and fix.
For example, instead of:
export class UserProfile extends Component {
public render() {
return (
<div className="ext-admin-user-infos-details">
<div className="ext-admin-user-infos-details-content">
<div className="row">
<div className="col-md-12">
<h3>{this.props.contact.firstName } {this.props.contact.lastName}</h3>
<p className="ext-subtitle">
<span className="ext-minor">{this.props.contact.id}</span>
</p>
</div>
</div>
// ...
</div>
</div>
)
}
}
You do:
export class UserProfile extends Component {
public render() {
return (
<div className="ext-admin-user-infos-details">
<div className="ext-admin-user-infos-details-content">
<div className="row">
<div className="col-md-12">
<UserProfileName
first={this.props.contact.firstName}
last={this.props.contact.firstName}
contactId={this.props.contact.id}
/>
</div>
</div>
// ...
</div>
</div>
)
}
}
export class UserProfileName extends Component {
public render() {
return (
<div>
<h3>{this.props.contact.first} {this.props.contact.last}</h3>
<p className="ext-subtitle">
<span className="ext-minor">{this.props.contact.contactId}</span>
</p>
</div>
);
}
}
Notice that I've moved the logic for rendering the user's name to another component. Here's the updated test, mocking the child component:
jest.mock('TranslatedMessage');
jest.mock('UserProfileName'); // Mock this and other children
import React = require('react');
import {render} from 'enzyme';
import {user} from '../../../tests/tools';
import {UserProfile} from '../../../app/components/user-profile/user-profile';
describe('UserProfile', () => {
it('should match the snapshot', () => {
const tree = render(<UserProfile user={user} />);
expect(tree).toMatchSnapshot();
});
});
The snapshot for this will be much smaller than if it was all in one component. Of course you would have tests for the children components as well:
import React = require('react');
import {render} from 'enzyme';
import {UserProfileName} from '../../../app/components/user-profile/user-profile-name';
describe('UserProfileName', () => {
it('should match the snapshot with all props', () => {
const tree = render(<UserProfile first="Test" last="Testerson" contactId="test-id" />);
expect(tree).toMatchSnapshot();
});
it('should render without a first name', () => {
const tree = render(<UserProfile last="Testerson" contactId="test-id" />);
expect(tree).toMatchSnapshot();
});
it('should render without a last name', () => {
const tree = render(<UserProfile first="Test" contactId="test-id" />);
expect(tree).toMatchSnapshot();
});
});
Notice that in these tests I added two more cases at the end. When you break components down like this, it's a lot easier to understand and test for specific use-cases of the children components!
Finally, an added benefit of this approach is that now you have a re-usable component that knows how to render a user name! You could generalize this and plop it in whenever you need it.
You're doing the testing right, but you should definitely divide your component into multiple smaller ones, as it's too big at the moment.
When using enzyme, you might not want always to use render for testing, as it's what makes an output this big. When snapshot testing pure components, for example, you should use shallow.
We're using react-test-rendered for snapshot testing, it's more lightweight than enzyme.
If you're using enzyme, you should be using a shallow render.
import { shallow } from 'enzyme';
const component = shallow(<UserProfile user={user} />);
expect(component.text()).toMatchSnapshot();
You can also use react-test-renderer as well:
import renderer from 'react-test-renderer';
const component = renderer.create(<UserProfile user={user} />);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();