react-bootstrap#Spinner JavaScript Examples
The following examples show how to use
react-bootstrap#Spinner.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Spinner.js From tclone with MIT License | 6 votes |
|
export default function (color) {
return (
<Col className="d-flex justify-content-center py-5">
<Spinner variant="primary" animation="border" role="status">
<span className="sr-only">Loading...</span>
</Spinner>
</Col>
)
}
Example #2
| Source File: SpinnerCentered.js From serverless-media-portal with MIT License | 6 votes |
|
export default function SpinnerCentered() {
return (
<div style={{display: "flex", justifyContent: "center", alignItems: "center", height: "100vh"}}>
<Spinner
animation="border"
role="status"
/>
</div>
);
}
Example #3
| Source File: index.js From Webiu with MIT License | 6 votes |
|
Spinners = ({ spinner, animation, variant, size, image, icon }) => {
return (
<div className="spinner-component">
{image ?
<div>
<img src={image} alt="logo" className="preloader img-fluid" />
</div>
: null}
{icon ?
<div className="loader">
<FontAwesomeIcon className="center" icon={faSpinner} />
</div>
: null}
{spinner ?
<Spinner className="bootstrap-spinner" animation={animation} variant={variant} size={size} />
: null}
</div>
)
}
Example #4
| Source File: with-loading.js From what-front with MIT License | 6 votes |
|
WithLoading = ({
isLoading,
children,
className,
animation,
variant,
}) => (isLoading
? (
<Spinner
animation={animation}
variant={variant}
className={classNames(className, { [styles.default]: !variant })}
/>
) : children
)
Example #5
| Source File: Loader.js From mern_library_nginx with MIT License | 6 votes |
|
Loader = () => {
return (
<Spinner
animation="border"
role="status"
style={{
width: "200px",
height: "200px",
margin: "auto",
display: "block",
}}
>
<span className="sr-only">Loading....</span>
</Spinner>
);
}
Example #6
| Source File: show.js From RC4Community with Apache License 2.0 | 5 votes |
|
function RCform({ formId, fw }) {
const { form, isLoading, isError } = getFormData(formId);
if (isLoading) return <Spinner />;
if (isError) return <Error />;
const handleSubmit = (e) => {
e.preventDefault();
console.log("form submitted", e);
};
return (
<Card style={{ width: fw }} className={styles.showCard}>
<Card.Title className={styles.showTitle}>{form.title}</Card.Title>
<Card.Body>
<Form onSubmit={handleSubmit}>
{form.data?.attributes.formQs.map((ele, i) => (
<Form.Group key={i} className="mb-3" controlId="formBasicEmail">
<Form.Label>{ele.value}</Form.Label>
{ele.type == "number" ? (
<>
<Form.Control
key={i}
type={ele.type}
min={ele.min}
max={ele.max}
placeholder=""
required={ele.required}
/>
<Form.Text className="text-muted">
* Value must be in range {ele.min} - {ele.max}
</Form.Text>
</>
) : (
<Form.Control
key={i}
type={ele.type}
placeholder=""
required={ele.required}
/>
)}
{ele.type == "number"}
</Form.Group>
))}
<Button variant="primary" o type="submit">
Submit
</Button>
</Form>
</Card.Body>
</Card>
);
}
Example #7
| Source File: ipfs.js From RC4Community with Apache License 2.0 | 5 votes |
|
IpfsAdder = ({ showText }) => {
const [fileUrl, updateFileUrl] = useState(``);
const [cid, setCID] = useState("");
const [adding, setAdding] = useState(false);
const hiddenInput = useRef(null);
const getIPFS = async (e) => {
try {
setAdding(true);
const file = e.target.files[0];
const ipfs = await IPFS.create({ repo: "ok" + Math.random() });
console.log("ipfs", ipfs);
const { cid } = await ipfs.add(file);
const url = `https://ipfs.io/ipfs/${cid.toString()}`;
updateFileUrl(url);
setCID(cid.toString());
setAdding(false);
} catch (e) {
setAdding(false);
console.error("An error occurred while uploading media", e);
}
};
const handleInputClick = (event) => {
hiddenInput.current.click();
};
return (
<div className="mx-auto">
<Stack direction="vertical" gap={2}>
<Stack direction="horizontal" gap={2}>
<Button disabled={adding} onClick={handleInputClick}>
{adding ? (
<Spinner
as="span"
animation="border"
size="sm"
role="status"
aria-hidden="true"
/>
) : (
showText
)}
</Button>
<input
type="file"
style={{ display: "none" }}
ref={hiddenInput}
accept="image/*"
capture="camera"
onChange={getIPFS}
/>
{cid && <Copy cid={cid} />}
</Stack>
{fileUrl && <PreviewImage srcUrl={fileUrl} />}
</Stack>
</div>
);
}
Example #8
| Source File: RelatedVideosPane.js From serverless-media-portal with MIT License | 5 votes |
|
export function RelatedVideosPane() {
const [isLoading, setIsLoading] = useState(true);
const [videos, setVideos] = useState([]);
useEffect(() => {
getVideos();
}, []);
const getVideos = async () => {
const res = await authGet("http://localhost:3001/dev/listRandomVideos?count=5");
if (res && res.videos) {
setVideos(res.videos);
}
setIsLoading(false);
};
return (
<>
<style>{`
.related-videos-title {
margin-bottom: 14px;
color: #8c8fa4;
}
`}</style>
<h5 className="related-videos-title">Related videos</h5>
{isLoading ? (
<div className="text-center mt-5">
<Spinner animation="grow" />
</div>
) : (
videos.map(video => (
<RelatedVideoThumbnail key={video.VideoHash}
videoHash={video.VideoHash}
title={video.Title}
date={video.VideoDate}
thumbnailName={video.ThumbnailName}
duration={video.Duration}
/>
))
)}
</>
);
}
Example #9
| Source File: AddTagModal.js From serverless-media-portal with MIT License | 5 votes |
|
export function AddTagModal({ isOpen, close }) {
const [isLoading, setIsLoading] = useState(false);
const { addToast } = useToasts();
const onSubmit = async e => {
e.preventDefault();
setIsLoading(true);
const uploadResult = await performFormUpload(e.target);
setIsLoading(false);
if (uploadResult.success) {
addNotification("Tag added", "success");
close(true);
} else {
console.error(uploadResult.message);
addNotification(uploadResult.message, "error");
}
};
const performFormUpload = async target => {
const formData = Object.fromEntries(new FormData(target).entries());
const res = await authPost("http://localhost:3001/dev/addTag", {
formData: {
Tag: formData.tag
}
});
return res;
};
const addNotification = (msg, type) => {
addToast(msg, {
appearance: type,
autoDismiss: true
});
};
return (
<Modal show={isOpen} onHide={close} backdrop="static" centered animation={false}>
<Modal.Header closeButton>
<Modal.Title>Add Tag</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form onSubmit={onSubmit} id="upload-form" className="w-100">
<Form.Row>
<Form.Label column xs={3}>Tag:</Form.Label>
<Col>
<Form.Control name="tag" type="text" required />
</Col>
</Form.Row>
<hr />
<Form.Row style={{ flexWrap: "nowrap" }}>
<Button variant="success" type="submit" className="w-25">
{isLoading ? (
<Spinner animation="border" size="sm" />
) : (
"Submit"
)}
</Button>
</Form.Row>
</Form>
</Modal.Body>
</Modal>
);
}
Example #10
| Source File: AuthWrapper.js From serverless-media-portal with MIT License | 5 votes |
|
export function AuthWrapper(props) {
const [isLoading, setIsLoading] = useState(true);
const [isAuthorized, setIsAuthorized] = useState(false);
const [hasFailedLoginAttempts, setHasFailedLoginAttempts] = useState(false);
useEffect(async () => {
processLogin(false);
}, []);
const processLogin = async (userInitiatedLogin, hash = undefined) => {
try {
setIsLoading(true);
if (await logUserIn(hash)) {
setIsAuthorized(true);
} else if (userInitiatedLogin) {
setHasFailedLoginAttempts(true);
}
setIsLoading(false);
} catch (e) {
console.error(e);
}
};
const style = {
centered: {
position: "absolute",
left: "50%",
top: "40%"
}
};
return (
<div>
{isLoading ? (
<Spinner
animation="border"
role="status"
style={style.centered}
/>
) : !isAuthorized ? (
<Login
processLogin={processLogin}
hasFailedLoginAttempts={hasFailedLoginAttempts}
/>
) : (
{ ...props.children }
)}
</div>
);
}
Example #11
| Source File: CommentPane.js From serverless-media-portal with MIT License | 5 votes |
|
export function CommentPane({ videoHash, isUserAnAdmin }) {
const [isLoading, setIsLoading] = useState(true);
const [commentList, setCommentList] = useState([]);
const { addToast } = useToasts();
const userHash = getSavedHashFromLocalStorage();
useEffect(() => {
loadComments();
}, []);
const loadComments = async () => {
setIsLoading(true);
const res = await authGet(`http://localhost:3001/dev/getCommentsForVideo?videoHash=${videoHash}`);
if (res && res.success && res.comments) {
setCommentList(res.comments);
}
setIsLoading(false);
};
const onCommentAdded = async () => {
await loadComments();
};
const deleteComment = async (commentHash) => {
const res = await authGet(
`http://localhost:3001/dev/deleteCommentFromVideo?videoHash=${videoHash}&commentHash=${commentHash}`
);
if(res.success) {
addToast("Comment deleted", {
appearance: "success",
autoDismiss: true
});
} else {
setCommentList([]); // Force refresh of comments to remove opacity
addToast("Error deleting comment", {
appearance: "error",
autoDismiss: true
});
console.error(res.message);
}
await loadComments();
};
return (
<CommentContainer>
<CommentHeader>{commentList.length} {commentList.length === 1 ? "Comment" : "Comments"}</CommentHeader>
<CommentForm
videoHash={videoHash}
onCommentAdded={onCommentAdded}
/>
<CommentList>
{!isLoading || (
<SpinnerContainer>
<Spinner animation="border" size="sm" />
</SpinnerContainer>
)}
{commentList.sort(x => x.CreatedOn).reverse().map(c => (
<Comment
key={c.CommentHash}
commentHash={c.CommentHash}
displayName={c.UserDisplayName}
commentText={c.CommentText}
dateCreated={c.CreatedOn}
onDeleteCommentClicked={deleteComment}
canUserDeleteComment={c.UserHash === userHash || isUserAnAdmin}
/>
))}
</CommentList>
</CommentContainer>
);
}
Example #12
| Source File: InternshipGroupedByStream.js From easy-job-intern with MIT License | 4 votes |
|
InternshipsGroupedByStream = () => {
const { state, dispatch } = useContext(UserContext);
const [internships, setInternships] = useState([]);
const [loading, setLoading] = useState(true);
// const { location } = useParams();
// console.log(internships);
// console.log(state);
useEffect(() => {
axios({
method: "get",
url: `http://localhost:5000/user/internship/stream`,
headers: {
Authorization: "Bearer " + localStorage.getItem("jwt"),
},
})
.then((res) => {
// console.log(res);
setLoading(false);
if (res.data.error) {
// console.log(res.data.error);
// alert(res.data.error);
const notify = () => toast(res.data.error);
notify();
} else {
// console.log(res.data.internships);
setInternships(res.data.internships);
console.log(internships);
}
})
.catch((err) => {
setLoading(false);
console.log("Error: ", err);
});
}, []);
// console.log(internships);
console.log(internships[0]);
if (internships && internships[4]) {
// console.log(internships[4]);
const t = new Date(internships[4].startDate).toString("YYYY-MM-DD");
// console.log(t);
}
const deletePost = (postId) => {
axios({
method: "delete",
url: "http://localhost:5000/employer/delete-internship",
data: {
postId,
},
headers: {
Authorization: "Bearer " + localStorage.getItem("jwt"),
"Content-Type": "application/json",
},
})
.then((res) => {
// console.log(res);
if (res.data.error) {
console.log(res.data.error);
// alert(res.data.error);
const notify = () => toast(res.data.error);
notify();
} else {
console.log(res.data.internships);
setInternships(res.data.internships);
console.log(internships);
const notify = () => toast(res.data.message);
notify();
}
})
.catch((err) => {
console.log("Error: ", err);
});
};
return (
<div className="internshipsOuterContainer">
<Toaster />
{loading ? (
<div className="h-100 w-100 d-flex justify-content-center align-items-center">
<Spinner
animation="border"
variant="light"
style={{
borderColor: "#515b66",
borderRightColor: "transparent",
}}
/>
</div>
) : internships && !internships.length > 0 ? (
<Alert
variant="danger"
className="w-100 "
style={{
backgroundColor: "#343A40",
border: "none",
color: "#ffc107",
}}
>
No internships available right now
</Alert>
) : (
internships &&
internships.map((intern) => (
<div key={intern._id}>
<h1 className="parameter">{intern._id}</h1>
<Row className="justify-content-xl-start justify-content-lg-around justify-content-sm-center">
{intern.internships &&
intern.internships.map((internship) => {
// console.log(internship.createdBy._id, state.user._id);
return (
<Col
key={internship._id}
className="col-xl-4 col-lg-5 col-md-6 col-sm-11 col-12 colPost"
>
{/* {internship.companyName} */}
<InternshipCard
internship={internship}
userId={state.user._id}
deletePost={deletePost}
/>
</Col>
);
})}
{/* )} */}
</Row>
</div>
))
)}
</div>
);
}
Example #13
| Source File: InternshipsGroupedByLoction.js From easy-job-intern with MIT License | 4 votes |
|
InternshipsGroupedByLocation = () => {
const { state, dispatch } = useContext(UserContext);
const [internships, setInternships] = useState([]);
const [loading, setLoading] = useState(true);
// const { location } = useParams();
// console.log(internships);
// console.log(state);
useEffect(() => {
axios({
method: "get",
url: `http://localhost:5000/user/internship/location`,
headers: {
Authorization: "Bearer " + localStorage.getItem("jwt"),
},
})
.then((res) => {
// console.log(res);
setLoading(false);
if (res.data.error) {
// console.log(res.data.error);
// alert(res.data.error);
const notify = () => toast(res.data.error);
notify();
} else {
// console.log(res.data.internships);
setInternships(res.data.internships);
console.log(internships);
}
})
.catch((err) => {
setLoading(false);
console.log("Error: ", err);
});
}, []);
// console.log(internships);
console.log(internships[0]);
if (internships && internships[4]) {
// console.log(internships[4]);
const t = new Date(internships[4].startDate).toString("YYYY-MM-DD");
// console.log(t);
}
const deletePost = (postId) => {
axios({
method: "delete",
url: "http://localhost:5000/employer/delete-internship",
data: {
postId,
},
headers: {
Authorization: "Bearer " + localStorage.getItem("jwt"),
"Content-Type": "application/json",
},
})
.then((res) => {
// console.log(res);
if (res.data.error) {
console.log(res.data.error);
// alert(res.data.error);
const notify = () => toast(res.data.error);
notify();
} else {
console.log(res.data.internships);
setInternships(res.data.internships);
console.log(internships);
const notify = () => toast(res.data.message);
notify();
}
})
.catch((err) => {
console.log("Error: ", err);
});
};
return (
<div className="internshipsOuterContainer">
<Toaster />
{loading ? (
<div className="h-100 w-100 d-flex justify-content-center align-items-center">
<Spinner
animation="border"
variant="light"
style={{
borderColor: "#515b66",
borderRightColor: "transparent",
}}
/>
</div>
) : internships && !internships.length > 0 ? (
<Alert
variant="danger"
className="w-100 "
style={{
backgroundColor: "#343A40",
border: "none",
color: "#ffc107",
}}
>
No internships available right now
</Alert>
) : (
internships &&
internships.map((intern) => (
<div key={intern._id}>
<h1 className="parameter">{intern._id}</h1>
<Row className="justify-content-xl-start justify-content-lg-around justify-content-sm-center">
{intern.internships &&
intern.internships.map((internship) => {
// console.log(internship.createdBy._id, state.user._id);
return (
<Col
key={internship._id}
className="col-xl-4 col-lg-5 col-md-6 col-sm-11 col-12 colPost"
>
{/* {internship.companyName} */}
<InternshipCard
internship={internship}
userId={state.user._id}
deletePost={deletePost}
/>
</Col>
);
})}
{/* )} */}
</Row>
</div>
))
)}
</div>
);
}
Example #14
| Source File: InternshipsGroupedByIndustry.js From easy-job-intern with MIT License | 4 votes |
|
InternshipsGroupedByIndustry = () => {
const { state, dispatch } = useContext(UserContext);
const [internships, setInternships] = useState([]);
const [loading, setLoading] = useState(true);
// const { location } = useParams();
// console.log(internships);
// console.log(state);
useEffect(() => {
axios({
method: "get",
url: `http://localhost:5000/user/internship/industry`,
headers: {
Authorization: "Bearer " + localStorage.getItem("jwt"),
},
})
.then((res) => {
// console.log(res);
setLoading(false);
if (res.data.error) {
// console.log(res.data.error);
// alert(res.data.error);
const notify = () => toast(res.data.error);
notify();
} else {
// console.log(res.data.internships);
setInternships(res.data.internships);
console.log(internships);
}
})
.catch((err) => {
setLoading(false);
console.log("Error: ", err);
});
}, []);
if (internships && internships[4]) {
// console.log(internships[4]);
const t = new Date(internships[4].startDate).toString("YYYY-MM-DD");
// console.log(t);
}
const deletePost = (postId) => {
axios({
method: "delete",
url: "http://localhost:5000/employer/delete-internship",
data: {
postId,
},
headers: {
Authorization: "Bearer " + localStorage.getItem("jwt"),
"Content-Type": "application/json",
},
})
.then((res) => {
// console.log(res);
if (res.data.error) {
console.log(res.data.error);
// alert(res.data.error);
const notify = () => toast(res.data.error);
notify();
} else {
// console.log(res.data.internships);
// setInternships(res.data.internships);
// console.log(internships);
const notify = () => toast(res.data.message);
notify();
window.location.reload(false);
}
})
.catch((err) => {
console.log("Error: ", err);
});
};
return (
<div className="internshipsOuterContainer">
<Toaster />
{loading ? (
<div className="h-100 w-100 d-flex justify-content-center align-items-center">
<Spinner
animation="border"
variant="light"
style={{
borderColor: "#515b66",
borderRightColor: "transparent",
}}
/>
</div>
) : internships && !internships.length > 0 ? (
<Alert
variant="danger"
className="w-100 "
style={{
backgroundColor: "#343A40",
border: "none",
color: "#ffc107",
}}
>
No internships available right now
</Alert>
) : (
internships &&
internships.map((intern) => (
<div key={intern._id}>
<h1 className="parameter">{intern._id}</h1>
<Row className="justify-content-xl-start justify-content-lg-around justify-content-sm-center">
{intern.internships &&
intern.internships.map((internship) => {
// console.log(internship.createdBy._id, state.user._id);
return (
<Col
key={internship._id}
className="col-xl-4 col-lg-5 col-md-6 col-sm-11 col-12 colPost"
>
<InternshipCard
internship={internship}
userId={state.user._id}
deletePost={deletePost}
/>
</Col>
);
})}
{/* )} */}
</Row>
</div>
))
)}
</div>
);
}
Example #15
| Source File: JobsGroupedByIndustry.js From easy-job-intern with MIT License | 4 votes |
|
JobsGroupedByIndustry = () => {
const { state, dispatch } = useContext(UserContext);
const [jobs, setJobs] = useState([]);
const [loading, setLoading] = useState(true);
// useEffect(() => {
// axios({
// method: "get",
// url: "http://localhost:5000/user/all-jobs",
// headers: {
// Authorization: "Bearer " + localStorage.getItem("jwt"),
// },
// })
// .then((res) => {
// console.log(res);
// if (res.data.error) {
// console.log(res.data.error);
// // alert(res.data.error);
// const notify = () => toast(res.data.error);
// notify();
// } else {
// // if (res && res.data) {
// console.log(res.data.jobs);
// setJobs(res.data.jobs);
// console.log(jobs);
// // }
// }
// })
// .catch((err) => {
// console.log("Error: ", err);
// });
// }, []);
useEffect(() => {
axios({
method: "get",
url: "http://localhost:5000/user/job/industry",
headers: {
Authorization: "Bearer " + localStorage.getItem("jwt"),
},
})
.then((res) => {
// console.log(res);
setLoading(false);
if (res.data.error) {
// console.log(res.data.error);
// alert(res.data.error);
const notify = () => toast(res.data.error);
notify();
} else {
// console.log(res.data.jobs);
setJobs(res.data.jobs);
// console.log(jobs);
}
})
.catch((err) => {
setLoading(false);
// console.log("Error: ", err);
});
}, []);
if (jobs && jobs[4]) {
console.log(jobs[4]);
const t = new Date(jobs[4].startDate).toString("YYYY-MM-DD");
console.log(t);
}
const deletePost = (postId) => {
axios({
method: "delete",
url: "http://localhost:5000/employer/delete-job",
data: {
postId,
},
headers: {
Authorization: "Bearer " + localStorage.getItem("jwt"),
"Content-Type": "application/json",
},
})
.then((res) => {
console.log(res);
if (res.data.error) {
console.log(res.data.error);
// alert(res.data.error);
const notify = () => toast(res.data.error);
notify();
} else {
// console.log(res.data.jobs);
// setJobs(res.data.jobs);
// console.log(jobs);
window.location.reload(false);
const notify = () => toast(res.data.message);
notify();
}
})
.catch((err) => {
console.log("Error: ", err);
});
};
return (
<div className="internshipsOuterContainer">
<Toaster />
{loading ? (
<div className="h-100 w-100 d-flex justify-content-center align-items-center">
<Spinner
animation="border"
variant="light"
style={{
borderColor: "#515b66",
borderRightColor: "transparent",
}}
/>
</div>
) : jobs && !jobs.length > 0 ? (
<Alert
variant="danger"
className="w-100"
style={{
backgroundColor: "#343A40",
border: "none",
color: "#ffc107",
}}
>
No Jobs available right now
</Alert>
) : (
jobs &&
jobs.map((catejob) => (
<div key={catejob._id}>
<h1 className="parameter">{catejob._id}</h1>
<Row className="justify-content-xl-start justify-content-lg-around justify-content-sm-center">
{catejob.jobs &&
catejob.jobs.map((job) => {
return (
<Col
key={job._id}
className="col-xl-4 col-lg-5 col-md-6 col-sm-11 col-12 colPost"
>
<JobsCard
job={job}
deletePost={deletePost}
key={job._id}
userId={state.user._id}
/>
</Col>
);
})}
</Row>
</div>
))
)}
</div>
);
}
Example #16
| Source File: InternshipByStream.js From easy-job-intern with MIT License | 4 votes |
|
InternshipsByStream = () => {
const { state, dispatch } = useContext(UserContext);
const [internships, setInternships] = useState([]);
const [loading, setLoading] = useState(true);
const { stream } = useParams();
console.log(internships);
console.log(state);
useEffect(() => {
axios({
method: "get",
url: `http://localhost:5000/user/stream-internship/${stream}`,
headers: {
Authorization: "Bearer " + localStorage.getItem("jwt"),
},
})
.then((res) => {
console.log(res);
setLoading(false);
if (res.data.error) {
console.log(res.data.error);
// alert(res.data.error);
const notify = () => toast(res.data.error);
notify();
} else {
console.log(res.data.internships);
setInternships(res.data.internships);
console.log(internships);
}
})
.catch((err) => {
setLoading(false);
console.log("Error: ", err);
});
}, []);
if (internships && internships[4]) {
console.log(internships[4]);
const t = new Date(internships[4].startDate).toString("YYYY-MM-DD");
console.log(t);
}
const deletePost = (postId) => {
axios({
method: "delete",
url: "http://localhost:5000/employer/delete-internship",
data: {
postId,
},
headers: {
Authorization: "Bearer " + localStorage.getItem("jwt"),
"Content-Type": "application/json",
},
})
.then((res) => {
console.log(res);
if (res.data.error) {
console.log(res.data.error);
// alert(res.data.error);
const notify = () => toast(res.data.error);
notify();
} else {
console.log(res.data.internships);
setInternships(res.data.internships);
console.log(internships);
const notify = () => toast(res.data.message);
notify();
}
})
.catch((err) => {
console.log("Error: ", err);
});
};
return (
<div className="internshipsOuterContainer">
<Toaster />
<Row className="justify-content-xl-start justify-content-lg-around justify-content-sm-center">
{loading ? (
<div className="h-100 w-100 d-flex justify-content-center align-items-center">
<Spinner
animation="border"
variant="light"
style={{
borderColor: "#515b66",
borderRightColor: "transparent",
}}
/>
</div>
) : internships && !internships.length > 0 ? (
<Alert
variant="danger"
className="w-100 "
style={{
backgroundColor: "#343A40",
border: "none",
color: "#ffc107",
}}
>
No internships available right now
</Alert>
) : (
internships &&
internships.map((internship) => {
// console.log(internship.createdBy._id, state.user._id);
return (
<Col
key={internship._id}
className="col-xl-4 col-lg-5 col-md-6 col-sm-11 col-12 colPost"
>
<InternshipCard
internship={internship}
userId={state.user._id}
deletePost={deletePost}
/>
</Col>
);
})
)}
</Row>
</div>
);
}
Example #17
| Source File: InternshipByLocation.js From easy-job-intern with MIT License | 4 votes |
|
InternshipsByLocation = () => {
const { state, dispatch } = useContext(UserContext);
const [internships, setInternships] = useState([]);
const [loading, setLoading] = useState(true);
const { location } = useParams();
console.log(internships);
console.log(state);
useEffect(() => {
axios({
method: "get",
url: `http://localhost:5000/user/location-internship/${location}`,
headers: {
Authorization: "Bearer " + localStorage.getItem("jwt"),
},
})
.then((res) => {
console.log(res);
setLoading(false);
if (res.data.error) {
console.log(res.data.error);
// alert(res.data.error);
const notify = () => toast(res.data.error);
notify();
} else {
console.log(res.data.internships);
setInternships(res.data.internships);
console.log(internships);
}
})
.catch((err) => {
setLoading(false);
console.log("Error: ", err);
});
}, []);
if (internships && internships[4]) {
console.log(internships[4]);
const t = new Date(internships[4].startDate).toString("YYYY-MM-DD");
console.log(t);
}
const deletePost = (postId) => {
axios({
method: "delete",
url: "http://localhost:5000/employer/delete-internship",
data: {
postId,
},
headers: {
Authorization: "Bearer " + localStorage.getItem("jwt"),
"Content-Type": "application/json",
},
})
.then((res) => {
console.log(res);
if (res.data.error) {
console.log(res.data.error);
// alert(res.data.error);
const notify = () => toast(res.data.error);
notify();
} else {
console.log(res.data.internships);
setInternships(res.data.internships);
console.log(internships);
const notify = () => toast(res.data.message);
notify();
}
})
.catch((err) => {
console.log("Error: ", err);
});
};
return (
<div className="internshipsOuterContainer">
<Toaster />
<Row className="justify-content-xl-start justify-content-lg-around justify-content-sm-center">
{loading ? (
<div className="h-100 w-100 d-flex justify-content-center align-items-center">
<Spinner
animation="border"
variant="light"
style={{
borderColor: "#515b66",
borderRightColor: "transparent",
}}
/>
</div>
) : internships && !internships.length > 0 ? (
<Alert
variant="danger"
className="w-100 "
style={{
backgroundColor: "#343A40",
border: "none",
color: "#ffc107",
}}
>
No internships available right now
</Alert>
) : (
internships &&
internships.map((internship) => {
// console.log(internship.createdBy._id, state.user._id);
return (
<Col
key={internship._id}
className="col-xl-4 col-lg-5 col-md-6 col-sm-11 col-12 colPost"
>
<InternshipCard
internship={internship}
userId={state.user._id}
deletePost={deletePost}
/>
</Col>
);
})
)}
</Row>
</div>
);
}
Example #18
| Source File: InternshipByIndustry.js From easy-job-intern with MIT License | 4 votes |
|
InternshipsByIndustry = () => {
const { state, dispatch } = useContext(UserContext);
const [internships, setInternships] = useState([]);
const [loading, setLoading] = useState(true);
const { industry } = useParams();
console.log(internships);
console.log(state);
useEffect(() => {
axios({
method: "get",
url: `http://localhost:5000/user/industry-internship/${industry}`,
headers: {
Authorization: "Bearer " + localStorage.getItem("jwt"),
},
})
.then((res) => {
console.log(res);
setLoading(false);
if (res.data.error) {
console.log(res.data.error);
// alert(res.data.error);
const notify = () => toast(res.data.error);
notify();
} else {
console.log(res.data.internships);
setInternships(res.data.internships);
console.log(internships);
}
})
.catch((err) => {
setLoading(false);
console.log("Error: ", err);
});
}, []);
if (internships && internships[4]) {
console.log(internships[4]);
const t = new Date(internships[4].startDate).toString("YYYY-MM-DD");
console.log(t);
}
const deletePost = (postId) => {
axios({
method: "delete",
url: "http://localhost:5000/employer/delete-internship",
data: {
postId,
},
headers: {
Authorization: "Bearer " + localStorage.getItem("jwt"),
"Content-Type": "application/json",
},
})
.then((res) => {
console.log(res);
if (res.data.error) {
console.log(res.data.error);
// alert(res.data.error);
const notify = () => toast(res.data.error);
notify();
} else {
console.log(res.data.internships);
setInternships(res.data.internships);
console.log(internships);
const notify = () => toast(res.data.message);
notify();
}
})
.catch((err) => {
console.log("Error: ", err);
});
};
return (
<div className="internshipsOuterContainer">
<Toaster />
<Row className="justify-content-xl-start justify-content-lg-around justify-content-sm-center">
{loading ? (
<div className="h-100 w-100 d-flex justify-content-center align-items-center">
<Spinner
animation="border"
variant="light"
style={{
borderColor: "#515b66",
borderRightColor: "transparent",
}}
/>
</div>
) : internships && !internships.length > 0 ? (
<Alert
variant="danger"
className="w-100 "
style={{
backgroundColor: "#343A40",
border: "none",
color: "#ffc107",
}}
>
No internships available right now
</Alert>
) : (
internships &&
internships.map((internship) => {
// console.log(internship.createdBy._id, state.user._id);
return (
<Col
key={internship._id}
className="col-xl-4 col-lg-5 col-md-6 col-sm-11 col-12 colPost"
>
<InternshipCard
internship={internship}
userId={state.user._id}
deletePost={deletePost}
/>
</Col>
);
})
)}
</Row>
</div>
);
}
Example #19
| Source File: InternshipByCompany.js From easy-job-intern with MIT License | 4 votes |
|
InternshipsByCompany = () => {
const { state, dispatch } = useContext(UserContext);
const [internships, setInternships] = useState([]);
const [loading, setLoading] = useState(true);
const { companyName } = useParams();
console.log(internships);
console.log(state);
useEffect(() => {
axios({
method: "get",
url: `http://localhost:5000/user/companyName-internship/${companyName}`,
headers: {
Authorization: "Bearer " + localStorage.getItem("jwt"),
},
})
.then((res) => {
console.log(res);
setLoading(false);
if (res.data.error) {
console.log(res.data.error);
// alert(res.data.error);
const notify = () => toast(res.data.error);
notify();
} else {
console.log(res.data.internships);
setInternships(res.data.internships);
console.log(internships);
}
})
.catch((err) => {
setLoading(false);
console.log("Error: ", err);
});
}, []);
if (internships && internships[4]) {
console.log(internships[4]);
const t = new Date(internships[4].startDate).toString("YYYY-MM-DD");
console.log(t);
}
const deletePost = (postId) => {
axios({
method: "delete",
url: "http://localhost:5000/employer/delete-internship",
data: {
postId,
},
headers: {
Authorization: "Bearer " + localStorage.getItem("jwt"),
"Content-Type": "application/json",
},
})
.then((res) => {
console.log(res);
if (res.data.error) {
console.log(res.data.error);
// alert(res.data.error);
const notify = () => toast(res.data.error);
notify();
} else {
console.log(res.data.internships);
setInternships(res.data.internships);
console.log(internships);
const notify = () => toast(res.data.message);
notify();
}
})
.catch((err) => {
console.log("Error: ", err);
});
};
return (
<div className="internshipsOuterContainer">
<Toaster />
<Row className="justify-content-xl-start justify-content-lg-around justify-content-sm-center">
{loading ? (
<div className="h-100 w-100 d-flex justify-content-center align-items-center">
<Spinner
animation="border"
variant="light"
style={{
borderColor: "#515b66",
borderRightColor: "transparent",
}}
/>
</div>
) : internships && !internships.length > 0 ? (
<Alert
variant="danger"
className="w-100 "
style={{
backgroundColor: "#343A40",
border: "none",
color: "#ffc107",
}}
>
No internships available right now
</Alert>
) : (
internships &&
internships.map((internship) => {
// console.log(internship.createdBy._id, state.user._id);
return (
<Col
key={internship._id}
className="col-xl-4 col-lg-5 col-md-6 col-sm-11 col-12 colPost"
>
<InternshipCard
internship={internship}
userId={state.user._id}
deletePost={deletePost}
/>
</Col>
);
})
)}
</Row>
</div>
);
}
Example #20
| Source File: AllJobs.js From easy-job-intern with MIT License | 4 votes |
|
AllJobs = () => {
const { state, dispatch } = useContext(UserContext);
const [jobs, setJobs] = useState([]);
const [loading, setLoading] = useState(true);
// useEffect(() => {
// axios({
// method: "get",
// url: "http://localhost:5000/user/all-jobs",
// headers: {
// Authorization: "Bearer " + localStorage.getItem("jwt"),
// },
// })
// .then((res) => {
// console.log(res);
// if (res.data.error) {
// console.log(res.data.error);
// // alert(res.data.error);
// const notify = () => toast(res.data.error);
// notify();
// } else {
// // if (res && res.data) {
// console.log(res.data.jobs);
// setJobs(res.data.jobs);
// console.log(jobs);
// // }
// }
// })
// .catch((err) => {
// console.log("Error: ", err);
// });
// }, []);
useEffect(() => {
axios({
method: "get",
url: "http://localhost:5000/user/all-jobs",
headers: {
Authorization: "Bearer " + localStorage.getItem("jwt"),
},
})
.then((res) => {
console.log(res);
setLoading(false);
if (res.data.error) {
console.log(res.data.error);
// alert(res.data.error);
const notify = () => toast(res.data.error);
notify();
} else {
console.log(res.data.jobs);
setJobs(res.data.jobs);
console.log(jobs);
}
})
.catch((err) => {
setLoading(false);
console.log("Error: ", err);
});
}, []);
if (jobs && jobs[4]) {
console.log(jobs[4]);
const t = new Date(jobs[4].startDate).toString("YYYY-MM-DD");
console.log(t);
}
return (
<div className="internshipsOuterContainer">
<Toaster />
<Row className="justify-content-xl-start justify-content-lg-around justify-content-sm-center">
{loading ? (
<div className="h-100 w-100 d-flex justify-content-center align-items-center">
<Spinner
animation="border"
variant="light"
style={{
borderColor: "#515b66",
borderRightColor: "transparent",
}}
/>
</div>
) : jobs && !jobs.length > 0 ? (
<Alert
variant="danger"
className="w-100"
style={{
backgroundColor: "#343A40",
border: "none",
color: "#ffc107",
}}
>
No Jobs available right now
</Alert>
) : (
jobs &&
jobs.map((job) => {
return (
<Col
key={job._id}
className="col-xl-4 col-lg-5 col-md-6 col-sm-11 col-12 colPost"
>
<JobsCard job={job} key={job._id} userId={state.user._id} />
</Col>
);
})
)}
</Row>
</div>
);
}
Example #21
| Source File: BookmarkJob.js From easy-job-intern with MIT License | 4 votes |
|
BookmarkJobs = () => {
const { state, dispatch } = useContext(UserContext);
const [jobs, setJobs] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
axios({
method: "post",
url: "http://localhost:5000/student/getBookmarkedJobs",
headers: {
Authorization: "Bearer " + localStorage.getItem("jwt"),
},
})
.then((res) => {
console.log(res);
setLoading(false);
if (res.data.error) {
console.log(res.data.error);
// alert(res.data.error);
const notify = () => toast(res.data.error);
notify();
} else {
console.log(res.data.job);
setJobs(res.data.job);
console.log(jobs);
}
})
.catch((err) => {
setLoading(false);
console.log("Error: ", err);
});
}, []);
if (jobs && jobs[4]) {
console.log(jobs[4]);
const t = new Date(jobs[4].startDate).toString("YYYY-MM-DD");
console.log(t);
}
const deletePost = (postId) => {
axios({
method: "delete",
url: "http://localhost:5000/employer/delete-job",
data: {
postId,
},
headers: {
Authorization: "Bearer " + localStorage.getItem("jwt"),
"Content-Type": "application/json",
},
})
.then((res) => {
console.log(res);
if (res.data.error) {
console.log(res.data.error);
// alert(res.data.error);
const notify = () => toast(res.data.error);
notify();
} else {
// console.log(res.data.jobs);
// setJobs(res.data.jobs);
// console.log(jobs);
window.location.reload(false);
const notify = () => toast(res.data.message);
notify();
}
})
.catch((err) => {
console.log("Error: ", err);
});
};
return (
<div className="internshipsOuterContainer">
<Toaster />
<Row className="justify-content-xl-start justify-content-lg-around justify-content-sm-center">
{loading ? (
<div className="h-100 w-100 d-flex justify-content-center align-items-center">
<Spinner
animation="border"
variant="light"
style={{
borderColor: "#515b66",
borderRightColor: "transparent",
}}
/>
</div>
) : jobs && !jobs.length > 0 ? (
<Alert
variant="danger"
className="w-100"
style={{
backgroundColor: "#343A40",
border: "none",
color: "#ffc107",
}}
>
No Jobs available right now
</Alert>
) : (
jobs &&
jobs.map((job) => {
return (
<Col
key={job._id}
className="col-xl-4 col-lg-5 col-md-6 col-sm-11 col-12 colPost"
>
<JobsCard
job={job}
deletePost={deletePost}
key={job._id}
userId={state.user._id}
/>
</Col>
);
})
)}
</Row>
</div>
);
}
Example #22
| Source File: JobsByCompanyName.js From easy-job-intern with MIT License | 4 votes |
|
JobsByCompanyName = () => {
const { state, dispatch } = useContext(UserContext);
const [jobs, setJobs] = useState([]);
const [loading, setLoading] = useState(true);
const { companyName } = useParams();
// useEffect(() => {
// axios({
// method: "get",
// url: "http://localhost:5000/user/all-jobs",
// headers: {
// Authorization: "Bearer " + localStorage.getItem("jwt"),
// },
// })
// .then((res) => {
// console.log(res);
// if (res.data.error) {
// console.log(res.data.error);
// // alert(res.data.error);
// const notify = () => toast(res.data.error);
// notify();
// } else {
// // if (res && res.data) {
// console.log(res.data.jobs);
// setJobs(res.data.jobs);
// console.log(jobs);
// // }
// }
// })
// .catch((err) => {
// console.log("Error: ", err);
// });
// }, []);
useEffect(() => {
axios({
method: "get",
url: `http://localhost:5000/user/job/companyName/${companyName}`,
headers: {
Authorization: "Bearer " + localStorage.getItem("jwt"),
},
})
.then((res) => {
console.log(res);
setLoading(false);
if (res.data.error) {
console.log(res.data.error);
// alert(res.data.error);
const notify = () => toast(res.data.error);
notify();
} else {
console.log(res.data.Jobs);
setJobs(res.data.Jobs);
console.log(jobs);
}
})
.catch((err) => {
setLoading(false);
console.log("Error: ", err);
});
}, []);
if (jobs && jobs[4]) {
console.log(jobs[4]);
const t = new Date(jobs[4].startDate).toString("YYYY-MM-DD");
console.log(t);
}
const deletePost = (postId) => {
axios({
method: "delete",
url: "http://localhost:5000/employer/delete-job",
data: {
postId,
},
headers: {
Authorization: "Bearer " + localStorage.getItem("jwt"),
"Content-Type": "application/json",
},
})
.then((res) => {
console.log(res);
if (res.data.error) {
console.log(res.data.error);
// alert(res.data.error);
const notify = () => toast(res.data.error);
notify();
} else {
// console.log(res.data.jobs);
// setJobs(res.data.jobs);
// console.log(jobs);
window.location.reload(false);
const notify = () => toast(res.data.message);
notify();
}
})
.catch((err) => {
console.log("Error: ", err);
});
};
return (
<div className="internshipsOuterContainer">
<Toaster />
<Row className="justify-content-xl-start justify-content-lg-around justify-content-sm-center">
{loading ? (
<div className="h-100 w-100 d-flex justify-content-center align-items-center">
<Spinner
animation="border"
variant="light"
style={{
borderColor: "#515b66",
borderRightColor: "transparent",
}}
/>
</div>
) : jobs && !jobs.length > 0 ? (
<Alert
variant="danger"
className="w-100"
style={{
backgroundColor: "#343A40",
border: "none",
color: "#ffc107",
}}
>
No Jobs available right now
</Alert>
) : (
jobs &&
jobs.map((job) => {
return (
<Col
key={job._id}
className="col-xl-4 col-lg-5 col-md-6 col-sm-11 col-12 colPost"
>
<JobsCard
job={job}
deletePost={deletePost}
key={job._id}
userId={state.user._id}
/>
</Col>
);
})
)}
</Row>
</div>
);
}
Example #23
| Source File: FresherJobsGroupedByIndustry.js From easy-job-intern with MIT License | 4 votes |
|
FresherJobsGroupedByIndustry = () => {
const { state, dispatch } = useContext(UserContext);
const [freshersJobs, setFreshersJobs] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
axios({
method: "get",
url: "http://localhost:5000/user/freshersjob/industry",
headers: {
Authorization: "Bearer " + localStorage.getItem("jwt"),
},
})
.then((res) => {
// console.log(res);
setLoading(false);
if (res.data.error) {
console.log(res.data.error);
// alert(res.data.error);
const notify = () => toast(res.data.error);
notify();
} else {
// console.log(res.data.freshersjobs);
setFreshersJobs(res.data.freshersjobs);
// console.log(freshersJobs);
}
})
.catch((err) => {
setLoading(false);
console.log("Error: ", err);
});
}, []);
if (freshersJobs && freshersJobs[4]) {
console.log(freshersJobs[4]);
const t = new Date(freshersJobs[4].startDate).toString("YYYY-MM-DD");
console.log(t);
}
return (
<div className="internshipsOuterContainer">
<Toaster />
{loading ? (
<div className="h-100 w-100 d-flex justify-content-center align-items-center">
<Spinner
animation="border"
variant="light"
style={{
borderColor: "#515b66",
borderRightColor: "transparent",
}}
/>
</div>
) : freshersJobs && !freshersJobs.length > 0 ? (
<Alert
variant="danger"
className="w-100"
style={{
backgroundColor: "#343A40",
border: "none",
color: "#ffc107",
}}
>
No Fresher Jobs available right now
</Alert>
) : (
freshersJobs &&
freshersJobs.map((catefresher) => (
<div key={catefresher._id}>
<h1 className="parameter">{catefresher._id}</h1>
<Row className="justify-content-xl-start justify-content-lg-around justify-content-sm-center">
{catefresher.freshersjobs &&
catefresher.freshersjobs.map((fresher) => {
// console.log(internship.createdBy._id, state.user._id);
return (
<Col
key={fresher._id}
className="col-xl-4 col-lg-5 col-md-6 col-sm-11 col-12 colPost"
>
<FresherJobCard
fresherjob={fresher}
userId={state.user._id}
/>
</Col>
);
})}
</Row>
</div>
))
)}
</div>
);
}
Example #24
| Source File: JobsGroupedByLocation.js From easy-job-intern with MIT License | 4 votes |
|
JobsGroupedByLocation = () => {
const { state, dispatch } = useContext(UserContext);
const [jobs, setJobs] = useState([]);
const [loading, setLoading] = useState(true);
// useEffect(() => {
// axios({
// method: "get",
// url: "http://localhost:5000/user/all-jobs",
// headers: {
// Authorization: "Bearer " + localStorage.getItem("jwt"),
// },
// })
// .then((res) => {
// console.log(res);
// if (res.data.error) {
// console.log(res.data.error);
// // alert(res.data.error);
// const notify = () => toast(res.data.error);
// notify();
// } else {
// // if (res && res.data) {
// console.log(res.data.jobs);
// setJobs(res.data.jobs);
// console.log(jobs);
// // }
// }
// })
// .catch((err) => {
// console.log("Error: ", err);
// });
// }, []);
useEffect(() => {
axios({
method: "get",
url: "http://localhost:5000/user/job/location",
headers: {
Authorization: "Bearer " + localStorage.getItem("jwt"),
},
})
.then((res) => {
console.log(res);
setLoading(false);
if (res.data.error) {
console.log(res.data.error);
// alert(res.data.error);
const notify = () => toast(res.data.error);
notify();
} else {
console.log(res.data.jobs);
setJobs(res.data.jobs);
console.log(jobs);
}
})
.catch((err) => {
setLoading(false);
console.log("Error: ", err);
});
}, []);
if (jobs && jobs[4]) {
console.log(jobs[4]);
const t = new Date(jobs[4].startDate).toString("YYYY-MM-DD");
console.log(t);
}
const deletePost = (postId) => {
axios({
method: "delete",
url: "http://localhost:5000/employer/delete-job",
data: {
postId,
},
headers: {
Authorization: "Bearer " + localStorage.getItem("jwt"),
"Content-Type": "application/json",
},
})
.then((res) => {
console.log(res);
if (res.data.error) {
console.log(res.data.error);
// alert(res.data.error);
const notify = () => toast(res.data.error);
notify();
} else {
// console.log(res.data.jobs);
// setJobs(res.data.jobs);
// console.log(jobs);
const notify = () => toast(res.data.message);
notify();
}
})
.catch((err) => {
console.log("Error: ", err);
});
};
return (
<div className="internshipsOuterContainer">
<Toaster />
{loading ? (
<div className="h-100 w-100 d-flex justify-content-center align-items-center">
<Spinner
animation="border"
variant="light"
style={{
borderColor: "#515b66",
borderRightColor: "transparent",
}}
/>
</div>
) : jobs && !jobs.length > 0 ? (
<Alert
variant="danger"
className="w-100"
style={{
backgroundColor: "#343A40",
border: "none",
color: "#ffc107",
}}
>
No Jobs available right now
</Alert>
) : (
jobs &&
jobs.map((intern) => (
<div key={intern._id}>
<h1 className="parameter">{intern._id}</h1>
<Row className="justify-content-xl-start justify-content-lg-around justify-content-sm-center">
{intern.jobs &&
intern.jobs.map((job) => {
// console.log(job.createdBy._id, state.user._id);
return (
<Col
key={job._id}
className="col-xl-4 col-lg-5 col-md-6 col-sm-11 col-12 colPost"
>
{/* {job.companyName} */}
<JobsCard
job={job}
deletePost={deletePost}
key={job._id}
userId={state.user._id}
/>
</Col>
);
})}
</Row>
</div>
))
)}
</div>
);
}
Example #25
| Source File: JobsGroupedByStream.js From easy-job-intern with MIT License | 4 votes |
|
JobsGroupedByStream = () => {
const { state, dispatch } = useContext(UserContext);
const [jobs, setJobs] = useState([]);
const [loading, setLoading] = useState(true);
// useEffect(() => {
// axios({
// method: "get",
// url: "http://localhost:5000/user/all-jobs",
// headers: {
// Authorization: "Bearer " + localStorage.getItem("jwt"),
// },
// })
// .then((res) => {
// console.log(res);
// if (res.data.error) {
// console.log(res.data.error);
// // alert(res.data.error);
// const notify = () => toast(res.data.error);
// notify();
// } else {
// // if (res && res.data) {
// console.log(res.data.jobs);
// setJobs(res.data.jobs);
// console.log(jobs);
// // }
// }
// })
// .catch((err) => {
// console.log("Error: ", err);
// });
// }, []);
useEffect(() => {
axios({
method: "get",
url: "http://localhost:5000/user/job/stream",
headers: {
Authorization: "Bearer " + localStorage.getItem("jwt"),
},
})
.then((res) => {
console.log(res);
setLoading(false);
if (res.data.error) {
console.log(res.data.error);
// alert(res.data.error);
const notify = () => toast(res.data.error);
notify();
} else {
console.log(res.data.jobs);
setJobs(res.data.jobs);
console.log(jobs);
}
})
.catch((err) => {
setLoading(false);
console.log("Error: ", err);
});
}, []);
if (jobs && jobs[4]) {
console.log(jobs[4]);
const t = new Date(jobs[4].startDate).toString("YYYY-MM-DD");
console.log(t);
}
const deletePost = (postId) => {
axios({
method: "delete",
url: "http://localhost:5000/employer/delete-job",
data: {
postId,
},
headers: {
Authorization: "Bearer " + localStorage.getItem("jwt"),
"Content-Type": "application/json",
},
})
.then((res) => {
console.log(res);
if (res.data.error) {
console.log(res.data.error);
// alert(res.data.error);
const notify = () => toast(res.data.error);
notify();
} else {
// console.log(res.data.jobs);
// setJobs(res.data.jobs);
// console.log(jobs);
const notify = () => toast(res.data.message);
notify();
}
})
.catch((err) => {
console.log("Error: ", err);
});
};
return (
<div className="internshipsOuterContainer">
<Toaster />
{loading ? (
<div className="h-100 w-100 d-flex justify-content-center align-items-center">
<Spinner
animation="border"
variant="light"
style={{
borderColor: "#515b66",
borderRightColor: "transparent",
}}
/>
</div>
) : jobs && !jobs.length > 0 ? (
<Alert
variant="danger"
className="w-100"
style={{
backgroundColor: "#343A40",
border: "none",
color: "#ffc107",
}}
>
No Jobs available right now
</Alert>
) : (
jobs &&
jobs.map((intern) => (
<div key={intern._id}>
<h1 className="parameter">{intern._id}</h1>
<Row className="justify-content-xl-start justify-content-lg-around justify-content-sm-center">
{intern.jobs &&
intern.jobs.map((job) => {
// console.log(job.createdBy._id, state.user._id);
return (
<Col
key={job._id}
className="col-xl-4 col-lg-5 col-md-6 col-sm-11 col-12 colPost"
>
{/* {job.companyName} */}
<JobsCard
job={job}
deletePost={deletePost}
key={job._id}
userId={state.user._id}
/>
</Col>
);
})}
</Row>
</div>
))
)}
</div>
);
}
Example #26
| Source File: EmployerProfileScreen.js From easy-job-intern with MIT License | 4 votes |
|
EmployerProfileScreen = ({ history }) => {
const { state, dispatch } = useContext(UserContext);
const [loading, setLoading] = useState(true);
const [data, setData] = useState(null);
useEffect(() => {
console.log(state.user._id);
axios({
method: "get",
url: `http://localhost:5000/employer/employerfetch/${state.user._id}`,
headers: {
Authorization: "Bearer " + localStorage.getItem("jwt"),
},
})
.then((res) => {
console.log(res.data);
setData(res.data);
setLoading(false);
})
.catch((e) => {
setLoading(false);
console.log(e);
});
}, []);
const deleteaccount = () => {
axios({
method: "delete",
url: `http://localhost:5000/employer/deleteEmployer`,
headers: {
Authorization: "Bearer " + localStorage.getItem("jwt"),
},
})
.then((res) => {
// console.log(res.data);
localStorage.removeItem("user");
localStorage.removeItem("jwt");
history.push("/");
})
.catch((e) => {
console.log(e);
});
};
return (
<div className="w-100 h-100">
{loading ? (
<Spinner
animation="border"
role="status"
variant="primary"
className="mt-5"
>
<span className="sr-only">Loading...</span>
</Spinner>
) : (
<div
className="row"
style={{
fontFamily: "Arial, Helvetica, sans-serif",
}}
>
<div className="col-lg-4 col-md-12">
<div
className="employer-main-profile"
style={{ borderRight: "1px solid yellow" }}
>
<div
className="container"
style={{
backgroundColor: "transparent",
opacity: 1,
width: "75%",
}}
>
<h2 className="employer-profile-heading mb-5">My Profile</h2>
<div className="employer-secondary-profile">
<ul>
<li>
<span>
<i class="fas fa-user"></i> Name :{" "}
</span>
{data.employer.personName && data.employer.personName}
</li>
<li>
<span>
<i class="fas fa-id-card"></i> Contact :{" "}
</span>
{data.employer.contact && data.employer.contact}
</li>
<li>
<span>
<i class="fas fa-envelope"></i> Email :{" "}
</span>
{data.employer.email}
</li>
<li>
<span>
<i class="fas fa-building"></i> Company Name :{" "}
</span>
{data.employer.companyName}
</li>
</ul>
</div>
<div className="employer-secondary-profile-buttons mt-5">
<Link
to="/employer-update"
className="btn btn-outline-primary btn-block"
>
Edit Account
</Link>
<div
className="btn btn-outline-danger btn-block"
onClick={deleteaccount}
>
Delete Account
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-8 col-md-12 mt-5">
<div className="row w-100 mb-5">
<h3 className="mx-auto employer-profile-heading">
My Created InternShips
</h3>
</div>
<div className="row w-100 mb-5">
{data.internships.length > 0 ? (
data.internships.map((intern) => (
<div className="col-lg-6 col-md-12">
<InternshipCard
internship={intern}
userId={state.user._id}
key={intern._id}
/>
</div>
))
) : (
<Alert className="w-100" variant="primary">
No internship created by you
</Alert>
)}
</div>
<div className="row w-100 mb-5 ">
<h3 className="mx-auto employer-profile-heading">
My Created Jobs
</h3>
</div>
<div className="row w-100 mb-5">
{data.jobs.length > 0 ? (
data.jobs.map((intern) => (
<div className="col-lg-6 col-md-12">
<JobsCard
job={intern}
userId={state.user._id}
key={intern._id}
/>
</div>
))
) : (
<Alert className="w-100" variant="primary">
No jobs created by you
</Alert>
)}
</div>
<div className="row w-100 mb-5">
<h3 className="mx-auto employer-profile-heading">
My Created FresherJobs
</h3>
</div>
<div className="row w-100 mb-5">
{data.fresherJobs.length > 0 ? (
data.fresherJobs.map((intern) => (
<div className="col-lg-6 col-md-12">
<FresherJobCard
fresherjob={intern}
userId={state.user._id}
key={intern._id}
/>
</div>
))
) : (
<Alert className="w-100" variant="primary">
No fresherJobs created by you
</Alert>
)}
</div>
</div>
</div>
)}
</div>
);
}
Example #27
| Source File: EmployerUpdateForm.js From easy-job-intern with MIT License | 4 votes |
|
EmployerUpdateForm = () => {
const { state, dispatch } = useContext(UserContext);
const [employer, setEmployer] = useState({
personName: "",
email: "",
contact: "",
companyName: "",
});
const [loading, setLoading] = useState(true);
const history = useHistory();
useEffect(() => {
axios({
method: "get",
url: `http://localhost:5000/employer/employerfetch/${state.user._id}`,
headers: {
Authorization: "Bearer " + localStorage.getItem("jwt"),
},
})
.then((res) => {
// console.log(res);
if (res.data.error) {
console.log(res.data.error);
// alert(res.data.error);
const notify = () => toast(res.data.error);
notify();
setLoading(false);
} else {
console.log(res.data)
setEmployer(res.data.employer);
setLoading(false);
}
})
.catch((err) => {
console.log("Error: ", err);
setLoading(false);
});
}, []);
const submitEmployerDetails = (e) => {
e.preventDefault();
const { personName, email, contact, companyName } = employer;
// console.log(employer);
axios({
method: "PATCH",
url: "http://localhost:5000/employer/update",
data: {
personName: personName,
email: email,
contact: contact,
companyName: companyName,
},
headers: {
Authorization: "Bearer " + localStorage.getItem("jwt"),
"Content-Type": "application/json",
},
})
.then((res) => {
// console.log(res.data.user);
// alert(res.data.message);
const notify = () => toast(res.data.message);
notify();
if (res.data.user) {
const user = localStorage.setItem(
"user",
JSON.stringify(res.data.user)
);
history.push("/");
}
})
.catch((err) => {
console.log(err);
});
// setFormValues(initialState);
};
return (
<>
{loading ? (
<Spinner animation="border" role="status">
<span className="sr-only">Loading...</span>
</Spinner>
) : (
<div style={{ padding: "4vh 0" }}>
<Toaster />
<Card
style={{
width: "40vw",
marginLeft: "auto",
marginRight: "auto",
marginTop: "4vh",
marginBottom: "4vh",
backgroundImage: "linear-gradient(to right, white , #6EE2CD)",
}}
className="register_card_custom"
>
<Card.Header
style={{
backgroundColor: "#6c6c6c",
color: "#6EE2CD",
fontFamily: '"Merriweather", serif',
fontSize: "1.25rem",
}}
as="h5"
>
Employer Details Update
</Card.Header>
<Card.Body>
<Form onSubmit={(e) => submitEmployerDetails(e)}>
{/* Name of the employee */}
<Form.Group style={{ textAlign: "left" }}>
<Form.Label style={{ fontWeight: "bold" }}>Name</Form.Label>
<Form.Control
// className={`${
// !formValues.personName.valid &&
// formValues.personName.touched
// ? "input-error"
// : ""
// }`}
style={{ borderColor: "#6EE2CD", color: "#000000" }}
type="text"
placeholder="Enter your name"
name="personName"
value={employer.personName}
onChange={(e) =>
setEmployer({ ...employer, personName: e.target.value })
}
required
/>
{/* {formValues.personName.errorMessage && (
<span className="error">
{formValues.personName.errorMessage}
</span>
)} */}
</Form.Group>
{/* Email address */}
<Form.Group
style={{ textAlign: "left" }}
controlId="formBasicEmail"
>
<Form.Label style={{ fontWeight: "bold" }}>
Email address
</Form.Label>
<Form.Control
// className={`${
// !formValues.email.valid && formValues.email.touched
// ? "input-error"
// : ""
// }`}
style={{ borderColor: "#6EE2CD", color: "#000000" }}
type="email"
placeholder="Enter email"
name="email"
value={employer.email}
onChange={(e) =>
setEmployer({ ...employer, email: e.target.value })
}
required
/>
{/* {formValues.email.errorMessage && (
<span className="error">{formValues.email.errorMessage}</span>
)} */}
</Form.Group>
{/* Contact Number */}
<Form.Group style={{ textAlign: "left" }}>
<Form.Label style={{ fontWeight: "bold" }}>
Contact
</Form.Label>
<Form.Control
// className={`${
// !formValues.contact.valid && formValues.contact.touched
// ? "input-error"
// : ""
// }`}
style={{ borderColor: "#6EE2CD", color: "#000000" }}
type="number"
placeholder="Enter your contact number"
name="contact"
value={employer.contact}
onChange={(e) =>
setEmployer({ ...employer, contact: e.target.value })
}
required
maxLength="10"
minLength="10"
/>
{/* {formValues.contact.errorMessage && (
<span className="error">
{formValues.contact.errorMessage}
</span>
)} */}
</Form.Group>
{/* Degree */}
<Form.Group style={{ textAlign: "left" }}>
<Form.Label style={{ fontWeight: "bold" }}>
Company Name
</Form.Label>
<Form.Control
// className={`${
// !formValues.degree.valid && formValues.degree.touched
// ? "input-error"
// : ""
// }`}
style={{ borderColor: "#6EE2CD", color: "#000000" }}
type="text"
placeholder="Enter Company Name"
name="companyName"
value={employer.companyName}
onChange={(e) =>
setEmployer({ ...employer, companyName: e.target.value })
}
required
/>
{/* {formValues.degree.errorMessage && (
<span className="error">
{formValues.degree.errorMessage}
</span>
)} */}
</Form.Group>
<Button
style={{ color: "#6EE2CD", fontWeight: "bold" }}
variant="secondary"
type="submit"
>
Update Details
</Button>
</Form>
</Card.Body>
</Card>
</div>
)}
</>
);
}
Example #28
| Source File: SearchResult.js From covid-19-mask-map with MIT License | 4 votes |
|
function SearchResult() {
const { t, i18n } = useTranslation();
const {
mapObj,
maskStores,
setMaskStores,
centerCoord,
setCenterCoord,
} = useMaskData();
const { addColorIndicatorMarkers, resetMarker } = useNaverMapsMarkers();
const [isLoading, setIsLoading] = useState(false);
const [dataError, setDataError] = useState(false);
const [showBetaAlert, setShowBetaAlert] = useState(true);
const [markerFilter, setMarkerFilter] = useState({
plenty: true,
some: true,
few: true,
empty: false,
});
const setNewMaskStores = useCallback(
(data) => {
const priority = [
"plenty",
"some",
"few",
"empty",
"break",
null,
undefined,
];
data.sort(
(a, b) =>
priority.indexOf(a.remain_stat) -
priority.indexOf(b.remain_stat)
);
setMaskStores(data);
},
[setMaskStores]
);
const markerFilterCheckboxHandler = (e) => {
let target = e.target;
console.log(target);
setMarkerFilter((prev) => {
return {
...prev,
[target.name]: target.checked,
};
});
};
useEffect(() => {
console.log(markerFilter);
}, [markerFilter]);
useEffect(() => {
const fetchStoresByGeo = async (loc, range) => {
const serverUrl = `https://8oi9s0nnth.apigw.ntruss.com/corona19-masks/v1/storesByGeo/json?lat=${loc.lat}&lng=${loc.lng}&m=${range}`;
let result;
try {
setIsLoading(true);
result = await axios(serverUrl);
setIsLoading(false);
} catch (error) {
console.error("An error occurred in fetchStoresByGeo:", error);
setDataError(true);
setIsLoading(false);
throw Error("Failed");
}
return result.data.stores;
};
const fn = async () => {
resetMarker();
console.log("Fetching store data...");
let data;
try {
data = await fetchStoresByGeo(centerCoord, 5000);
console.log(`New store data fetched`);
console.log(data);
resetMarker();
setNewMaskStores(data);
} catch {
console.error("Failed to fetch data");
}
};
fn();
}, [centerCoord, setNewMaskStores]);
useEffect(() => {
if (mapObj) {
mapObj.setCenter(centerCoord);
mapObj.setZoom(14);
}
}, [mapObj, centerCoord]);
useEffect(() => {
if (!mapObj) {
return;
}
addColorIndicatorMarkers(mapObj, maskStores);
}, [maskStores, mapObj, addColorIndicatorMarkers]);
const onClickMapRelocate = () => {
const newCenter = mapObj.getCenter();
setCenterCoord({
lat: newCenter.y,
lng: newCenter.x,
});
};
const getAlternateMaskText = useCallback(() => {
const today = new Date();
const day = today.getDay();
if (day === 0 || day === 6) {
// Weekend
return t("maskBuyAlertWeekend");
} else {
// Weekday
return t("maskBuyAlertWeekday", {
dayOfWeek: t(`dayOfWeek.${alternateMaskDays[day].weekday}`),
digits: alternateMaskDays[day].availableDigits.join(", "),
});
}
}, [i18n]);
return (
<>
<main>
<Container id="mainContainer">
<Row>
<Col sm={12}>
{showBetaAlert && (
<Alert
variant="warning"
onClose={() => setShowBetaAlert(false)}
dismissible>
<FontAwesomeIcon
icon={faExclamationTriangle}
/>{" "}
{t("notice.publicMaskShutdown")}
</Alert>
)}
</Col>
</Row>
<Row>
<Col md={6}>
{/* <Card style={{ marginBottom: "5px" }}>
<Card.Body className="p-1">
{getAlternateMaskText()}
</Card.Body>
</Card> */}
<MapPanel />
<Button
variant="outline-primary"
className="mt-1 mb-1"
block
onClick={onClickMapRelocate}>
<FontAwesomeIcon icon={faLocationArrow} />{" "}
{t("refreshMapStores")}
</Button>
</Col>
<Col md={6}>
{dataError && (
<Alert variant="danger" className="mt-1">
<FontAwesomeIcon
icon={faExclamationTriangle}
/>{" "}
{t("error.failedToLoadData")}
</Alert>
)}
<div className="border p-1 mb-1 d-flex flex-row justify-content-between">
<div class="form-check">
<input
type="checkbox"
disabled
class="form-check-input"
id="showPlentyStores"
name="plenty"
defaultChecked={markerFilter.plenty}
value={markerFilter.plenty}
onChange={markerFilterCheckboxHandler}
/>
<label
class="form-check-label"
htmlFor="showPlentyStores">
<RemainingStockBadge remainingStockStr="plenty" />{" "}
100개 +
</label>
</div>
<div class="form-check">
<input
type="checkbox"
disabled
class="form-check-input"
id="showSomeStores"
name="some"
defaultChecked={markerFilter.some}
value={markerFilter.some}
onChange={markerFilterCheckboxHandler}
/>
<label
class="form-check-label"
for="showSomeStores">
<RemainingStockBadge remainingStockStr="some" />{" "}
30-100
</label>
</div>
<div class="form-check">
<input
type="checkbox"
disabled
class="form-check-input"
id="showFewStores"
name="few"
defaultChecked={markerFilter.few}
value={markerFilter.few}
onChange={markerFilterCheckboxHandler}
/>
<label
class="form-check-label"
for="showFewStores">
<RemainingStockBadge remainingStockStr="few" />{" "}
2-30
</label>
</div>
<div class="form-check">
<input
type="checkbox"
disabled
class="form-check-input"
id="showEmptyStores"
name="empty"
defaultChecked={markerFilter.empty}
value={markerFilter.empty}
onChange={markerFilterCheckboxHandler}
/>
<label
class="form-check-label"
for="showEmptyStores">
<RemainingStockBadge remainingStockStr="empty" />{" "}
0개
</label>
</div>
</div>
{isLoading ? (
<Spinner animation="border" role="status">
<span className="sr-only">Loading...</span>
</Spinner>
) : maskStores && maskStores.length ? (
<>
<MaskStoreTable
style={{
overflow: "auto",
maxHeight: "100px",
}}
/>
</>
) : (
<Alert variant="danger">
주변에 마스크 판매처가 없습니다. 지도를
이동한 후 지도 아래의 재검색 버튼을 이용해
주세요.
</Alert>
)}
</Col>
</Row>
</Container>
</main>
</>
);
}
Example #29
| Source File: UserPageComponent.js From project-s0-t1-budget with MIT License | 4 votes |
|
render() {
return (
<Container>
{this.state.dataLoaded ? (
<div>
{this.state.dataFound ? (
<div>
<br />
<Form.Row>
<Form.Group as={Col} md="2" controlId="Month">
<Form.Control
as="select"
name="Month"
onChange={this.handleChange}
value={this.state.selectMonth}
>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</Form.Control>
</Form.Group>
<Form.Group as={Col} md="2" controlId="Year">
<Form.Control
as="select"
name="Year"
onChange={this.handleChange2}
value={this.state.selectYear}
>
<option value="2020">2020</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
</Form.Control>
</Form.Group>
</Form.Row>
{this.state.dataModify ? (
<div>
<Row>
<Col md="6">
<Jumbotron>
<UserPageUpdateComponent
user={this.props.user}
month={this.state.selectMonth}
year={this.state.selectYear}
update={this.update}
currData={this.state.data}
/>
<br />
<Button onClick={this.cancelModifyBudget}>
Cancel
</Button>
</Jumbotron>
</Col>
<Col md="6">
<TableComponent
category={this.state.data.labels}
price={this.state.data.data}
/>
</Col>
</Row>
</div>
) : (
<div>
<ButtonToolbar>
<ButtonGroup className="mr-2">
<Button variant="danger" onClick={this.deleteBudget}>
Delete Month's Finances
</Button>
</ButtonGroup>
<ButtonGroup className="mr-2">
<Button onClick={this.modifyBudget}>
Modify Month's Finances
</Button>
</ButtonGroup>
<ButtonGroup className="mr-2">
<DropdownButton
id="dropdown-item-button"
title="Graphs"
>
<Dropdown.Item as="button" onClick={this.handleBar}>
Bar Graph
</Dropdown.Item>
<Dropdown.Item
as="button"
onClick={this.handlePieIncome}
>
Income Pie Chart
</Dropdown.Item>
<Dropdown.Item
as="button"
onClick={this.handlePieExpense}
>
Expenses Pie Chart
</Dropdown.Item>
<Dropdown.Item
as="button"
onClick={this.handleBarGoals}
>
Goal Chart
</Dropdown.Item>
<Dropdown.Item as="button" onClick={this.handleRadar}>
Expense Variance Chart
</Dropdown.Item>
</DropdownButton>
</ButtonGroup>
</ButtonToolbar>
<Form.Switch
checked={this.state.colorMode}
id="custom-switch"
label="Colorblind Mode"
onChange={this.handleSwitchChange}
/>
<br />
{this.state.showTable ? (
<div>
<Button onClick={this.toggleTable}>
Hide Finances Table
</Button>
<br />
<br />
<TableComponent
category={this.state.data.labels}
price={this.state.data.data}
/>
</div>
) : (
<div>
<Button onClick={this.toggleTable}>
Show Finances Table
</Button>
<br />
<br />
</div>
)}
</div>
)}
<CardColumns>
<Card
border="none"
style={
this.state.barActive
? { border: "none" }
: { display: "none" }
}
>
<ChartCardComponent
handleBar={this.handleBar}
labels={this.state.data.labels}
data={this.state.data.data}
Component={"BarChart"}
/>
</Card>
<Card
border="none"
style={
this.state.incomePieActive
? { border: "none" }
: { display: "none" }
}
>
<ChartCardComponent
handlePieIncome={this.handlePieIncome}
labels={this.state.data.labels}
data={this.state.data.data}
color={this.state.colorMode}
Component={"IncomePie"}
/>
</Card>
<Card
border="none"
style={
this.state.expensePieActive
? { border: "none" }
: { display: "none" }
}
>
<ChartCardComponent
handlePieExpense={this.handlePieExpense}
labels={this.state.data.labels}
data={this.state.data.data}
color={this.state.colorMode}
Component={"ExpensePie"}
/>
</Card>
<Card
border="none"
style={
this.state.barGoalsPieActive
? { border: "none" }
: { display: "none" }
}
>
<ChartCardComponent
handleBarGoals={this.handleBarGoals}
data={this.state.data.data}
goal={this.state.data.goal}
color={this.state.colorMode}
Component={"BarGoal"}
/>
</Card>
<Card
style={
this.state.radarActive
? { border: "none" }
: { display: "none" }
}
>
<ChartCardComponent
handleRadar={this.handleRadar}
labels={this.state.data.labels}
data={this.state.data.data}
Component={"RadarPie"}
/>
</Card>
</CardColumns>
</div>
) : (
<div>
<br />
<Form.Row>
<Form.Group as={Col} md="2" controlId="Month2">
<Form.Control
as="select"
name="Month"
onChange={this.handleChange}
value={this.state.selectMonth}
>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</Form.Control>
</Form.Group>
<Form.Group as={Col} md="2" controlId="Year2">
<Form.Control
as="select"
name="Year"
onChange={this.handleChange2}
value={this.state.selectYear}
>
<option value="2020">2020</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
</Form.Control>
</Form.Group>
</Form.Row>
<h3>No Data for this month :(</h3>
<br />
<h4>Would you like to add some?</h4>
<Jumbotron>
<UserPageFormComponent
user={this.props.user}
month={this.state.selectMonth}
year={this.state.selectYear}
update={this.update}
/>
</Jumbotron>
</div>
)}
<LineGraphComponent
year={this.state.selectYear}
user={this.props.user}
/>
</div>
) : (
<Spinner animation="border" variant="primary">
<span className="sr-only">Loading...</span>
</Spinner>
)}
</Container>
);
}
