Merge pull request #488 from adetobaadedeji/skeleton

#421 created skeleton loading screen

frontend/src/api/reminders.js

@@ -15,9 +15,9 @@ export const useAllReminders = () => {
 				try {
 					const res = await axiosInstance({
 						method: 'GET',
-						url: '/reminders?type=deadlines',
+						url: '/deadlines',
 					})
-					return { ...res, length: res.data.data.length }
+					return res.data.data
 				} catch (error) {
 					throw errorHandler(error)
 				}

frontend/src/components/deadlineCard/index.jsx

@@ -68,7 +68,7 @@ const DeadlineCard = ({
 		dueIn: remainingStr,
 		assigneeOnline: true,
 	}
-	const { modalData, setModalData } = useContext(ModalContext)
+	const { setModalData } = useContext(ModalContext)
 	const UserViewDeadline = () => {
 		setModalData({
 			modalShow: true,
@@ -77,8 +77,6 @@ const DeadlineCard = ({
 				...props,
 			},
 		})
-		console.log(modalData.modalType)
-		console.log(modalData.modalShow)
 	}
 	return (
 		<div

frontend/src/components/modals/admin/editDeadline/editDeadline.jsx

@@ -37,7 +37,6 @@ const EditDeadline = ({ details }) => {
 							value={data.title}
 							onChange={(value) => {
 								data = { ...data, title: value }
-								console.log(data)
 							}}
 						/>
 					}
@@ -52,7 +51,6 @@ const EditDeadline = ({ details }) => {
 							value={data.description}
 							onChange={(value) => {
 								data = { ...data, description: value }
-								console.log(data)
 							}}
 						/>
 					}
@@ -68,7 +66,6 @@ const EditDeadline = ({ details }) => {
 								value={data.start}
 								onChange={(value) => {
 									data = { ...data, start: value }
-									console.log(data)
 								}}
 							/>
 						}
@@ -82,7 +79,6 @@ const EditDeadline = ({ details }) => {
 								value={data.due}
 								onChange={(value) => {
 									data = { ...data, due: value }
-									console.log(data)
 								}}
 							/>
 						}
@@ -97,7 +93,6 @@ const EditDeadline = ({ details }) => {
 							value={data.assignTo}
 							onChange={(value) => {
 								data = { ...data, assignTo: value }
-								console.log(data)
 							}}
 						/>
 					}
@@ -112,7 +107,6 @@ const EditDeadline = ({ details }) => {
 						onChange={() => {
 							data.radio = 'low'
 							setRadio('low')
-							console.log(data)
 						}}
 					/>
 					<RadioButton
@@ -122,7 +116,6 @@ const EditDeadline = ({ details }) => {
 						onChange={() => {
 							data.radio = 'medium'
 							setRadio('medium')
-							console.log(data)
 						}}
 					/>
 					<RadioButton
@@ -132,7 +125,6 @@ const EditDeadline = ({ details }) => {
 						onChange={() => {
 							data.radio = 'high'
 							setRadio('high')
-							console.log(data)
 						}}
 					/>
 				</div>

frontend/src/components/modals/component/remindMeCheckBox.jsx

@@ -3,7 +3,6 @@ import Checkbox from './checkbox/checkbox'
 
 const RemindMeCheckBox = ({ labels, change }) => {
 	const generatedBoxes = labels.map((item, index) => {
-		console.log(item.checked)
 		return item.checked ? (
 			<li key={index} className="list-none">
 				<Checkbox

frontend/src/components/modals/component/taskStatus.jsx

@@ -9,7 +9,6 @@ const StatusChanger = ({ currentStatus, setStatus, toggler }) => {
 					className=" absolute -ml-20 opacity-0"
 					type="checkbox"
 					onChange={(event) => {
-						console.log(toggler)
 						setStatus({ status: event.target.checked })
 						currentStatus
 							? toggler.current.classList.add('ml-5')

frontend/src/components/modals/modalBase/index.jsx

@@ -15,8 +15,8 @@ const ModalBase = ({ children, title }) => {
 				onClick={closeModal}
 				className="absolute h-screen w-full -z-10"
 			/>
-			<div className="bg-white w-6/7 md:w-3/5 m-auto rounded-4xl">
-				<div className="font-medium leading-6 bg-brand-primary py-6 px-7  flex items-center justify-between text-white rounded-t-4xl">
+			<div className="bg-white w-6/7 md:w-3/5 m-auto">
+				<div className="font-medium leading-6 py-6 px-7 flex items-center justify-between">
 					<h3>{title}</h3>
 				</div>
 				<div id="modal-child" className="px-7 py-8">

frontend/src/components/modals/user/userViewDeadline/userView.jsx

@@ -57,9 +57,7 @@ export default function UserViewDeadline({
 				{ label: '2 hours to deadline', checked: false },
 		  ]
 	const onchange = (index, isChecked) => {
-		console.log(isChecked)
 		labels[index] = { ...labels[index], checked: isChecked }
-		console.log(labels)
 	}
 
 	return (

frontend/src/components/nav/sortbar.jsx

@@ -41,7 +41,6 @@ const Sortbar = () => {
 		}
 
 		const sortResults = sortData(initialData, value)
-		console.log(sortResults)
 
 		dispatch({
 			type: actionTypes.SORT,

frontend/src/components/skeleton/skeleton.jsx

@@ -0,0 +1,74 @@
+import React from 'react'
+
+const Skeleton = ({ type, counter }) => {
+	const COUNTER = counter || 5
+
+	const TopMenuSkeleton = () => (
+		<div className="w-full sm:w-2/3 md:w-1/3 flex  justify-between mt-5 mb-14 bg-gray-white p-2 rounded">
+			<div className="w-36 h-5 bg-gray-200 mr-5 animate-pulse rounded"></div>
+			<div className="w-36 h-5 bg-gray-200 mr-5 animate-pulse rounded"></div>
+			<div className="w-36 h-5 bg-gray-200  animate-pulse rounded"></div>
+		</div>
+	)
+
+	const CardSkeleton = () => (
+		<div className="bg-gray-white border-2 p-4 rounded-2xl">
+			<div className="flex h-5 flex-row justify-between mb-2 items-center">
+				<div className="w-1/3 h-full bg-gray-200 animate-pulse rounded"></div>
+				<div className="w-5 h-1/2 bg-gray-200 animate-pulse rounded"></div>
+			</div>
+			<div className="w-2/3 h-3 bg-gray-200 mb-5 animate-pulse rounded"></div>
+			<div className="w-2/3 h-3 bg-gray-200 mb-1 animate-pulse rounded"></div>
+			<div className="w-2/3 h-3 bg-gray-200 mb-3 animate-pulse rounded"></div>
+			<div className="w-full h-1 bg-gray-200 mb-3 animate-pulse rounded"></div>
+			<div className="w-full h-14 space-x-2 flex flex-row rounded">
+				<div className="w-1/3 h-full bg-gray-50 flex flex-row justify-between px-2 py-2 rounded">
+					<div className="w-1/3 flex flex-col items-center ">
+						<div className="w-5 h-5 bg-gray-300 animate-pulse rounded-full"></div>
+					</div>
+					<div className="w-2/3 flex flex-col space-y-2">
+						<div className="w-2/3 h-3 bg-gray-300 animate-pulse rounded"></div>
+						<div className="w-full h-3 bg-gray-300 animate-pulse rounded"></div>
+					</div>
+				</div>
+				<div className="w-1/3 h-full bg-gray-50 flex flex-row justify-between px-2 py-2 rounded">
+					<div className="w-1/3 flex flex-col items-center ">
+						<div className="w-5 h-5 bg-gray-300 animate-pulse rounded-full"></div>
+					</div>
+					<div className="w-2/3 flex flex-col space-y-2">
+						<div className="w-2/3 h-3 bg-gray-300 animate-pulse rounded"></div>
+						<div className="w-full h-3 bg-gray-300 animate-pulse rounded"></div>
+					</div>
+				</div>
+				<div className="w-1/3 h-full bg-gray-50 flex flex-row justify-between px-2 py-2 rounded">
+					<div className="w-1/3 flex flex-col items-center ">
+						<div className="w-5 h-5 bg-gray-300 animate-pulse rounded-full"></div>
+					</div>
+					<div className="w-2/3 flex flex-col space-y-2">
+						<div className="w-2/3 h-3 bg-gray-300 animate-pulse rounded"></div>
+						<div className="w-full h-3 bg-gray-300 animate-pulse rounded"></div>
+					</div>
+				</div>
+			</div>
+		</div>
+	)
+
+	if (type === 'top') return <TopMenuSkeleton />
+	if (type === 'card')
+		return (
+			<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+				{Array(COUNTER).fill(<CardSkeleton />)}
+			</div>
+		)
+
+	return (
+		<div className="w-full h-full">
+			{/* <TopMenuSkeleton /> */}
+			<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+				{Array(COUNTER).fill(<CardSkeleton />)}
+			</div>
+		</div>
+	)
+}
+
+export default Skeleton

frontend/src/index.jsx

@@ -7,22 +7,19 @@ import './styles/scroll.css'
 import 'react-activity/dist/Spinner.css'
 
 import { ModalContextProvider } from './context/ModalContext'
-import { RemindersContextProvider } from './context/RemindersContext'
-import { SortProvider } from './components/sort'
+// import { RemindersContextProvider } from './context/RemindersContext'
 import { QueryClient, QueryClientProvider } from 'react-query'
 
 const queryClient = new QueryClient()
 
 ReactDOM.render(
 	<React.StrictMode>
 		<QueryClientProvider client={queryClient}>
-			<RemindersContextProvider>
-				<ModalContextProvider>
-					<SortProvider>
-						<App />
-					</SortProvider>
-				</ModalContextProvider>
-			</RemindersContextProvider>
+			{/* <RemindersContextProvider> */}
+			<ModalContextProvider>
+				<App />
+			</ModalContextProvider>
+			{/* </RemindersContextProvider> */}
 		</QueryClientProvider>
 	</React.StrictMode>,
 	document.getElementById('deadline_root')

frontend/src/pages/Upcoming/index.jsx

@@ -1,82 +1,20 @@
 import React from 'react'
-// import { useAllReminders } from '../../api/reminders'
+import { useAllReminders } from '../../api/reminders'
 import DeadlineCard from '../../components/deadlineCard'
-import { Spinner } from 'react-activity'
+import Skeleton from '../../components/skeleton/skeleton'
 
 const UpcomingPage = () => {
-	// const { fetchedData, isPlaceholderData, isLoading } = useAllReminders()
-	const isPlaceholderData = false
-	const isLoading = false
-
-	const mockArray = [
-		{
-			object_id: '614077c56173056af01b4ba8',
-			title: 'Accounting - Spreadsheet',
-			description:
-				'Create new sales spreadsheet for Creative Juices enterprise.',
-			status: 'pending',
-			startDate: '2021-08-31T00:00:00.000Z',
-			dueDate: '2021-11-15T07:30:00.000Z',
-			creator: 'Joan',
-			assignee: 'accounting',
-			priority: 'low',
-		},
-		{
-			object_id: '614077c56173056af01b4br7',
-			title: 'Website Launch',
-			description:
-				'Finalise and relaunch our company website. We’ve got 24 hours guys.',
-			status: 'pending',
-			startDate: '2021-08-30T00:00:00.000Z',
-			dueDate: '2021-09-17T00:00:00.000Z',
-			creator: 'Joe',
-			assignee: 'dev-team',
-			priority: 'high',
-		},
-		{
-			object_id: '614077c56173056af34b4br8',
-			title: 'Logo Design',
-			description: 'Redesign the edges of Fine touch LLC’s company logo.',
-			status: 'completed',
-			startDate: '2021-05-30T00:00:00.000Z',
-			dueDate: '2021-09-23T00:00:00.000Z',
-			creator: 'Mark',
-			assignee: 'design-team',
-			priority: 'medium',
-		},
-		{
-			object_id: '614077c561sd33056af34b4dne',
-			title: 'Frontend - Nav Fixes',
-			description: 'Fix Powerhouse.com’s buggy navigation bar.',
-			status: 'pending',
-			startDate: '2021-08-01T00:00:00.000Z',
-			dueDate: '2021-09-20T00:00:00.000Z',
-			creator: 'Juliet',
-			assignee: 'dev-team',
-			priority: 'high',
-		},
-		{
-			object_id: '414057c561sd354656af34b4dt',
-			title: "COO's Birthday",
-			description: 'Handle all the preparations for John’s surprise birthday.',
-			status: 'pending',
-			startDate: '2021-09-03T00:00:00.000Z',
-			dueDate: '2021-12-23T00:00:00.000Z',
-			creator: 'Peter',
-			assignee: 'operations-team',
-			priority: 'low',
-		},
-	]
+	const { fetchedData, isPlaceholderData, isLoading } = useAllReminders()
 
 	return !isPlaceholderData && !isLoading ? (
 		<div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
-			{mockArray.map((val) => (
+			{fetchedData.map((val) => (
 				<div key={val.object_id}>
 					<DeadlineCard
 						title={val.title}
 						description={val.description}
-						assigner={val.creator}
-						assignees={val.assignee}
+						assigner={val.creator.userName}
+						assignees={val.assignee.channelName}
 						startDate={val.startDate}
 						dueDate={val.dueDate}
 						priority={val.priority}
@@ -86,7 +24,7 @@ const UpcomingPage = () => {
 		</div>
 	) : (
 		<div className="flex h-screen justify-center items-center">
-			<Spinner color="#00B87C" size={32} speed={1} animating={true} />
+			<Skeleton counter={3} />
 		</div>
 	)
 }