import React from "react";
import AddAPhotoIcon from "@material-ui/icons/AddAPhoto";
import axios from "axios";
import { BASE_URL } from "../../config/urls";
import { connect } from "react-redux";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles((theme) => ({
AddAPhotoIcon: {
height: "1rem",
marginTop: "-10px",
color: "black",
},
}));
// isOrgLogo - logo of the org
function UploadOrgLogos({ userInfo, addLogo, orgId }) {
const classes = useStyles();
return (
<form>
<label
htmlFor="file-input"
style={{
cursor: "pointer",
}}
>
<AddAPhotoIcon className={classes.AddAPhotoIcon} color="primary" />
</label>
<input
style={{
display: "none",
}}
id="file-input"
type="file"
onChange={(e) => {
if (!e.target.files[0]) return;
// if there is no user
// TODO: add toast notification
if (!userInfo || !userInfo.email) {
console.log("User is not in redux!");
}
const role = userInfo.userRole.find(
(role) => role.organization == orgId
);
if (!role || role.role != "SuperAdmin") {
alert("Not a super admin!");
return;
} else {
console.log("A super admin!");
}
let formData = new FormData();
formData.append("file", e.target.files[0]);
formData.append("folder", "org-logos");
formData.append("fileId", "org-logo");
formData.append("bucket", "vyoriusdronesdatabase");
formData.append("_id", orgId);
axios
.post(`${BASE_URL}client/add-logo-org`, formData, {
headers: {
"Content-Type": "multipart/form-data",
"x-access-token": localStorage.getItem("vyoriusUserAuth"),
},
})
.then((res) => addLogo(res.data))
.catch((err) => {
console.log(err);
alert("Error in uploading file...");
});
}}
/>
</form>
);
}
const mapStateToProps = ({ login_details }) => {
return {
userInfo: login_details.login_detail,
};
};
// HMR
export default connect(mapStateToProps, null)(UploadOrgLogos);
UploadLogoOfOrg.jsx
import React from "react";
import AddAPhotoIcon from "@material-ui/icons/AddAPhoto";
import axios from "axios";
import { BASE_URL } from "../../config/urls";
import { connect } from "react-redux";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles((theme) => ({
AddAPhotoIcon: {
height: "1rem",
marginTop: "-10px",
color: "black",
},
}));
function UploadOrgLogos({ userInfo, addLogo, orgId }) {
const classes = useStyles();
return (
<form>
<label
htmlFor="file-input"
style={{
cursor: "pointer",
}}
>
<AddAPhotoIcon className={classes.AddAPhotoIcon} color="primary" />
</label>
<input
style={{
display: "none",
}}
id="file-input"
type="file"
onChange={(e) => {
if (!e.target.files[0]) return;
// if there is no user
// TODO: add toast notification
if (!userInfo || !userInfo.email) {
console.log("User is not in redux!");
}
const role = userInfo.userRole.find(
(role) => role.organization == orgId
);
if (!role || role.role != "SuperAdmin") {
alert("Not a super admin!");
return;
} else {
console.log("A super admin!");
}
let formData = new FormData();
formData.append("file", e.target.files[0]);
formData.append("folder", "org-logos");
formData.append("fileId", "org-logo");
formData.append("bucket", "vyoriusdronesdatabase");
formData.append("_id", orgId);
axios
.post(`${BASE_URL}client/add-logo-of-org`, formData, {
headers: {
"Content-Type": "multipart/form-data",
"x-access-token": localStorage.getItem("vyoriusUserAuth"),
},
})
.then((res) => addLogo(res.data))
.catch((err) => {
console.log(err);
alert("Error in uploading file...");
});
}}
/>
</form>
);
}
const mapStateToProps = ({ login_details }) => {
return {
userInfo: login_details.login_detail,
};
};
// HMR
export default connect(mapStateToProps, null)(UploadOrgLogos);
Clicking on any one of them, the request is being sent to client/add-logo-org. If I remove <UploadLogo orgId={orgId} addLogo={addLogo} / from LogoComponent.jsx then its working fine.
Edited
If I swap <UploadLogoOfOrg orgId={orgId} addLogo={(loc) => setOrgLogo(loc)} /> with <UploadLogo orgId={orgId} addLogo={addLogo} /> then all request are being sent on /client/add-logo-of-org.
Sorry, this is quite a bit of code and it's not runnable. If it's a usage question, please ask on StackOverflow. If you think it's a React bug, please provide a minimal and runnable reproducing case. Thanks.
React version:
^16.9.0
Steps To Reproduce
Consider the below UI.
You can see a heading,
Logo Uploaded
andOrganisation logo
Logo Uploaded
are the general logo of the applicationOrganisation logo
is the single logo uploaded specific to the orgLogoComponent.jsx
UploadLogo.jsx
UploadLogoOfOrg.jsx
Clicking on any one of them, the request is being sent to
client/add-logo-org
. If I remove<UploadLogo orgId={orgId} addLogo={addLogo} /
fromLogoComponent.jsx
then its working fine.Edited
If I swap
<UploadLogoOfOrg orgId={orgId} addLogo={(loc) => setOrgLogo(loc)} />
with<UploadLogo orgId={orgId} addLogo={addLogo} />
then all request are being sent on/client/add-logo-of-org
.