From 413e61887ead53d7243059d7c193aea304a93c44 Mon Sep 17 00:00:00 2001 From: Adetoba Adedeji Date: Wed, 15 Sep 2021 15:17:04 +0100 Subject: [PATCH 1/5] #421 created skeleton loading screen --- frontend/src/App.jsx | 2 + frontend/src/skeleton/skeleton.jsx | 74 ++++++++++++++++++++++++++++++ 2 files changed, 76 insertions(+) create mode 100644 frontend/src/skeleton/skeleton.jsx diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 22071290..21d88027 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -1,4 +1,5 @@ import React, { useContext } from 'react' +// import Skeleton from './skeleton/skeleton' import { BrowserRouter, Switch, Route } from 'react-router-dom' import Nav from './components/nav' @@ -12,6 +13,7 @@ const App = () => { const { modalData } = useContext(ModalContext) return ( + // {modalData.modalShow && modalData.modalType === 'adminCreate' && ( diff --git a/frontend/src/skeleton/skeleton.jsx b/frontend/src/skeleton/skeleton.jsx new file mode 100644 index 00000000..c66fa771 --- /dev/null +++ b/frontend/src/skeleton/skeleton.jsx @@ -0,0 +1,74 @@ +import React from 'react' + +const Skeleton = ({ type }) => { + const COUNTER = 8 + + const TopMenuSkeleton = () => ( +
+
+
+
+
+ ) + + const CardSkeleton = () => ( +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ) + + if (type === 'top') return + if (type === 'card') + return ( +
+ {Array(COUNTER).fill()} +
+ ) + + return ( +
+ +
+ {Array(COUNTER).fill()} +
+
+ ) +} + +export default Skeleton From a6d2890afa9c5ce6ca847349e0711db1ffaa64be Mon Sep 17 00:00:00 2001 From: Adetoba Adedeji Date: Wed, 15 Sep 2021 16:10:24 +0100 Subject: [PATCH 2/5] reduced skeleton background-color --- frontend/src/skeleton/skeleton.jsx | 52 +++++++++++++++--------------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/frontend/src/skeleton/skeleton.jsx b/frontend/src/skeleton/skeleton.jsx index c66fa771..978bd7fb 100644 --- a/frontend/src/skeleton/skeleton.jsx +++ b/frontend/src/skeleton/skeleton.jsx @@ -1,52 +1,52 @@ import React from 'react' -const Skeleton = ({ type }) => { - const COUNTER = 8 +const Skeleton = ({ type, counter }) => { + const COUNTER = counter || 5 const TopMenuSkeleton = () => ( -
-
-
-
+
+
+
+
) const CardSkeleton = () => ( -
+
-
-
+
+
-
-
-
-
+
+
+
+
-
+
-
+
-
-
+
+
-
+
-
+
-
-
+
+
-
+
-
+
-
-
+
+
@@ -62,7 +62,7 @@ const Skeleton = ({ type }) => { ) return ( -
+
{Array(COUNTER).fill()} From 3518071dbcfe95101be74f0e59bfdaf6734706de Mon Sep 17 00:00:00 2001 From: AndrewGlago Date: Wed, 15 Sep 2021 15:58:10 +0000 Subject: [PATCH 3/5] update --- frontend/src/App.jsx | 2 - frontend/src/api/reminders.js | 4 +- .../{ => components}/skeleton/skeleton.jsx | 4 +- frontend/src/index.jsx | 12 ++-- frontend/src/pages/Upcoming/index.jsx | 72 ++----------------- 5 files changed, 15 insertions(+), 79 deletions(-) rename frontend/src/{ => components}/skeleton/skeleton.jsx (97%) diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 21d88027..22071290 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -1,5 +1,4 @@ import React, { useContext } from 'react' -// import Skeleton from './skeleton/skeleton' import { BrowserRouter, Switch, Route } from 'react-router-dom' import Nav from './components/nav' @@ -13,7 +12,6 @@ const App = () => { const { modalData } = useContext(ModalContext) return ( - // {modalData.modalShow && modalData.modalType === 'adminCreate' && ( diff --git a/frontend/src/api/reminders.js b/frontend/src/api/reminders.js index 3ee101de..d3c8840f 100644 --- a/frontend/src/api/reminders.js +++ b/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) } diff --git a/frontend/src/skeleton/skeleton.jsx b/frontend/src/components/skeleton/skeleton.jsx similarity index 97% rename from frontend/src/skeleton/skeleton.jsx rename to frontend/src/components/skeleton/skeleton.jsx index 978bd7fb..f60a3884 100644 --- a/frontend/src/skeleton/skeleton.jsx +++ b/frontend/src/components/skeleton/skeleton.jsx @@ -62,8 +62,8 @@ const Skeleton = ({ type, counter }) => { ) return ( -
- +
+ {/* */}
{Array(COUNTER).fill()}
diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx index fd24de6d..e36b91cf 100644 --- a/frontend/src/index.jsx +++ b/frontend/src/index.jsx @@ -7,7 +7,7 @@ import './styles/scroll.css' import 'react-activity/dist/Spinner.css' import { ModalContextProvider } from './context/ModalContext' -import { RemindersContextProvider } from './context/RemindersContext' +// import { RemindersContextProvider } from './context/RemindersContext' import { QueryClient, QueryClientProvider } from 'react-query' const queryClient = new QueryClient() @@ -15,11 +15,11 @@ const queryClient = new QueryClient() ReactDOM.render( - - - - - + {/* */} + + + + {/* */} , document.getElementById('deadline_root') diff --git a/frontend/src/pages/Upcoming/index.jsx b/frontend/src/pages/Upcoming/index.jsx index c551144f..47eaa9ce 100644 --- a/frontend/src/pages/Upcoming/index.jsx +++ b/frontend/src/pages/Upcoming/index.jsx @@ -1,76 +1,14 @@ 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 ? (
- {mockArray.map((val) => ( + {fetchedData.map((val) => (
{
) : (
- +
) } From 5246a4189978eff6960f42a88af5ce61515ed8e8 Mon Sep 17 00:00:00 2001 From: AndrewGlago Date: Wed, 15 Sep 2021 16:05:43 +0000 Subject: [PATCH 4/5] remove console logs --- frontend/src/components/deadlineCard/index.jsx | 2 -- .../components/modals/admin/editDeadline/editDeadline.jsx | 8 -------- .../src/components/modals/component/remindMeCheckBox.jsx | 1 - frontend/src/components/modals/component/taskStatus.jsx | 1 - .../components/modals/user/userViewDeadline/userView.jsx | 2 -- frontend/src/components/nav/sortbar.jsx | 1 - frontend/src/pages/Upcoming/index.jsx | 4 ++-- 7 files changed, 2 insertions(+), 17 deletions(-) diff --git a/frontend/src/components/deadlineCard/index.jsx b/frontend/src/components/deadlineCard/index.jsx index 44531a96..6ba27fec 100644 --- a/frontend/src/components/deadlineCard/index.jsx +++ b/frontend/src/components/deadlineCard/index.jsx @@ -77,8 +77,6 @@ const DeadlineCard = ({ ...props, }, }) - console.log(modalData.modalType) - console.log(modalData.modalShow) } return (
{ 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) }} /> { onChange={() => { data.radio = 'medium' setRadio('medium') - console.log(data) }} /> { onChange={() => { data.radio = 'high' setRadio('high') - console.log(data) }} />
diff --git a/frontend/src/components/modals/component/remindMeCheckBox.jsx b/frontend/src/components/modals/component/remindMeCheckBox.jsx index c47642d4..36cc68be 100644 --- a/frontend/src/components/modals/component/remindMeCheckBox.jsx +++ b/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 ? (
  • { 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') diff --git a/frontend/src/components/modals/user/userViewDeadline/userView.jsx b/frontend/src/components/modals/user/userViewDeadline/userView.jsx index 50fe9bf7..25172c26 100644 --- a/frontend/src/components/modals/user/userViewDeadline/userView.jsx +++ b/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 ( diff --git a/frontend/src/components/nav/sortbar.jsx b/frontend/src/components/nav/sortbar.jsx index 33b381ce..c66169d0 100644 --- a/frontend/src/components/nav/sortbar.jsx +++ b/frontend/src/components/nav/sortbar.jsx @@ -41,7 +41,6 @@ const Sortbar = () => { } const sortResults = sortData(initialData, value) - console.log(sortResults) dispatch({ type: actionTypes.SORT, diff --git a/frontend/src/pages/Upcoming/index.jsx b/frontend/src/pages/Upcoming/index.jsx index 47eaa9ce..4fb482e9 100644 --- a/frontend/src/pages/Upcoming/index.jsx +++ b/frontend/src/pages/Upcoming/index.jsx @@ -13,8 +13,8 @@ const UpcomingPage = () => { Date: Wed, 15 Sep 2021 16:10:08 +0000 Subject: [PATCH 5/5] modal update --- frontend/src/components/deadlineCard/index.jsx | 2 +- frontend/src/components/modals/modalBase/index.jsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/deadlineCard/index.jsx b/frontend/src/components/deadlineCard/index.jsx index 6ba27fec..093726c9 100644 --- a/frontend/src/components/deadlineCard/index.jsx +++ b/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, diff --git a/frontend/src/components/modals/modalBase/index.jsx b/frontend/src/components/modals/modalBase/index.jsx index 151258ae..bf232242 100644 --- a/frontend/src/components/modals/modalBase/index.jsx +++ b/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" /> -
    -
    +
    +

    {title}