How to add a background image avatar to React JS using primereact

How to add a background image avatar to React JS using primereact - javascript

I am trying to create a register page where a user can add a profile picture as well as a background picture to their profile. I have installed the PrimeReact themes and templates to my node modules. However, the avatar doesn't want to fit it to where it can make a background image avatar. Instead, it just fits it as a circle just like the profile picture avatar instead of a rectangle fit as a background image avatar.
import {useState, useEffect } from 'react'
import Avatar from 'react-avatar-edit'
import {Dialog} from 'primereact/dialog'
import {InputText} from 'primereact/inputtext'
const initialState = {
company: '',
email: '',
password: '',
isMember: true,
}
const Register = () => {
const [imagecrop, setimagecrop] = useState(false);
const [image, setImage] = useState("");
const [src, setsrc] = useState(false);
const [profile, setProfile] = useState([]);
const [pview, setpview] = useState(false);
const profileFinal = profile.map((item) => item.pview);
const onClose = () => {
setpview(null);
};
const onCrop = (view) => {
setpview(view);
};
const saveCropImage = () => {
setProfile([...profile, { pview }]);
setimagecrop(false);
}
const [values, setValues] = useState(initialState)
// global state and useNavigate
const handleChange = (e) => {
console.log(e.target)
}
const onSubmit = (e) => {
e.preventDefault()
console.log(e.target)
}
return (
<body class="page-template-default page page-id-13">
<header class="site-header">
<div class="container">
<h1 class="school-logo-text float-left"><strong>Direct</strong> Connection</h1>
<div class="site-header__util">
</div>
</div>
</header>
<div class="page-banner">
<div class="page-banner__bg-image" style={ { backgroundImage: "url('connection.jpg')" } }></div>
<div class="page-banner__content container container--narrow">
<h1 class="page-banner__title">Add Your Company</h1>
<div class="page-banner__intro">
<p></p>
</div>
</div>
</div>
<div class="container container--narrow page-section">
<h2 class="headline headline--tiny">Want to join and connect with companies? Sign up and get your company out there:</h2>
<label class="profile-pic">Profile Photo:</label>
<div class="profile-img">
<Dialog
visible={imagecrop}
header={() => (
<p htmlFor="" class="text 2xl font-semibold textColor">
</p>
)}
onHide={() => setimagecrop(false)}
></Dialog>
<div class="confirmation-content flex flex-column align-items-center">
<Avatar
width={500}
height={400}
onCrop={onCrop}
onClose={onClose}
src={src}
shadingColor={"#474649"}
backgroundColor={"#474649"}
></Avatar>
<div class="flex flex-column align-items-center mt-5 w-12">
<div class="flex justify-content-around w-12 mt-4">
</div>
</div>
<InputText
type="file"
accept='/image/*'
style={{ display: "none" }}
onChange={(event)=>{
const file = event.target.files[0];
if(file && file.type.substring(0,5)==="image"){
setImage(file);
}else{
setImage(null)
}
}}
/>
</div>
</div>
<script src="profile-pic.js"></script>
<label class="profile-back">Background Photo:</label>
<div>
<Dialog
visible={imagecrop}
header={() => (
<p htmlFor="" class="text 2xl font-semibold textColor">
</p>
)}
onHide={() => setimagecrop(false)}
></Dialog>
<Avatar
width={1000}
height={400}
onCrop={onCrop}
onClose={onClose}
src={src}
shadingColor={"#474649"}
backgroundColor={"#474649"}
></Avatar>
<InputText
type="file"
accept='/image/*'
style={{ display: "none" }}
onChange={(event)=>{
const file = event.target.files[0];
if(file && file.type.substring(0,5)==="image"){
setImage(file);
}else{
setImage(null)
}
}}
/>
<img class="background-image" src=""></img>
</div>
<div class="company-info-container page-section">
<label class="company-name">Company Name</label>
<div class="company-input">
<input text="headline headline--input" placeholder="Enter Company"></input>
</div>
<label class="company-email">Email</label>
<div class="email-input">
<input text="headline headline--input" placeholder="Enter Email"></input>
</div>
<label class="company-address">Company Address</label>
<div class="address-input">
<input text="headline headline--input" placeholder="Enter Address"></input>
</div>
<label class="company-city">City</label>
<div class="city-input">
<input text="headline headline--input" placeholder="Enter City"></input>
</div>
<label class="company-zip">Zip Code</label>
<div class="zip-input">
<input text="headline headline--input" placeholder="Enter Zip"></input>
</div>
<label class="company-password">Password</label>
<div class="password-input">
<input text="headline headline--input" placeholder="Enter Password"></input>
</div>
<label class="company-password">Retype Password</label>
<div class="reword-input">
<input text="headline headline--input" placeholder="Re Password"></input>
</div>
<label class="company-description">Tell us about your company and what you do!</label>
<div class="description-input">
<textarea rows="5" cols="80" id="TITLE" text="headline headline--input" placeholder="Description"></textarea>
</div>
</div>
<button type="button" class="btn btn--large btn--orange push-right">Add Your Company</button>
</div>
<footer class="site-footer">
<div class="site-footer__inner container container--narrow">
<div class="group">
<div class="site-footer__col-one">
<h1 class="school-logo-text school-logo-text--alt-color">
<strong>Direct</strong> Connection
</h1>
<p><a class="site-footer__link" href="index.html">706-263-0175</a></p>
</div>
</div>
</div>
</footer>
</body>
)
}
export default Register
I have tried looking at how primereact avatars can reshape the circle to rectangle to fit the image to a background image but I don't see many ways of how it can be reshaped.

