Skip to content

Commit

Permalink
added the share button
Browse files Browse the repository at this point in the history
  • Loading branch information
Pacific911 committed Nov 2, 2023
1 parent 19743e1 commit 247e10b
Show file tree
Hide file tree
Showing 5 changed files with 185 additions and 14 deletions.
7 changes: 6 additions & 1 deletion src/components/sidebar/sidebarItems.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,11 @@ export const sidebarItems1 = [
icon: <Icon icon="fontisto:pie-chart-1"></Icon>,
title: 'Dashboard',
},
{
path: '/create-form',
icon: <Icon icon="fluent:form-28-regular"></Icon>,
title: 'Application Forms',
},
{
path: '/organisations',
icon: <Icon icon="fluent:people-team-20-filled"></Icon>,
Expand All @@ -20,7 +25,7 @@ export const sidebarItems1 = [
{
path: '/job-post',
icon: <Icon icon="ic:round-maps-home-work"></Icon>,
title: 'View Job Post',
title: 'Job Posts',
},
{
path: '/admins',
Expand Down
155 changes: 155 additions & 0 deletions src/pages/AdminPostJob.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router';
import NavBar from '../components/sidebar/navHeader';
import { BsShareFill, BsBackspace } from 'react-icons/bs';
import { fetchSingleJobPost } from '../redux/actions/fetchSingleJobPostAction';
import { useAppDispatch, useAppSelector } from '../hooks/hooks';
import { connect } from 'react-redux';
import ReactDOM from 'react-dom';

function AdminPostJob(props: any) {
const url = window.location.href;

const { fetchSingleJobPostStates } = props;
console.log('fetchSingleJobPostStates:', fetchSingleJobPostStates);
const dispatch = useAppDispatch();
const params = useParams();
const [jobPostId, setjobPostId] = useState(params.id);

useEffect(() => {
dispatch(fetchSingleJobPost(jobPostId));
}, [jobPostId]);

const [isDropdownOpen, setIsDropdownOpen] = useState(false);

const toggleDropdown = () => {
setIsDropdownOpen(!isDropdownOpen);
};

return (
<>
<div className="h-screen flex flex-col items-center dark:bg-dark-frame-bg">
<div className="flex flex-col justify-start mt-24 items-start p-5 w-[95%] h-[75%] lg:w-1/2 md_:mx-auto overflow-hidden bg-white dark:bg-dark-bg">
<a href="/sharedPosts#/job-post">
<h2 className="text-black font-bold my-5">
<BsBackspace className="float-left m-1" />
Back
</h2>
</a>
<h2 className="dark:text-white text-black font-bold my-5">
<div className="float-left m-1" />
Job Post information
</h2>
<div className="flex flex-col justify-center gap-3 mb-8">
{fetchSingleJobPostStates?.data != null && (
<>
<div className="flex flex-col">
<h3 className="text-white">Job title</h3>
<p className="text-gray-500 text-sm dark:text-gray-400">
{fetchSingleJobPostStates.data.title}
</p>
</div>
<div className="flex flex-col">
<h3 className="text-white">Program</h3>
<p className="text-gray-500 text-sm dark:text-gray-400">
{fetchSingleJobPostStates.data.program.title}
</p>
</div>
<div className="flex flex-col">
<h3 className="text-white">Cycle</h3>
<p className="text-gray-500 text-sm dark:text-gray-400">
{fetchSingleJobPostStates.data.cycle.name}
</p>
</div>
<div className="flex flex-col">
<h3 className="text-white">Cohort</h3>
<p className="text-gray-500 text-sm dark:text-gray-400">
{fetchSingleJobPostStates.data.cohort.title}
</p>
</div>
<div className="flex flex-col">
<h3 className="text-white">Program description</h3>
<p className="text-gray-500 text-sm dark:text-gray-400">
{fetchSingleJobPostStates.data.description}
</p>
</div>
<div className="relative inline-block">
<button
id="dropdownDelayButton"
data-dropdown-toggle="dropdownDelay"
data-dropdown-delay="500"
data-dropdown-trigger="hover"
className="text-white focus:ring-4 focus:outline-none focus:#56C870 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-[#56C870] dark:hover:bg-[#56C870] dark:focus:#56C870"
type="button"
onClick={toggleDropdown}
>
Share Via{' '}
<svg
className="w-2.5 h-2.5 ml-2.5"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 10 6"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="m1 1 4 4 4-4"
/>
</svg>
</button>
{isDropdownOpen && (
<div
id="dropdownDelay"
className="z-10 absolute bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700"
>
<ul className="py-2 text-sm text-gray-700 dark:text-gray-200">
<li>
<a
href={`https://www.linkedin.com/shareArticle?mini=true&url=${url}`}
target="_blank"
className="block px-4 py-2 hover-bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
>
LinkedIn
</a>
</li>
<li>
<a
href={`mailto:[email protected]?&subject=You+have+to+See+this!&cc=&bcc=&body=Check+out+this+site?url=test.com&&text=Andela is hiring software developers`}
target="_blank"
className="block px-4 py-2 hover-bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
>
Gmail
</a>
</li>
<li>
<a
href={`https://twitter.com/intent/tweet?url=test.com&&text=Andela is hiring software developers`}
target="_blank"
className="block px-4 py-2 hover-bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
>
Twitter
</a>
</li>
</ul>
</div>
)}
</div>
</>
)}
</div>
</div>
</div>
</>
);
}

const mapState = (state: any) => ({
fetchSingleJobPostStates: state.fetchSingleJobPost,
});

export default connect(mapState, {
fetchSingleJobPost,
})(AdminPostJob);
2 changes: 1 addition & 1 deletion src/pages/JobPost/job.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -295,7 +295,7 @@ const Jobs = (props: any) => {
<tbody className="overflow-y-auto">
{fetchJobPostStates?.data?.map((item: any) => (
<tr
className="hover:bg-slate-700 transition-colors"
className="dark:hover:bg-slate-700 hover:bg-slate-300 transition-colors"
key={item.id}
>
<td className="px-5 py-5 border-b border-gray-200 dark:border-dark-tertiary text-sm">
Expand Down
25 changes: 14 additions & 11 deletions src/pages/JobPost/viewSingleJob.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import React, { useEffect, useState } from 'react';
import { fetchSingleJobPost } from '../../redux/actions/fetchSingleJobPostAction';
import { useAppDispatch, useAppSelector } from '../../hooks/hooks';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';

const SingleJobPostDetails = (props: any) => {
const { fetchSingleJobPostStates } = props;
Expand All @@ -19,50 +20,52 @@ const SingleJobPostDetails = (props: any) => {
return (
<>
<div className="h-screen flex flex-col items-center dark:bg-dark-frame-bg">
<div className="flex flex-col justify-start mt-24 items-start p-5 w-[95%] lg:w-1/2 md_:mx-auto overflow-hidden dark:bg-dark-bg">
<h2 className="text-white font-bold my-5">
<div className="flex flex-col justify-start mt-24 items-start p-5 w-[95%] lg:w-1/2 md_:mx-auto overflow-hidden bg-white dark:bg-dark-bg">
<h2 className="dark:text-white text-black font-bold my-5">
<BsFillPersonLinesFill className="float-left m-1" />
Job Post information
</h2>
<div className="flex flex-col justify-center gap-3 mb-8">
{fetchSingleJobPostStates?.data != null && (
<>
<div className="flex flex-col">
<h3 className="text-white">Job title</h3>
<h3 className="dark:text-white text-black">Job title</h3>
<p className="text-gray-500 text-sm dark:text-gray-400">
{fetchSingleJobPostStates.data.title}
</p>
</div>
<div className="flex flex-col">
<h3 className="text-white">Program</h3>
<h3 className="dark:text-white text-black">Program</h3>
<p className="text-gray-500 text-sm dark:text-gray-400">
{fetchSingleJobPostStates.data.program.title}
</p>
</div>
<div className="flex flex-col">
<h3 className="text-white">Cycle</h3>
<h3 className="dark:text-white text-black">Cycle</h3>
<p className="text-gray-500 text-sm dark:text-gray-400">
{fetchSingleJobPostStates.data.cycle.name}
</p>
</div>
<div className="flex flex-col">
<h3 className="text-white">Cohort</h3>
<h3 className="dark:text-white text-black">Cohort</h3>
<p className="text-gray-500 text-sm dark:text-gray-400">
{fetchSingleJobPostStates.data.cohort.title}
</p>
</div>
<div className="flex flex-col">
<h3 className="text-white">Program description</h3>
<h3 className="dark:text-white text-black">
Program description
</h3>
<p className="text-gray-500 text-sm dark:text-gray-400">
{fetchSingleJobPostStates.data.description}
</p>
</div>
<button
type="submit"
className="flex bg-primary dark:bg-[#56C870] rounded-md py-2 px-4 text-white font-medium cursor-pointer"
<Link
to={`/Job/Post/view/${fetchSingleJobPostStates.data.id}`}
className="flex bg-primary dark:bg-[#56C870] rounded-md py-2 px-4 dark:text-white text-black font-medium cursor-pointer"
>
Share Post
</button>
</Link>
</>
)}
</div>
Expand Down
10 changes: 9 additions & 1 deletion src/routes/routes.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ import Applications from '../pages/Applications';
import ScheduleInterview from '../pages/ScheduleInterview';
import SubmitApplication from '../pages/SubmitApplication';
import SingleSharedJobPostDetails from '../pages/singleSharedJobDetails';
import AdminPostJob from '../pages/AdminPostJob';

function Navigation() {
return (
Expand Down Expand Up @@ -233,7 +234,14 @@ function Navigation() {
<SubmitApplication />
</PrivateRoute>
}

/>
<Route
path="/job/post/view/:id"
element={
<PrivateRoute>
<AdminPostJob/>
</PrivateRoute>
}
/>
<Route
path="*"
Expand Down

0 comments on commit 247e10b

Please sign in to comment.