I was moving actions from the sign in component to the context (I configured context API) everything was going fine until i had to install graphql and moved the mutations files from the sign in component to the context file. Right now is giving me the following error:
Argument of undefined passed to parser was not a valid GraphQL DocumentNode. You may need to use 'graphql-tag' or another method to convert your operation into a document
this error has came out when i used when i call the mutation at the bottom of my AppProvider component. i'm thinking that is not that way with context to use graphql mutations.
AppProvider:
// React
import React, { Fragment } from 'react';
// React apollo
import { graphql } from 'react-apollo';
import * as compose from 'lodash.flowright';
// React router
import { withRouter, Redirect } from 'react-router-dom';
// Mutation
import mutations from './mutations';
// Context
export const Context = React.createContext();
class AppProvider extends React.Component {
constructor(props) {
super(props);
this.state = {
// Login & logout states
login_credentials: {},
isLogged: false,
get_data: this.get_data,
submit: this.submit,
}
}
// Actions
// Login & Logout
get_data = async(e) => {
e.preventDefault();
const { name, value } = e.target;
const data = { [name]: value };
const newData = { ...this.state.login_credentials, ...data };
this.setState({
login_credentials: newData
});
}
submit = async(e) => {
e.preventDefault();
const { signinUser } = this.props;
const { login_credentials, isLogged } = this.state;
try {
let variables = login_credentials;
const response = await signinUser({variables});
const get_token = response.data.signinUser.token;
// setting localStorage
localStorage.setItem('token', get_token);
this.setState({
isLogged: true
});
this.props.history.push({pathname: '/home', state: {isLogged: this.state.isLogged}});
} catch(error) {
console.log(error);
}
}
// END LOGIN & LOGOUT ACTIONS
render() {
return(
<Context.Provider value={this.state}>
{this.props.children}
</Context.Provider>
);
}
}
export default compose(
withRouter,
graphql(mutations.signinUser, { name: 'signinUser' }),
)(AppProvider)
Sign in component where i used to use the functions and mutations:
// React
import React, { Fragment } from 'react';
// React apollo
import { graphql } from 'react-apollo';
import * as compose from 'lodash.flowright';
// React router
import { withRouter, Redirect } from 'react-router-dom';
// import mutations
import mutations from './mutations';
// React bootstrap
import { Container, Row, Form, Button } from 'react-bootstrap';
// Import Style
import './style.css';
// Component
import NavbarLayout from '../Navbar';
// Context
import Context from '../../context/context';
class LoginForm extends React.Component {
/* state = {
login_credentials: {},
isLogged: false
}
get_data = async(e) => {
e.preventDefault();
const { name, value } = e.target;
const data = { [name]: value };
const newData = { ...this.state.login_credentials, ...data };
this.setState({
login_credentials: newData
});
}
submit = async(e) => {
e.preventDefault();
const { signinUser } = this.props;
const { login_credentials, isLogged } = this.state;
try {
let variables = login_credentials;
const response = await signinUser({variables});
const get_token = response.data.signinUser.token;
// setting localStorage
localStorage.setItem('token', get_token);
this.setState({
isLogged: true
});
this.props.history.push({pathname: '/home', state: {isLogged: this.state.isLogged}});
} catch(error) {
console.log(error);
}
}
*/
render() {
return(
<Fragment>
<Context.Consumer>
{c => {
return(
<Container>
<Form className="form-container">
<h2 className="text-center pb-4">Ingreso</h2>
<Form.Group controlId="formBasicEmail">
<Form.Control name='email' onChange={e => c.get_data(e)} type="email" placeholder="Email" />
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Control name='password' onChange={e => c.get_data(e)} type="password" placeholder="Contraseña" />
</Form.Group>
<div className="text-center">
<Button className="button-login" variant="primary" onClick={e => c.submit(e)} type="submit">
Ingresa
</Button>
</div>
</Form>
</Container>
);
}}
</Context.Consumer>
</Fragment>
);
}
}
export default compose(
/* withRouter,
graphql(mutations.signinUser, { name: 'signinUser' }), */
)(LoginForm);
Related
I have a web app that is suppose to show a list of notes made by the user on the dashboard if said list exist (that is if the user wrote any note at all). I wrote the reducer, the actions and I connected state and dispatch in order for it to work. But for some reason the notes created don't appear once in the dashboard when I write them, I already made sure that the ADD_NOTE action gets fired and that the reducer updates the data in redux, but in the dashboard component that data disappears.
This is my reducer.
export default (state = [], action) => {
switch (action.type) {
case "ADD_NOTE":
return [
...state,
action.note
];
case "REMOVE_NOTE":
return state.filter(({ id }) => id !== action.id);
default:
return state;
}
}
And those are my actions
import { v4 as uuidv4 } from 'uuid';
export const addNote = ({ title = "", body = ""} = {}) => ({
type: "ADD_NOTE",
note : {
title,
body,
id : uuidv4()
}
});
export const removeNote = ({ id } = {}) => ({
type: "REMOVE_NOTE",
id
});
This is the component that holds the create note form.
import React, { Component } from 'react';
class CreateNote extends React.Component{
constructor(props){
super(props);
this.onTitleChange = this.onTitleChange.bind(this);
this.onBodyChange = this.onBodyChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.state = {
title: "",
body: "",
error: ""
}
}
onTitleChange(e){
const title = e.target.value;
this.setState({ title });
}
onBodyChange(e){
const body = e.target.value;
this.setState({ body });
}
onSubmit(e){
e.preventDefault();
if(!this.state.title || !this.state.body){
this.setState({ error : "Please fill in all gaps"});
} else {
this.setState({ error: ""});
const data = { title: this.state.title, body: this.state.body}
this.props.onChange(data);
}
}
render(){
return(
<div>
{this.state.error && <p>{this.state.error}</p>}
<form onSubmit = {this.onSubmit}>
<label>Put a title for your note</label>
<input
placeholder="Title"
type="text"
value={this.state.title}
autoFocus
onChange = {this.onTitleChange}
/>
<label>Write your note</label>
<textarea
placeholder="Note"
value={this.state.body}
autoFocus
onChange = {this.onBodyChange}
/>
<input type="submit" value="Submit"/>
</form>
</div>
);
}
}
export default CreateNote;
And this is the component that fires the ADD_NOTE action
import React, { Component } from 'react';
import CreateNote from "./actions/CreateNote";
import Header from "./Header";
import { addNote } from "../actions/noteActions"
import { connect } from 'react-redux';
class Create extends React.Component{
constructor(props){
super(props);
this.eventHandler = this.eventHandler.bind(this);
}
eventHandler(data){
this.props.addNote(data);
this.props.history.push("/");
}
render(){
return (
<div>
<Header />
<CreateNote onChange = {this.eventHandler}/>
</div>
)
}
}
const mapDispatchToProps = (dispatch) => ({
addNote: (note) => dispatch(addNote(note))
});
export default connect(null, mapDispatchToProps)(Create);
And finally this is the dashboard component that renders the notes if they exist
import React from "react";
import ListItem from "./actions/ListItem";
import { connect } from 'react-redux';
const ListGroup = (props) => (
<div>
{
props.notes.length === 0 ? <h1>Write a note!</h1> :
(
props.notes.map((note) => {
return <ListItem key={note.id} {...note} />;
})
)
}
</div>
)
// The mapStateToProps does not connect with the local state, the action ADD_NOTE fires whenever
// the Create form is submited and the reducer updates the redux storage. So the problem lies here ?
// It could be that state.note is not definded but I don't know where should I define it if I have to,
// and apparently I don't have to ???????????????
const mapStateToProps = (state) => {
return {
notes: state.note
};
};
export default connect(mapStateToProps)(ListGroup);
When I try to run this it fires an error:
ListGroup.js?11a1:5 Uncaught TypeError: Cannot read property 'length' of undefined
at ListGroup (ListGroup.js?11a1:5)
Showing that the data that gets passed to the props is undefined. I'm thinking that it could be that state.note is not defined and I have to define it somewhere but I don't know if that's the case.
Use Hooks in functional components
connect() is only valid for class based components. For functional components you need to use hooks. Specifically the useSelector hook for reading redux state and useReducer to emit actions. You can find more instructions on redux hooks here https://react-redux.js.org/api/hooks#useselector
I'm new to React, and despite many attempts I can't figure out how to set my id dynamically in axios requests in my edit-form.
I tried to set the axios requests with a static number just to test my edit-form, I can log my object but when I submit it deletes the product data instead of updating with the new data because the id is undefined.
I think I just need to find out what to write in my componentDidMount and handleSubmit to catch the id.
For example ${this.state.product.id} is undefined, why isn't it working?
It's my first question, so I hope I am clear and tell me if you need more code.
EditForm
import React, { Component } from 'react';
import { withRouter } from 'react-router';
import axios from 'axios';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import Form from 'react-bootstrap/Form';
import Col from 'react-bootstrap/Col';
import FormControl from 'react-bootstrap/FormControl';
import Button from 'react-bootstrap/Button';
class EditForm extends React.Component {
constructor(props) {
super(props);
this.state = { product: [] };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
};
componentDidMount = () => {
axios
.get(`/products/edit-form/${this.props.match.params.id}`)
.then(response => {
console.log(response.data.products);
this.setState({
product: response.data.products
})
});
};
handleChange(e) {
this.setState({id: e.target.value})
this.setState({reference: e.target.value})
this.setState({designation: e.target.value})
}
handleSubmit(e) {
e.preventDefault();
const data = {
id: this.state.product.id,
reference: this.state.product.reference,
designation: this.state.product.designation
};
axios
.post(`/products/${this.props.match.params.id}`, data )
.then(res => console.log(res))
.catch(err => console.log(err));
};
renderForm() {
return this.state.product.map((product, index) => {
const { id,reference,designation } = product
return(
<>
<Form className="post" onSubmit={this.handleSubmit}>
<Form.Row>
<Form.Group as={Col} controlId="formGridReference">
<Form.Label>Reference</Form.Label>
<Form.Control type="text" value={this.state.product.reference}
onChange={this.handleChange} name="reference" placeholder={reference} />
</Form.Group>
<Form.Group as={Col} controlId="formGridDesignation">
<Form.Label>Designation</Form.Label>
<Form.Control type="text" value={this.state.product.designation}
onChange={this.handleChange} name="designation" placeholder={designation} />
</Form.Group>
</Form.Row>
<Button variant="primary" type="submit">
Submit
</Button>
</Form>
</>
);
})
}
render() {
return (
<div>
<h1>Formulaire de modification</h1>
{this.renderForm()}
</div>
);
}
}
export default withRouter(EditForm);
App.js
class App extends Component {
render() {
return (
<React.Fragment>
<NavBar />
<Router>
<Route exact path="/" component={Products}/>
<Route path="/edit-form/:productId" component={EditForm}/>
</Router>
</React.Fragment>
);
}
}
Products
import React, { Component } from 'react';
import Table from 'react-bootstrap/Table';
import Button from 'react-bootstrap/Button';
import { Link } from 'react-router-dom';
import axios from 'axios';
const headings = [
'id','reference','designation'
];
export default class Products extends Component {
constructor(props) {
super(props);
this.state = {
products: []
};
};
componentDidMount = () => {
axios.get("/products").then(response => {
console.log(response.data.products);
this.setState({
products: response.data.products
})
});
};
renderTableHeader() {
return headings.map((key, index) => {
return <th key={index}>{key.toUpperCase()}</th>
})
}
renderProductData() {
return this.state.products.map((product, index) => {
const { id,reference,designation } = product
return (
<tr key={id}>
<td>
{id}
<Link to={`/edit-form/${id}`}>Modifier</Link>
</td>
<td>{reference}</td>
<td>{designation}</td>
</tr>
)
})
}
render() {
return (
<div>
<h1 id='title'>Produits</h1>
<Table striped bordered hover id='products'>
<thead>
{this.renderTableHeader()}
</thead>
<tbody>
{this.renderProductData()}
</tbody>
</Table>
</div>
);
}
}
Async functions
// productController.js
const getProduct = async (req, res) =>
{
const { productId } = req.params;
const product = await productDb.getProduct(productId);
res.status(200).send({ products: product.rows });
};
const postProduct = async (req, res) =>
{
const { productId } = req.params;
const { reference,designation } = req.body;
await productDb.updateProduct(productId, reference, designation);
res.status(200).send(`Le produit reference ${reference} a été modifié`);
console.log(`Le produit reference ${reference} a été modifié`);
// productDb.js
const getProduct = async (id) =>
{
const connection = new DbConnection();
return await connection.performQuery(`SELECT * FROM produits WHERE id=${id}`);
};
const updateProduct = async (id, reference, designation) =>
{
const connection = new DbConnection();
await connection.performQuery("UPDATE produits SET reference=?, designation=? WHERE id=?",
[reference, designation, id]);
};
Thank you
In your Products.js, you are using links to open up your EditForm component. So, for you to be able to access the product id, you need to wrap your EditForm component with the withRouter hoc from the react-router library. This hoc will then make the match prop available to your EditForm component.
So, you need to add react-router to your dependencies by running this:
yarn add react-router **OR** npm install react-router
Then add it to your import statements in EditForm.js
import { withRouter } from 'react-router';
And then inside componentDidMount, you should be able to access the id by doing this:
this.props.match.params.id
You also need to change your class definition to:
class EditForm extends React.Component
And then export it like this:
export default withRouter(EditForm)
I assume in your routes file, you must have a route that is defined like this:
<Route path="/edit-form/:id" component={EditForm} />
I am developing a website in which I want to be able to access the state information anywhere in the app. I have tried several ways of implementing state but I always get following error message:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of SOS.
Here is my SOS->index.js file:
import React, { useContext } from 'react';
import axios from 'axios';
import CONST from '../utils/Constants';
import { Grid, Box, Container } from '#material-ui/core';
import { styled } from '#material-ui/styles';
import { Header } from '../Layout';
import ListItem from './ListItem';
import SOSButton from './SOSButton';
import FormPersonType from './FormPersonType';
import FormEmergencyType from './FormEmergencyType';
import StateContext from '../App';
import Context from '../Context';
export default function SOS() {
const { componentType, setComponentType } = useContext(Context);
const timerOn = false;
//'type_of_person',
const ambulance = false;
const fire_service = false;
const police = false;
const car_service = false;
//static contextType = StateContext;
const showSettings = event => {
event.preventDefault();
};
const handleComponentType = e => {
console.log(e);
//this.setState({ componentType: 'type_of_emergency' });
setComponentType('type_of_emergency');
};
const handleEmergencyType = new_emergency_state => {
console.log(new_emergency_state);
// this.setState(new_emergency_state);
};
const onSubmit = e => {
console.log('in OnSubmit');
axios
.post(CONST.URL + 'emergency/create', {
id: 1,
data: this.state //TODO
})
.then(res => {
console.log(res);
console.log(res.data);
})
.catch(err => {
console.log(err);
});
};
let component;
if (componentType == 'type_of_person') {
component = (
<FormPersonType handleComponentType={this.handleComponentType} />
);
} else if (componentType == 'type_of_emergency') {
component = (
<FormEmergencyType
handleComponentType={this.handleComponentType}
handleEmergencyType={this.handleEmergencyType}
emergencyTypes={this.state}
timerStart={this.timerStart}
onSubmit={this.onSubmit}
/>
);
}
return (
<React.Fragment>
<Header title="Send out SOS" />
<StateContext.Provider value="type_of_person" />
<Container component="main" maxWidth="sm">
{component}
</Container>
{/*component = (
<HorizontalNonLinearStepWithError
handleComponentType={this.handleComponentType}
/>*/}
</React.Fragment>
);
}
I would really appreciate your help!
Just for reference, the Context file is defined as follows:
import React, { useState } from 'react';
export const Context = React.createContext();
const ContextProvider = props => {
const [componentType, setComponentType] = useState('');
setComponentType = 'type_of_person';
//const [storedNumber, setStoredNumber] = useState('');
//const [functionType, setFunctionType] = useState('');
return (
<Context.Provider
value={{
componentType,
setComponentType
}}
>
{props.children}
</Context.Provider>
);
};
export default ContextProvider;
EDIT: I have changed my code according to your suggestions (updated above). But now I get following error:
TypeError: Cannot read property 'componentType' of undefined
Context is not the default export from your ../Context file so you have to import it as:
import { Context } from '../Context';
Otherwise, it's trying to import your Context.Provider component.
For your file structure/naming, the proper usage is:
// Main app file (for example)
// Wraps your application in the context provider so you can access it anywhere in MyApp
import ContextProvider from '../Context'
export default () => {
return (
<ContextProvider>
<MyApp />
</ContextProvider>
)
}
// File where you want to use the context
import React, { useContext } from 'react'
import { Context } from '../Context'
export default () => {
const myCtx = useContext(Context)
return (
<div>
Got this value - { myCtx.someValue } - from context
</div>
)
}
And for godsakes...rename your Context file, provider, and everything in there to something more explicit. I got confused even writing this.
I'm trying to get some information about a user and store it in redux when the user logs in. I dispatch an action to the the uid which works fine. Directly after (I've commented out where in the SignIn.js code) I try to dispatch a redux thunk action that gets a list of product images from firebase. For some reason this action isn't dispatching. Not sure why? I export the function then import the function and use connect so I have access to the dispatch method. What am I missing? Thanks!
SignIn.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { fbAuth, db } from '~/config/firebase/firebaseConfig';
import { getId, getRetailerData } from '~/redux/modules/retailer';
class SignIn extends Component {
static propTypes = {
dispatch: PropTypes.func.isRequired,
push: PropTypes.func.isRequired
}
constructor(props) {
super(props);
this.state = {
email: '',
password: ''
};
this.handleEmailChange = this.handleEmailChange.bind(this);
this.handlePasswordChange = this.handlePasswordChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleEmailChange (event) {
this.setState({email: event.target.value});
}
handlePasswordChange (event) {
this.setState({password: event.target.value});
}
handleSubmit (event) {
event.preventDefault();
const email = this.state.email;
const password = this.state.password;
// Register user
fbAuth.signInWithEmailAndPassword(email, password)
.catch((error) => {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
console.log(errorMessage);
// ...
})
.then(() => {
const user = fbAuth.currentUser;
console.log(user);
this.props.dispatch(getId(user.uid));
// This action below is not being dispatched
this.props.dispatch(getRetailerData());
this.props.push(`/dashboard`);
})
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<div className="form-group">
<label>Email address</label>
<input
type="email"
className="form-control"
placeholder="Enter email"
onChange={this.handleEmailChange}
/>
</div>
<div className="form-group">
<label>Password</label>
<input
type="password"
className="form-control"
placeholder="Password"
onChange={this.handlePasswordChange}
/>
</div>
<button className="btn btn-default" type="submit">Continue</button>
</form>
);
}
}
export default connect()(SignIn);
My reducer
const GET_ID = 'GET_ID';
const GET_PRODUCT_IMAGES = 'GET_PRODUCT_IMAGES';
import { db, fbAuth } from '~/config/firebase/firebaseConfig';
const initialState = {
uid: '',
name: '',
productImages: [],
inventory: {}
}
export function getId (id) {
return {
type: GET_ID,
id
}
}
function getProductImages (images) {
return {
type: GET_PRODUCT_IMAGES,
images
}
}
export function getRetailerData () {
return (dispatch, getState) => {
const user = fbAuth.currentUser;
const productImages = db.ref('users/' + user.uid + '/productImages/');
productImages.on('child_added', (data) => {
console.log(data.val());
dispatch(getProductImages(data.val()))
});
}
}
export default function retailer (state = initialState, action) {
switch (action.type) {
case GET_ID :
return {
...state,
uid: action.id
}
case GET_PRODUCT_IMAGES :
return {
...state,
productImages: action.images
}
default :
return state;
}
}
Lastly I was thinking it could be something with my Index.js?
import React from 'react';
import ReactDOM from 'react-dom';
import { App } from '~/containers';
import { createStore, applyMiddleware, combineReducers, compose } from
'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import './index.css';
import * as reducers from './redux';
const store = createStore(
combineReducers(reducers),
compose(
applyMiddleware(thunk),
window.devToolsExtension ? window.devToolsExtension() : f => f
)
);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
The way I usually use the connect method with actions is like this.
const mapState = state => ({
propsIWantBoundToReduxStore: store.field,
});
const mapDispatch = {
actionMethod,
//in your case: getRetailerData
};
export default connect(mapState, mapDispatch)(MyComponent);
Then you could call this.props.getRetailerData() to fire off the action.
my getRetailerData method would look something like this:
export function getRetailerData() {
return {
type: 'GET_RETAILER_DATA'
};
}
I'm a beginner with React & Redux and I'm trying to set up a very simple login form & redirection.
I'll add react-router or react-router-redux later.
I don't really understand where i have to put my 'logic code' (an ajax call and a redirection).
Here is what I've write.
index.js (entry point) :
import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import App from './containers/App'
import rootReducer from './reducers/reducers'
let store = createStore(rootReducer);
let rootElement = document.getElementById('root');
render(
<Provider store={store}>
<App />
</Provider>,
rootElement
);
containers/App.js :
import { Component } from 'react'
import { connect } from 'react-redux'
import { login } from '../actions/actions'
import LoginForm from '../components/LoginForm'
class App extends Component {
render () {
const { dispatch } = this.props;
return (
<div>
<LoginForm onSubmit={(id, pass) =>
dispatch(login(id, pass))
} />
</div>
)
}
}
const mapStateToProps = (state) => {
return {
}
};
const mapDispatchToProps = (dispatch) => {
return {
}
};
export default connect(mapStateToProps)(App);
components/LoginForm.js :
import { Component, PropTypes } from 'react'
class LoginForm extends Component {
render () {
return (
<div>
<form action="#" onSubmit={(e) => this.handleSubmit(e)}>
<input type="text" ref={node => { this.login = node }} />
<input type="password" ref={node => { this.password = node }} />
<input type="submit" value="Login" />
</form>
</div>
)
}
handleSubmit(e) {
e.preventDefault();
this.props.onSubmit(this.login.value, this.password.value);
}
}
LoginForm.propTypes = {
onSubmit: PropTypes.func.isRequired
};
export default LoginForm;
reducers/root.js :
import { combineReducers } from 'redux'
import user from './user'
const rootReducer = combineReducers({
user
});
export default rootReducer;
reducers/user.js :
import { LOGIN, BAD_LOGIN, LOGOUT } from '../actions/actions'
const initialState = {
cid: null,
username: '',
logo: ''
};
const user = (state = initialState, action) => {
switch (action.type) {
case LOGIN:
const api = new loginApi; //simple version
api.login(action.login, action.password)
.done(res => {
//Right here ?
})
.fail(err => console.error(err));
return state;
case LOGOUT:
//...
return state;
default:
return state;
}
};
export default user;
actions/actions.js :
export const LOGIN = 'LOGIN';
export const LOGOUT = 'LOGOUT';
export function login(login, password) {
return {
type: LOGIN,
login,
password
}
}
following this link : http://redux.js.org/docs/advanced/AsyncActions.html
I hesitate between write my login stuff inside the reducer (but I think reducer's purpose is just to reduce the state object) or to create multiple actions with one 'main' action which call REQUEST_LOGIN and LOGIN_SUCCES / LOGIN_FAILURE for example.
Thanks.
You are correct, reducers are only for mapping data to the state. Create your async logic in the action creator. The key is to use a store enhancer to make async actions possible.
redux-thunk
redux-promise
A tutorial on async redux can be found in the redux documentation.