Related

Use [e.target.name]=e.target.value inside object

I have this object:
const itemDataObject = {
sort: '',
title_item_lateral: '',
text_item_lateral: '',
image_lateral: [
{
title_image_lateral: '',
path_image_lateral: '',
},
],
document_lateral: '',
links: [
{
title_link: '',
link: '',
},
],
};
and i need to fill it in a form.
i use this function:
const handleChange = (i, e) => {
let itemData = [...item_lateral];
itemData[i][e.target.name]=e.target.value;
setItems(itemData);
setNewLateral({...lateral, item_lateral, title_lateral});
handleChangeChat(e); };
and this inside the form:
<div>
{item_lateral.map((input, i) => (
<>
{ !(input.button_pressed === 'image' || input.button_pressed ===
'links') &&
<div className="row align-item_lateral-center" key=
{input.button_pressed + i + 1}>
<div className="col-2 mt-3">
<h3>{input.button_pressed}</h3>
</div>
<div className="col-10">
<input
placeholder={input.button_pressed}
id={i}
className='form-control mt-3'
name={input.button_pressed}
onChange= {e => handleChange(i, e)}
type="text"
/>
</div>
</div>
}
{ input.button_pressed === 'image' &&
<>
<div className="row align-item_lateral-center row" key=
{input.button_pressed + i + 2}>
<div className="col-2">
<h3>Imagen: </h3>
</div>
<div className='col-10'>
<input
placeholder='title_image_lateral'
id={i}
className='form-control mt-3'
name='title_image_lateral'
onChange= {e => handleChange(i, e)}
type="text"
/>
</div>
</div>
<div className="row align-item_lateral-center row" key=
{input.button_pressed + i + 1}>
<div className="col-2">
<h3>Image Path: </h3>
</div>
<div className='col-10'>
<input
placeholder='path_image_lateral'
id={i}
className='form-control mt-3'
name='path_image_lateral'
onChange= {e => handleChange(i, e)}
type="text"
/>
</div>
</div>
</>
}
{input.button_pressed === 'links' &&
<>
<div className="row align-item_lateral-center row" key=
{input.button_pressed + i+2}>
<div className="col-2">
<h3>Title Link: </h3>
</div>
<div className="col-8">
<input
placeholder='titel_link'
id={i}
className='form-control mt-3'
name='titel_link'
onChange= {e => handleChange(i, e)}
type="text"
/>
</div>
</div>
<div className="row align-item_lateral-center row" key={i}>
<div className="col-2">
<h3>Link: </h3>
</div>
<div className="col-8">
<input
placeholder='link'
id={i}
className='form-control mt-3'
name='link'
onChange= {e => handleChange(i, e)}
type="text"
/>
</div>
</div>
</>
}
</>
))}
</div>
The form works onsubmit, and create values in the object with the property name, and the value.
But if the property (p.e: 'title_image_lateral'), not put the new value in the correct place in the object, instead create a new element in the root of the object: title_image_lateral: (value submited in the form).
I thik that i can change the 'root' for the itemData[i][e.target.name]=e.target.value; , but i can not achieve.
Maybe i can create state for this values, and then onsubmit the form, set in the object...but maybe is made a big surround.
Some light for my issue.
Thanks.
Here the entire file:
import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
const LateralWindow = ({token}) => {
const itemDataObject = {
sort: '',
title_item_lateral: '',
text_item_lateral: '',
image_lateral: [
{
title_image_lateral: '',
path_image_lateral: '',
},
],
document_lateral: '',
links: [
{
title_link: '',
link: '',
},
],
};
const dispatch = useDispatch();
const generalInfo = useSelector(state=> state.faqsGralInfo);
const {
description,
typeResponse,
rolViews,
workLoadLevel,
id,
id_intent,
corpusArea,
corpusName,
} = generalInfo;
const [ finalResponse, setFinalResponse ] = useState({});
const [ newJsonResponse, setNewJsonResponse ] = useState( {});
const [ title_lateral, setTitleLateral ] = useState('');
const [ item_lateral, setItems ] = useState([]);
const [ lateral, setNewLateral] = useState({
title_lateral: title_lateral,
item_lateral: [item_lateral]
});
let buttonPressed;
const [nameValue, setNameValue] = useState(['inicial']);
console.log(nameValue);
const addFields = (e) => {
e.preventDefault();
buttonPressed = e.target.value;
setNameValue(buttonPressed);
let newItemField;
newItemField = { ...itemDataObject, button_pressed: buttonPressed };
setItems([...item_lateral, newItemField]);
};
const handleChangeChat = (e) => {
setFinalResponse({...finalResponse, [e.target.name]: e.target.value});
setNewJsonResponse({
...newJsonResponse,
accesToken: token,
newDataResponse: {
description,
typeResponse,
rolViews,
workLoadLevel,
id,
id_intent,
response_json_new:{finalResponse, lateral},
corpusArea,
corpusName,
lateral_W: generalInfo.lateral_W === 'true' ? 1 : 0 ,
}
},
);
};
const handleChange = (i, e) => {
let itemData = [...item_lateral];
itemData[i][e.target.name]=e.target.value;
setItems(itemData);
setNewLateral({...lateral, item_lateral, title_lateral});
handleChangeChat(e); };
const submitForm = (e) => {
e.preventDefault();
};
const sendToCorpus = () => {
/* setTimeout(() => {
window.location = '/corpus';
}, 3000); */
};
return (
<>
<div className="card mb-3">
<div className="card-body">
<h2> Diseño Chat </h2>
<form className="row mt-4" onSubmit={submitForm} >
<div className="col-md-1 mb-4">
<label htmlFor="inputDescription" className="form-label text-center">
<h5> Título </h5>
</label>
</div>
<div className="col-md-11">
<input
type="text"
className="form-control"
name='title'
onChange={handleChangeChat}
id="inputDescription"
required
/>
</div>
<div className="col-md-1 mb-4">
<label htmlFor="inputResponse" className="form-label text-center" >
<h5> Texto </h5>
</label>
</div>
<div className="col-md-11">
<input
type="textarea"
className="form-control"
name='text'
onChange={handleChangeChat}
id="inputResponse"
required
/>
</div>
<div className="col-md-1 mb-4">
<label htmlFor="link" className="form-label text-center" >
<h5> Link </h5>
</label>
</div>
<div className="col-md-5">
<input
type="link"
className="form-control"
name="link"
onChange={handleChangeChat}
id="link"
required
/>
</div>
<div className="col-md-1">
<label htmlFor="link_title" className="form-label text-center" >
<h5> Title Link </h5>
</label>
</div>
<div className="col-md-5">
<input
type="text"
className="form-control"
name='link_title'
onChange={handleChangeChat}
id="link_title"
required
/>
</div>
<div className="col-md-1 mb-4">
<label htmlFor="image" className="form-label text-center" >
<h5> Image </h5>
</label>
</div>
<div className="col-md-5">
<input
type="file"
className="form-control"
name="image"
onChange={handleChangeChat}
id="image"
required
/>
</div>
<div className="col-md-1">
<label htmlFor="image_title" className="form-label text-center" >
<h5> Title Image </h5>
</label>
</div>
<div className="col-md-5">
<input
type="text"
className="form-control"
name='image_title'
onChange={handleChangeChat}
id="image_title"
required
/>
</div>
<div className="mt-5" >
<h3>DISEÑO VENTANA LATERAL</h3>
</div>
<h5 className="ms-5 mb-5 mt-5"> Diseña tu respuesta añadidendo subtitulos, texto, imagenes, documentos y enlaces.
Puedes seleccionarlos con el orden que mejor se ajuste a tu respuesta. Y puedes poner tantos elementos como quieras. </h5>
<div className="container">
<div className="row align-item_lateral-center" >
<div className="col-2 mt-3">
<h3>Título Ventana Lateral</h3>
</div>
<div className="col-10">
<input
placeholder= 'Título Ventana Lateral'
className='form-control mt-3'
value={title_lateral}
onChange= {e=> setTitleLateral(e.target.value)}
type="text"
/>
</div>
</div>
<div>
{item_lateral.map((input, i) => (
<>
{ !(input.button_pressed === 'image' || input.button_pressed === 'links') &&
<div className="row align-item_lateral-center" key={input.button_pressed + i + 1}>
<div className="col-2 mt-3">
<h3>{input.button_pressed}</h3>
</div>
<div className="col-10">
<input
placeholder={input.button_pressed}
id={i}
className='form-control mt-3'
name={input.button_pressed}
onChange= {e => handleChange(i, e)}
type="text"
/>
</div>
</div>
}
{ input.button_pressed === 'image' &&
<>
<div className="row align-item_lateral-center row" key={input.button_pressed + i + 2}>
<div className="col-2">
<h3>Imagen: </h3>
</div>
<div className='col-10'>
<input
placeholder='title_image_lateral'
id={i}
className='form-control mt-3'
name='title_image_lateral'
onChange= {e => handleChange(i, e)}
type="text"
/>
</div>
</div>
<div className="row align-item_lateral-center row" key={input.button_pressed + i + 1}>
<div className="col-2">
<h3>Image Path: </h3>
</div>
<div className='col-10'>
<input
placeholder='path_image_lateral'
id={i}
className='form-control mt-3'
name='path_image_lateral'
onChange= {e => handleChange(i, e)}
type="text"
/>
</div>
</div>
</>
}
{input.button_pressed === 'links' &&
<>
<div className="row align-item_lateral-center row" key={input.button_pressed + i+2}>
<div className="col-2">
<h3>Title Link: </h3>
</div>
<div className="col-8">
<input
placeholder='titel_link'
id={i}
className='form-control mt-3'
name='titel_link'
onChange= {e => handleChange(i, e)}
type="text"
/>
</div>
</div>
<div className="row align-item_lateral-center row" key={i}>
<div className="col-2">
<h3>Link: </h3>
</div>
<div className="col-8">
<input
placeholder='link'
id={i}
className='form-control mt-3'
name='link'
onChange= {e => handleChange(i, e)}
type="text"
/>
</div>
</div>
</>
}
</>
))}
</div>
<div className="mt-5 text-center">
<button className="btn btn-primary me-4 mb-4" value="text_item_lateral" onClick={addFields}>
Add Text
</button>
<button className="btn btn-primary me-4 mb-4" value="title_item_lateral" onClick={addFields}>
Add Subtitle
</button>
<button className="btn btn-primary me-4 mb-4" value="image" onClick={addFields}>
Add Image
</button>
<button className="btn btn-primary me-4 mb-4" value="document_lateral" onClick={addFields}>
Add document
</button>
<button className="btn btn-primary me-4 mb-4" value="links" onClick={addFields}>
Add Links
</button>
</div>
</div>
<div>
</div>
<div>
{(isCreated && isVariationsSave) &&
<div className="alert alert-success" role='alert'>
Respuesta CREADA Correctamente
</div>
}
{isCreated && sendToCorpus()}
</div>
<button className="btn btn-warning me-5 mb-3" type="submit" >Preview</button>
<button className="btn btn-success me-5 mb-3" type="submit">Guardar Respuesta</button>
</form>
<div className="text-center">
</div>
</div>
</div>
</>
);
};
export default LateralWindow;

