Skip to content

Commit

Permalink
Merge pull request #94 from Manas1820/main
Browse files Browse the repository at this point in the history 
Notifications done
  • Loading branch information
@Manas1820
Manas1820 authored Nov 30, 2021
2 parents 279f970 + 3aca671 commit 4c98caf
Show file tree
Hide file tree
Showing 2 changed files with 149 additions and 79 deletions.
2 changes: 1 addition & 1 deletion src/routes/dashboard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ class Dashboard extends React.Component {
const lowStock = this.props.data.lowStock
? this.props.data.lowStock.length
: 0;
const outOfStock = this.props.outOfStock
const outOfStock = this.props.data.outOfStock
? this.props.data.outOfStock.length
: 0;
console.log(lowStock, outOfStock);
Expand Down
226 changes: 148 additions & 78 deletions src/routes/notifications.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
import React from "react";
import "../index.css";
import Header from "../components/header";
import { HomeActions } from "../redux/actions";
import { store } from "../redux";
import Loader from "../components/loader";
import { connect } from "react-redux";

const notifications = [
{
Expand All @@ -19,91 +23,157 @@ const notifications = [
// More notifications...
];

const Notifications = () => {
return (
<div>
<Header />
{/* main content container */}
<div className="pt-20">
<h1 className="ml-10 text-3xl font-bold mb-4">Notifications</h1>
<div className="flex flex-col items-center justify-center">
<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<div className=" shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
<table className="w-full divide-y divide-gray-200">
<thead className="bg-gray-50 w-full">
<tr>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
Medicine
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
Status
</th>
<th scope="col" className="relative px-6 py-3">
<span className="sr-only">order this item</span>
</th>
<th scope="col" className="relative px-6 py-3">
<span className="sr-only">done</span>
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{notifications.map((notification) => (
<tr key={notification.email}>
<td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-center">
<div className="flex-shrink-0 h-10 w-10">
<img
className="h-10 w-10 rounded-full"
src={notification.image}
alt=""
/>
class Notifications extends React.Component {
componentDidMount() {
this.props.loadData();
}
render() {
const lowStock = this.props.data.lowStock ? this.props.data.lowStock : [];
const outOfStock = this.props.data.outOfStock
? this.props.data.outOfStock
: [];
return (
<div>
<Header />
{/* main content container */}
<div className="pt-20">
<h1 className="ml-10 text-3xl font-bold mb-4">Notifications</h1>
<div className="flex flex-col items-center justify-center">
<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<div className=" shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
<table className="w-full divide-y divide-gray-200">
<thead className="bg-gray-50 w-full">
<tr>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
Medicine
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
Status
</th>
<th scope="col" className="relative px-6 py-3">
<span className="sr-only">order this item</span>
</th>
<th scope="col" className="relative px-6 py-3">
<span className="sr-only">done</span>
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{outOfStock.map((notification) => (
<tr key={notification.email}>
<td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-center">
<div className="flex-shrink-0 h-10 w-10">
<img
className="h-10 w-10 rounded-full"
src={notification.image}
alt=""
/>
</div>
<div className="ml-4">
<div className="text-sm font-medium text-gray-900">
{notification.name}
</div>
</div>
</div>
<div className="ml-4">
<div className="text-sm font-medium text-gray-900">
{notification.name}
</td>
<td className="px-6 py-4 whitespace-nowrap">
<span className="p-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-error text-red-100">
Out of stock
</span>
</td>
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button
href="#"
className="text-indigo-600 hover:text-indigo-900 rounded-lg border py-3 px-8 flex"
>
Order this item
</button>
</td>
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<a
href="#"
className="text-indigo-600 hover:text-indigo-900 rounded-lg border py-3 px-8"
>
done
</a>
</td>
</tr>
))}
{lowStock.map((notification) => (
<tr key={notification.email}>
<td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-center">
<div className="flex-shrink-0 h-10 w-10">
<img
className="h-10 w-10 rounded-full"
src={notification.image}
alt=""
/>
</div>
<div className="ml-4">
<div className="text-sm font-medium text-gray-900">
{notification.name}
</div>
</div>
</div>
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<span className="p-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-error text-red-100">
Out of stock
</span>
</td>
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button
href="#"
className="text-indigo-600 hover:text-indigo-900 rounded-lg border py-3 px-8 flex"
>
Order this item
</button>
</td>
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<a
href="#"
className="text-indigo-600 hover:text-indigo-900 rounded-lg border py-3 px-8"
>
done
</a>
</td>
</tr>
))}
</tbody>
</table>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<span className="p-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100">
Low stock
</span>
</td>
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button
href="#"
className="text-indigo-600 hover:text-indigo-900 rounded-lg border py-3 px-8 flex"
>
Order this item
</button>
</td>
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<a
href="#"
className="text-indigo-600 hover:text-indigo-900 rounded-lg border py-3 px-8"
>
done
</a>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
);
}
}

const mapStateToProps = (state) => {
return {
data: state.home.home,
isLoading: state.home.isLoading,
isError: state.home.isError,
maxLimit: state.auth.user.user.maxLimit,
};
};

const mapDispatchToProps = (dispatch) => {
const state = store.getState();
return {
loadData: () => dispatch(HomeActions.read(state.auth.user.token)),
};
};

export default Notifications;
export default connect(mapStateToProps, mapDispatchToProps)(Notifications);

0 comments on commit 4c98caf

Please sign in to comment.