Skip to content

Commit

Permalink
Merge pull request #488 from adetobaadedeji/skeleton
Browse files Browse the repository at this point in the history
#421 created skeleton loading screen
  • Loading branch information
a11rew authored Sep 15, 2021
2 parents 1a5a29f + bafedfd commit fae13ed
Showing 11 changed files with 92 additions and 98 deletions.
4 changes: 2 additions & 2 deletions frontend/src/api/reminders.js
Original file line number Diff line number Diff line change
@@ -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)
}
4 changes: 1 addition & 3 deletions frontend/src/components/deadlineCard/index.jsx
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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
1 change: 0 additions & 1 deletion frontend/src/components/modals/component/taskStatus.jsx
Original file line number Diff line number Diff line change
@@ -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')
4 changes: 2 additions & 2 deletions frontend/src/components/modals/modalBase/index.jsx
Original file line number Diff line number Diff line change
@@ -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">
Original file line number Diff line number Diff line change
@@ -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 (
1 change: 0 additions & 1 deletion frontend/src/components/nav/sortbar.jsx
Original file line number Diff line number Diff line change
@@ -41,7 +41,6 @@ const Sortbar = () => {
}

const sortResults = sortData(initialData, value)
console.log(sortResults)

dispatch({
type: actionTypes.SORT,
74 changes: 74 additions & 0 deletions frontend/src/components/skeleton/skeleton.jsx
Original file line number Diff line number Diff line change
@@ -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
15 changes: 6 additions & 9 deletions frontend/src/index.jsx
Original file line number Diff line number Diff line change
@@ -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')
76 changes: 7 additions & 69 deletions frontend/src/pages/Upcoming/index.jsx
Original file line number Diff line number Diff line change
@@ -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>
)
}

0 comments on commit fae13ed

Please sign in to comment.