Check if this suits your needs:
import { useState } from "react";
import { useSelector } from "react-redux";
const LateralWindow = ({ token }) => {
const itemDataObject = {
sort: "",
title_item_lateral: "",
text_item_lateral: "",
image_lateral: {
title_image_lateral: "",
path_image_lateral: "",
},
document_lateral: "",
links: {
title_link: "",
link: "",
},
};
const generalInfo = useSelector((state) => state.faqsGralInfo);
const { description, typeResponse, rolViews, workLoadLevel, id, id_intent, corpusArea, corpusName } = generalInfo;
const [finalResponse, setFinalResponse] = useState({});
const [newJsonResponse, setNewJsonResponse] = useState({});
const [title_lateral, setTitleLateral] = useState("");
const [item_lateral, setItems] = useState([]);
const [lateral, setNewLateral] = useState({
title_lateral: title_lateral,
item_lateral: [item_lateral],
});
let buttonPressed;
const addFields = (e) => {
e.preventDefault();
buttonPressed = e.target.value;
let newItemField;
newItemField = { ...itemDataObject, button_pressed: buttonPressed };
setItems([...item_lateral, newItemField]);
};
const handleChangeChat = (e) => {
setFinalResponse({ ...finalResponse, [e.target.name]: e.target.value });
setNewJsonResponse({
...newJsonResponse,
accesToken: token,
newDataResponse: {
description,
typeResponse,
rolViews,
workLoadLevel,
id,
id_intent,
response_json_new: { finalResponse, lateral },
corpusArea,
corpusName,
lateral_W: generalInfo.lateral_W === "true" ? 1 : 0,
},
});
};
const handleChange = (i, e) => {
let itemData = [...item_lateral];
let elementChanged = e.target;
let name = elementChanged.name;
let value = elementChanged.value;
if (name === "title_image_lateral" || name === "path_image_lateral") {
itemData[i].image_lateral[name] = value;
} else if (name === "title_link" || name === "link") {
itemData[i].links[name] = value;
} else {
itemData[i][name] = value;
}
setItems(itemData);
setNewLateral({ ...lateral, item_lateral, title_lateral });
handleChangeChat(e);
};
const submitForm = (e) => {
console.log(item_lateral);
e.preventDefault();
};
return (
<>
<div className="card mb-3">
<div className="card-body">
<h2> Diseño Chat </h2>
<form className="row mt-4" onSubmit={submitForm}>
<div className="col-md-1 mb-4">
<label htmlFor="inputDescription" className="form-label text-center">
<h5> Título </h5>
</label>
</div>
<div className="col-md-11">
<input type="text" className="form-control" name="title" value="Titulo" onChange={handleChangeChat} id="inputDescription" required />
</div>
<div className="col-md-1 mb-4">
<label htmlFor="inputResponse" className="form-label text-center">
<h5> Texto </h5>
</label>
</div>
<div className="col-md-11">
<input type="textarea" className="form-control" name="text" value="Texto" onChange={handleChangeChat} id="inputResponse" required />
</div>
<div className="col-md-1 mb-4">
<label htmlFor="link" className="form-label text-center">
<h5> Link </h5>
</label>
</div>
<div className="col-md-5">
<input type="link" className="form-control" name="link" value="link" onChange={handleChangeChat} id="link" required />
</div>
<div className="col-md-1">
<label htmlFor="link_title" className="form-label text-center">
<h5> Title Link </h5>
</label>
</div>
<div className="col-md-5">
<input type="text" className="form-control" name="link_title" value="testeLink" onChange={handleChangeChat} id="link_title" required />
</div>
<div className="col-md-1 mb-4">
<label htmlFor="image" className="form-label text-center">
<h5> Image </h5>
</label>
</div>
<div className="col-md-5">
<input type="file" className="form-control" name="image" onChange={handleChangeChat} id="image" required />
</div>
<div className="col-md-1">
<label htmlFor="image_title" className="form-label text-center">
<h5> Title Image </h5>
</label>
</div>
<div className="col-md-5">
<input
type="text"
className="form-control"
name="image_title"
value="title image"
onChange={handleChangeChat}
id="image_title"
required
/>
</div>
<div className="mt-5">
<h3>DISEÑO VENTANA LATERAL</h3>
</div>
<h5 className="ms-5 mb-5 mt-5">
Diseña tu respuesta añadidendo subtitulos, texto, imagenes, documentos y enlaces. Puedes seleccionarlos con el orden que mejor se ajuste
a tu respuesta. Y puedes poner tantos elementos como quieras.{" "}
</h5>
<div className="container">
<div className="row align-item_lateral-center">
<div className="col-2 mt-3">
<h3>Título Ventana Lateral</h3>
</div>
<div className="col-10">
<input
placeholder="Título Ventana Lateral"
className="form-control mt-3"
value={title_lateral}
onChange={(e) => setTitleLateral(e.target.value)}
type="text"
/>
</div>
</div>
<div className="mt-5 text-center">
<button className="btn btn-primary me-4 mb-4" value="text_item_lateral" onClick={addFields}>
Add Text
</button>
<button className="btn btn-primary me-4 mb-4" value="title_item_lateral" onClick={addFields}>
Add Subtitle
</button>
<button className="btn btn-primary me-4 mb-4" value="image" onClick={addFields}>
Add Image
</button>
<button className="btn btn-primary me-4 mb-4" value="document_lateral" onClick={addFields}>
Add document
</button>
<button className="btn btn-primary me-4 mb-4" value="links" onClick={addFields}>
Add Links
</button>
</div>
<div>
{item_lateral.map((input, i) => {
return (
<div key={input.button_pressed + i}>
{!(input.button_pressed === "image" || input.button_pressed === "links") && (
<div className="row align-item_lateral-center">
<div className="col-2 mt-3">
<h3>{input.button_pressed}</h3>
</div>
<div className="col-10">
<input
placeholder={input.button_pressed}
id={i}
className="form-control mt-3"
name={input.button_pressed}
onChange={(e) => handleChange(i, e)}
type="text"
/>
</div>
</div>
)}
{input.button_pressed === "image" && (
<>
<div className="row align-item_lateral-center row">
<div className="col-2">
<h3>Imagen: </h3>
</div>
<div className="col-10">
<input
placeholder="title_image_lateral"
id={i}
className="form-control mt-3"
name="title_image_lateral"
onChange={(e) => handleChange(i, e)}
type="text"
/>
</div>
</div>
<div className="row align-item_lateral-center row">
<div className="col-2">
<h3>Image Path: </h3>
</div>
<div className="col-10">
<input
placeholder="path_image_lateral"
id={i}
className="form-control mt-3"
name="path_image_lateral"
onChange={(e) => handleChange(i, e)}
type="text"
/>
</div>
</div>
</>
)}
{input.button_pressed === "links" && (
<>
<div className="row align-item_lateral-center row">
<div className="col-2">
<h3>Title Link: </h3>
</div>
<div className="col-8">
<input
placeholder="title_link"
id={i}
className="form-control mt-3"
name="title_link"
onChange={(e) => handleChange(i, e)}
type="text"
/>
</div>
</div>
<div className="row align-item_lateral-center row">
<div className="col-2">
<h3>Link: </h3>
</div>
<div className="col-8">
<input
placeholder="link"
id={i}
className="form-control mt-3"
name="link"
onChange={(e) => handleChange(i, e)}
type="text"
/>
</div>
</div>
</>
)}
</div>
);
})}
</div>
</div>
<div></div>
<div>
{isCreated && isVariationsSave && (
<div className="alert alert-success" role="alert">
Respuesta CREADA Correctamente
</div>
)}
{isCreated && sendToCorpus()}
</div>
<button className="btn btn-warning me-5 mb-3" type="submit">
Preview
</button>
<button className="btn btn-success me-5 mb-3" type="submit">
Guardar Respuesta
</button>
</form>
<div className="text-center"></div>
</div>
</div>
</>
);
};
export default LateralWindow;

