Skip to content

Commit e79417c

Browse files
uwituzebuwituzeb
committed
applicant share application
1 parent 7371fb1 commit e79417c

File tree

2 files changed

+85
-48
lines changed

2 files changed

+85
-48
lines changed

‎src/pages/Applicant/ApplicantLayout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const ApplicantLayout = () => {
1919
setExpanded={setSidebarExpanded}
2020
/>
2121
</div>
22-
<main className="flex w-[100%] justify-center items-center flex-1">
22+
<main className="flex w-[100%] justify-center items-center flex-1 dark:bg-dark-frame-bg">
2323
<Outlet />
2424
</main>
2525
</div>

‎src/pages/SubmitApplication.tsx‎

Lines changed: 84 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,110 @@
11
import { useParams } from 'react-router';
22
import NavBar from '../components/sidebar/navHeader';
33
import React, { useEffect } from 'react';
4+
import { BsFillPersonLinesFill } from "react-icons/bs";
45
import { fetchSingleJobPost } from '../redux/actions/fetchSingleJobPostAction';
56
import { connect, useDispatch } from 'react-redux';
67
import { useAppSelector } from 'hooks/hooks';
8+
import { FaLinkedin, FaTelegram, FaTwitter, FaWhatsapp, FaEnvelope } from "react-icons/fa";
9+
import { FcGoogle } from 'react-icons/fc';
710

811
type Props = {};
912

1013
const SubmitApplication = (props: any) => {
1114
const { fetchSingleJobPostStates, updateJobPostStates } = props;
1215
const dispatch = useDispatch();
1316
const { id } = useParams();
14-
console.log(id);
1517
useEffect(() => {
1618
dispatch(fetchSingleJobPost(id));
1719
}, [id]);
1820

19-
console.log(fetchSingleJobPostStates?.data);
21+
const shareMessage = `Check out this job opportunity: ${fetchSingleJobPostStates?.data?.title}\n${window.location.href}`;
22+
23+
const shareOnTwitterDM = () => {
24+
const url = `https://twitter.com/messages/compose?text=${encodeURIComponent(shareMessage)}`;
25+
window.open(url, "_blank", "width=600,height=400");
26+
};
27+
28+
const shareOnWhatsApp = () => {
29+
const url = `https://api.whatsapp.com/send?text=${encodeURIComponent(shareMessage)}`;
30+
window.open(url, "_blank", "width=600,height=400");
31+
};
32+
33+
const shareOnTelegram = () => {
34+
const url = `https://t.me/share/url?url=${encodeURIComponent(window.location.href)}`;
35+
window.open(url, "_blank", "width=600,height=400");
36+
};
37+
38+
const shareOnLinkedIn = () => {
39+
const url = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(window.location.href)}`;
40+
window.open(url, "_blank");
41+
};
42+
43+
const shareOnGmail = () => {
44+
const subject = encodeURIComponent("Interesting Job Opportunity");
45+
const body = encodeURIComponent(shareMessage);
46+
const url = `https://mail.google.com/mail/?view=cm&fs=1&to=&su=${subject}&body=${body}`;
47+
window.open(url, "_blank");
48+
}
2049

2150
return (
2251
<>
23-
<div className="flex flex-col w-[100%]">
24-
<div className="flex flex-row">
25-
<div className="w-full">
26-
<div>
27-
<div className="bg-light-bg dark:bg-dark-frame-bg min-h-screen overflow-y-hidden overflow-x-hidden flex justify-center ">
28-
{/* form */}
29-
<div className="flex flex-col w-[60%] dark:bg-dark-tertiary rounded-lg p-5 md:w-[90%] ">
30-
{/* TITLE */}
31-
<div className="flex justify-center">
32-
<p className="text-white font-semibold underline font-size-10">
33-
{fetchSingleJobPostStates?.data?.title}
34-
</p>
35-
</div>
36-
{/* DESCRIPTION */}
37-
<div className="flex justify-start width-[80%] ml-3 mt-5">
38-
<p className="text-white font-sans">
39-
{fetchSingleJobPostStates?.data?.description}
40-
</p>
41-
</div>
42-
{/* REQUIREMENTS */}
43-
<div className="flex flex-col justify-start width-[80%] ml-5 mt-5 ">
44-
<p className="text-white font-semibold">
45-
Here are the requirements:
46-
</p>
47-
<ul className="list-disc ml-5">
48-
{fetchSingleJobPostStates?.data?.program?.requirements.map(
49-
(item: any) => (
50-
<li className="text-white font-sans">{item}</li>
51-
),
52-
)}
53-
</ul>
54-
</div>
55-
{/* FORM */}
56-
<div className="flex justify-center round-md mt-5">
57-
<iframe
58-
src={fetchSingleJobPostStates?.data?.link}
59-
width="640"
60-
height="100"
61-
>
62-
Loading…
63-
</iframe>
64-
</div>
52+
<div className="min-h-screen flex flex-col items-center dark:bg-dark-frame-bg">
53+
<div className="flex flex-col justify-start mt-24 items-start p-5 w-[95%] md_:mx-auto overflow-hidden dark:bg-dark-bg">
54+
<h2 className="text-white font-bold my-5">
55+
<BsFillPersonLinesFill className="float-left m-1" />
56+
Job Post information
57+
</h2>
58+
<div className="flex flex-col justify-center gap-3 mb-8">
59+
{fetchSingleJobPostStates?.data != null && (
60+
<>
61+
<div className="flex flex-col">
62+
<h3 className="text-white">Job title</h3>
63+
<p className="text-gray-500 text-sm dark:text-gray-400">{fetchSingleJobPostStates.data.title}</p>
64+
</div>
65+
<div className="flex flex-col">
66+
<h3 className="text-white">Program</h3>
67+
<p className="text-gray-500 text-sm dark:text-gray-400">{fetchSingleJobPostStates.data.program.title}</p>
6568
</div>
66-
</div>
67-
</div>
69+
<div className="flex flex-col">
70+
<h3 className="text-white">Cycle</h3>
71+
<p className="text-gray-500 text-sm dark:text-gray-400">{fetchSingleJobPostStates.data.cycle.name}</p>
72+
</div>
73+
<div className="flex flex-col">
74+
<h3 className="text-white">Cohort</h3>
75+
<p className="text-gray-500 text-sm dark:text-gray-400">{fetchSingleJobPostStates.data.cohort.title}</p>
76+
</div>
77+
<div className="flex flex-col">
78+
<h3 className="text-white">Program description</h3>
79+
<p className="text-gray-500 text-sm dark:text-gray-400">{fetchSingleJobPostStates.data.description}</p>
80+
</div>
81+
<div className="text-white">Share Job Post</div>
82+
<div className="flex fle gap-4 mt-6">
83+
<button onClick={shareOnTwitterDM} className="flex items-center gap-2 px-4 py-2 bg-blue-400 text-white rounded hover:bg-blue-500 transition-colors">
84+
<FaTwitter />
85+
</button>
86+
<button onClick={shareOnWhatsApp} className="flex items-center gap-2 px-4 py-2 bg-green text-white rounded hover:bg-green-600 transition-colors">
87+
<FaWhatsapp />
88+
</button>
89+
<button onClick={shareOnTelegram} className="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">
90+
<FaTelegram />
91+
</button>
92+
<button onClick={shareOnLinkedIn} className="flex items-center gap-2 px-4 py-2 bg-blue-800 text-white rounded hover:bg-blue-900 transition-colors">
93+
<FaLinkedin />
94+
</button>
95+
<button onClick={shareOnGmail} className="flex items-center justify-center gap-2 px-4 py-2 bg-white text-gray-700 rounded hover:bg-gray-100 transition-colors">
96+
<FcGoogle size={20} />
97+
</button>
98+
</div>
99+
</>
100+
)}
101+
</div>
102+
103+
<div className="flex justify-center round-md mt-5">
104+
<iframe src={fetchSingleJobPostStates?.data?.link} width="640" height="100">Loading…</iframe>
68105
</div>
69106
</div>
70-
</div>
107+
</div>
71108
</>
72109
);
73110
};

0 commit comments

Comments
 (0)