How to render new page with react-router-dom in a function?

I am creating an application where I am getting a parameter from a function and if the parameter equals true I would render a new route instead.
I know how to use react-router-dom as to render new routes you would use something like this
<Link to="/login">Login</Link>
But I don't know how to call it in a function.
function functionName(success){
if (success){
//What do I write here?
// Something like go to path="/login"
}
}
Thank you
(edit)
import { useContext, useState, useEffect } from "react";
import { AuthContext } from "../../Context Api/authenticationAPI";
import { FaUserPlus } from "react-icons/fa";
import { Link, useHistory } from "react-router-dom";
import Alerts from "./Alerts";
const Register = () => {
const history = useHistory();
const { addUser } = useContext(AuthContext);
const data = useContext(AuthContext).data;
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
useEffect(() => {
console.log(data);
if (data.success) {
history.push("/login");
}
}, [data]);
return (
<div className="row mt-5">
<div className="col-md-6 m-auto">
<div className="card card-body">
<h1 className="text-center mb-3">
<i>
<FaUserPlus />
</i>{" "}
Register
</h1>
<Alerts />
<form>
<div className="mb-2">
<label>Name</label>
<input
type="name"
id="name"
name="name"
className="form-control"
placeholder="Enter Name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</div>
<div className="mb-2">
<label>Email</label>
<input
type="email"
id="email"
name="email"
className="form-control"
placeholder="Enter Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div className="mb-2">
<label>Password</label>
<input
type="password"
id="password"
name="password"
className="form-control"
placeholder="Create Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</div>
<button
onClick={(e) => {
e.preventDefault();
addUser({ name, email, password });
}}
className="btn btn-primary col-12"
>
Register
</button>
<p className="lead mt-4">
Have An Account? <Link to="/login">Login</Link>
</p>
</form>
</div>
</div>
</div>
);
};
export default Register;
import React from "react";
import { Link } from "react-router-dom";
import { FaSignInAlt } from "react-icons/fa";
const Login = () => {
return (
<div className="row mt-5">
<div className="col-md-6 m-auto">
<div className="card card-body">
<h1 className="text-center mb-3">
<i>
<FaSignInAlt />
</i>{" "}
Login
</h1>
<div className="mb-2">
<label>Email</label>
<input
type="email"
id="email"
name="email"
className="form-control"
placeholder="Enter Email"
/>
</div>
<div className="mb-2">
<label>Password</label>
<input
type="password"
id="password"
name="password"
className="form-control"
placeholder="Enter Password"
/>
</div>
<button className="btn btn-primary col-12">Login</button>
<p className="lead mt-4">
No Account? <Link to="/register">Register</Link>
</p>
</div>
</div>
</div>
);
};
export default Login;

You can make use of the history object and programmatically navigate using history.push()
import { useHistory } from 'react-router-dom'
const history = useHistory();
function functionName(success){
if (success) {
history.push('/login')
}
}
Reference
useHistory Hook

React-select cannot read property value of undefined

I'm trying to implement 'react-select' but I am getting a 'TypeError: Cannot read property 'value' of undefined'. I am using react and react hooks. Although the demo usage uses a class component I am using a function component in this case. What am I doing wrong and how can I fix this?
job_req_titles is an object array with titles label: and value:
https://github.com/JedWatson/react-select
import React, { useState } from 'react';
import Select from 'react-select';
export default function CandidateForm({ handleCreate, job_req_titles }) {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [phone, setPhone] = useState('');
const [facebook, setFacebook] = useState('');
const [github, setGithub] = useState('');
const [linkedin, setLinkedin] = useState('');
const [jobTitle, setJobTitle] = useState('');
const [company, setCompany] = useState('');
const [appJobReq, setAppJobReq] = useState('');
const prepareCandidateObj = () => {
// Prepare the candidate object
let candidate = {
name,
email,
phone,
facebook,
github,
linkedin,
jobTitle,
company,
appJobReq,
};
console.log(candidate);
// Pass in the postNewCandidate from the parent component
// to be called in this component
handleCreate(candidate);
// alert('Candidate Submitted!');
};
return (
<div className='container'>
<div className='row'>
<label className='name'>Name</label>
</div>
<div className='row'>
<input
className='name-input'
type='text'
placeholder='Carol Caroller'
value={name}
onChange={(e) => setName(e.target.value)}
/>
</div>
<div className='row'>
<label className='email'>Email</label>
</div>
<div className='row'>
<input
className='email-input'
placeholder='example#email.com'
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div className='row'>
<label className='phone'>Phone</label>
</div>
<div className='row'>
<input
className='phone-input'
placeholder='(201) 534 2233'
value={phone}
onChange={(e) => setPhone(e.target.value)}
/>
</div>
<div className='row'>
<label className='facebook'>Facebook</label>
</div>
<div className='row'>
<input
className='facebook-input'
placeholder='https://www.facebook.com/DilaonRion/'
value={facebook}
onChange={(e) => setFacebook(e.target.value)}
></input>
</div>
<div className='row'>
<label className='linkedin'>Linkedin</label>
</div>
<div className='row'>
<input
className='linkedin-input'
placeholder='https://www.linkedin.com/DillonRion/'
value={linkedin}
onChange={(e) => setLinkedin(e.target.value)}
></input>
</div>
<div className='row'>
<label className='github'>Github</label>
</div>
<div className='row'>
<input
className='github-input'
placeholder='https://www.github.com/DilonRion/'
value={github}
onChange={(e) => setGithub(e.target.value)}
></input>
</div>
<div className='row'>
<label className='job-title'>Job Title</label>
</div>
<div className='row'>
<input
className='job-title-input'
type='text'
placeholder='Frontend Developer'
value={jobTitle}
onChange={(e) => setJobTitle(e.target.value)}
></input>
</div>
<div className='row'>
<label className='current-company'>Current Company Name</label>
</div>
<div className='row'>
<input
className='current-company-input'
type='text'
placeholder='Obrien LLC'
value={company}
onChange={(e) => setCompany(e.target.value)}
></input>
</div>
<div className='row'>
<label className='job-req'>Applicant Job Req</label>
</div>
<div className='row'>
<div className='job-req-input'>
<Select
className='job-req-select'
value={appJobReq}
onChange={(e) => setAppJobReq(e.target.value)}
options={job_req_titles}
isMulti
/>
</div>
</div>
{/* <div className='row'>
<label className='cv'>CV</label>
</div> */}
<div className='row'>
<label className='applied'>Applied or Sourced</label>
<select className='applied-input'>
<option disabled defaultValue>
--
</option>
<option value='1'>Applied</option>
<option value='0'>Sourced</option>
</select>
</div>
<button className='create-button' onClick={prepareCandidateObj}>
Create
</button>
</div>
);
}

adding this fixed the error.
const handleChange = (selectedOption) => {
setAppJobReq(selectedOption);
console.log(`Option selected:`, selectedOption);
};
<div className='job-req-input'>
<Select
className='job-req-select'
value={appJobReq}
onChange={handleChange}
options={job_req_titles}
isMulti
classNamePrefix='select'
/>
</div>

state uses with authentication

i'm new in coding and i I still have a problem with if else condition, i have 2 authentication and one back end , one for react native and one for react ,
in Login i want to add is_store , i want to tell the system that if the username & password correct and is_sore = true , make him logged in and if the password right and the username right BUT is_store = false don't logged him in
i'm trying to pass is_store to Login component
i tried if condition but it give me wrong alert
Signup component
class RegistationForm extends Component {
state = {
username: "",
phone_number: "",
password: "",
email: "",
is_store: true <--- i want to pass it to Login
};
componentWillUnmount() {
this.props.errors.length && this.props.resetError();
}
changeHandler = e => {
this.setState({ [e.target.name]: e.target.value });
};
submitHandler = async e => {
e.preventDefault();
this.props.signup(this.state, this.props.history);
};
render() {
return (
<div className="container">
<div
style={{ marginTop: "125px" }}
className="card o-hidden border-0 shadow-lg col-12"
>
<div className="card-body p-0">
<div className="row">
<div className="col-lg-5 d-none d-lg-block bg-register-image col-12" />
<div className="col-lg-7 col-12">
<div className="p-5">
<div className="text-center col-12">
<h1 className="h4 text-gray-900 mb-4 col-12">
إنشاء حساب جديد
</h1>
</div>
<div className="text-center col-12">
{!!this.props.errors.length && (
<div className="text-left alert alert-danger">
{this.props.errors.map(error => (
<li key={error}>{error}</li>
))}
</div>
)}
</div>
<form onSubmit={this.submitHandler}>
<div className="form-group row">
<div className="col-sm-6 mb-3 mb-sm-0">
<Input
name="username"
value={this.state.username}
onChange={this.changeHandler}
className="form-control form-control-user"
placeholder=" السجل التجاري"
required
/>
</div>
<div className="col-sm-6 mb-3 mb-sm-0">
<Input
name="phone_number"
value={this.state.phone_number}
type="tel"
onChange={this.changeHandler}
className="form-control form-control-user"
placeholder="Mobile Ex: 966555555555"
required
pattern="[0-9]{12}"
/>
</div>
<br />
<br />
<div className="col-sm-6 mb-3 mb-sm-0">
<Input
name="password"
value={this.state.password}
onChange={this.changeHandler}
type="password"
className="form-control form-control-user"
placeholder="الرقم السري"
required
/>
</div>
<div className="col-sm-6 mb-3 mb-sm-0 ">
<Input
name="email"
value={this.state.email}
onChange={this.changeHandler}
type="email"
className="form-control form-control-user"
placeholder="الإيميل"
required
/>
</div>
<div className="col-12">
<button
style={{ padding: 9, marginTop: 20 }}
type="submit"
className="btn btn-success col-12 "
>
إنشئ حساب
</button>
</div>
</div>
</form>
<div className="text-center">
<Link to="/login" className="small">
املك حساب من قبل: تسجيل الدخول
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
Login component
class Login extends Component {
state = {
username: "",
password: "",
is_store: false <-- is here the right place?
};
componentWillUnmount() {
this.props.errors.length && this.props.resetError();
}
changeHandler = e => {
this.setState({ [e.target.name]: e.target.value });
};
submitHandler = async e => {
e.preventDefault();
## here is what i'm trying to do with is_store
if (this.state.is_store === true) {
this.props.login(this.state, this.props.history);
} else {
alert("Wrong");
}
};
render() {
return (
<div className="container">
<div className="row justify-content-center" style={{ marginTop: 125 }}>
<div className="col-xl-10 col-lg-12 col-md-9">
<div className="card o-hidden border-0 shadow-lg my-5">
<div className="card-body p-0">
<div className="row">
<div className="col-lg-6 d-none d-lg-block bg-login-image" />
<div className="col-lg-6">
<div className="p-5">
<div className="text-left">
<h1 className="h4 text-gray-900 mb-4">تسجيل الدخول</h1>
{!!this.props.errors.length && (
<div className="alert alert-danger" role="alert">
{this.props.errors.map(error => (
<li key={error}>{error}</li>
))}
</div>
)}
</div>
<form onSubmit={this.submitHandler}>
<div
className="form-group col-12"
style={{ padding: 0 }}
>
<Input
name="username"
className="form-control form-control-user"
onChange={this.changeHandler}
value={this.state.username}
placeholder="رقم السجل التجاري"
/>
</div>
<div
className="form-group col-12"
style={{ padding: 0 }}
>
<Input
type="password"
className="form-control form-control-user"
name="password"
value={this.state.passsword}
onChange={this.changeHandler}
placeholder="الرقم السري"
/>
</div>
<button
style={{ padding: 9 }}
type="submit"
className="btn btn-primary col-12"
>
دخول
</button>
<hr />
</form>
<hr />
<div className="text-center">
<NavLink to={`/signup`}>إنشاء حساب جديد</NavLink>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
this is authentication actions
export const login = (userData, history) => {
return async dispatch => {
try {
let response = await instance.post("user/login/", userData);
let user = response.data;
setAuthToken(user.token);
let decodedUser = jwt_decode(user.token);
dispatch(setCurrentUser(decodedUser));
history.push("/home");
} catch (error) {
console.log("error", error);
dispatch(setErrors(error.response.data));
}
};
};
thank you

In general, You can pass a state to a child component only. You can not pass a state from a child to its parent component.
In order to pass state to a parent component, you need to store that value. You can do it with Redux. Which stores the values and you can get that value in any component.

React ReduxForm img upload and validation

I'm trying to create an img uploader inside my ReduxForm that will only accept imgs that are .png and no larger than 210x210 and 2mb. Also, the design says to swap the placeholder img with the uploaded file which I'm also struggling with. Here's my code:
renderProfileImgUpload(field) {
const { meta: { touched, error }, label, name, accept, type } = field;
return (
<div>
<div className="login__fieldError">
<small>{touched ? error : ''}</small>
</div>
<label htmlFor="img-upload">
<img src="imgs/profile-select.png" className="img-responsive" alt="" />
</label>
<input type={type} name={name} accept={accept} id="img-upload" />
</div>
)
}
render() {
const { handleSubmit, showNextRegistration, showPreviousRegistration } = this.props;
return (
<div className="widgetFull--white">
<div className="align-middle row registration--fullHeight">
<div className="columns small-3">
<img
src="imgs/account-arrow-left.png"
alt="menu"
className="img-responsive"
onClick={showPreviousRegistration}
/>
</div>
<div className="columns small-6">
<h2 className="registration__header">Edit account</h2>
</div>
<div className="columns small-3">
<h3 className="registration__index">2 of 2</h3>
</div>
<form onSubmit={ handleSubmit(this.onSubmit.bind(this)) }>
<div className="columns small-3">
<Field label="Profile Image" type="file" name="image" accept="image/.png" component={this.renderProfileImgUpload} />
</div>
<div className="columns small-6">
<Field label="Username" type="screenname" name="screenname" component={this.renderUsernameField} />
</div>
<div className="columns small-6">
<Field label="First Name" type="firstName" name="firstName" component={this.renderFirstNameField} />
</div>
<div className="columns small-6">
<Field label="Last Name" type="lastName" name="lastName" component={this.renderLastNameField} />
</div>
<div className="columns small-12">
<button className="button expanded registration__btn" type="button">Next</button>
</div>
</form>
</div>
</div>
)
}
Currently I'm unsure whether it would be better to try and do the validation when uploading the img, or inside the handle submit function. Thanks for your help!

We Keep Coding

JavaScript is the programming language of the Web.

How to add a background image avatar to React JS using primereact - javascript

Related

Use [e.target.name]=e.target.value inside object

How to render new page with react-router-dom in a function?

React-select cannot read property value of undefined

state uses with authentication

React ReduxForm img upload and validation

Categories

Resources