From 4b11d7ec773530df94c98089b4d68bc838144d6a Mon Sep 17 00:00:00 2001 From: Ebube Date: Tue, 4 Jul 2023 10:38:22 +0100 Subject: [PATCH] . --- src/components/Cards/FamilyMarketCard.jsx | 11 +- src/components/FamilyAcc/FamilyMarket.jsx | 86 ++++-------- src/components/FamilyPopup/SuggestTask.jsx | 155 ++++++++++++++++----- src/components/Helpers/SearchCom.jsx | 14 +- src/lib/index.js | 5 + src/services/UsersService.js | 11 ++ 6 files changed, 179 insertions(+), 103 deletions(-) create mode 100644 src/lib/index.js diff --git a/src/components/Cards/FamilyMarketCard.jsx b/src/components/Cards/FamilyMarketCard.jsx index fd9ee3c..8b1de50 100644 --- a/src/components/Cards/FamilyMarketCard.jsx +++ b/src/components/Cards/FamilyMarketCard.jsx @@ -1,8 +1,5 @@ import React, { useState } from "react"; -import { Link } from "react-router-dom"; -import { toast } from "react-toastify"; -import getTimeAgo from "../../lib/getTimeAgo"; -import Icons from "../Helpers/Icons"; +import { getTimeAgo } from "../../lib"; import SuggestTask from "../FamilyPopup/SuggestTask"; export default function FamilyMarketCard({ className, datas, hidden = false }) { @@ -13,8 +10,7 @@ export default function FamilyMarketCard({ className, datas, hidden = false }) { setPopUp((prev) => !prev); }; // Image - let selectedImage = - datas?.image || require("../../assets/images/banner-job-due.jpg"); + let selectedImage = require(`../../assets/images/family/${datas.banner || "default.jpg"}`); return ( <> @@ -28,6 +24,7 @@ export default function FamilyMarketCard({ className, datas, hidden = false }) {
{popUp && ( - + )} ); diff --git a/src/components/FamilyAcc/FamilyMarket.jsx b/src/components/FamilyAcc/FamilyMarket.jsx index 84bdce3..d909aba 100644 --- a/src/components/FamilyAcc/FamilyMarket.jsx +++ b/src/components/FamilyAcc/FamilyMarket.jsx @@ -1,21 +1,15 @@ import React, { useCallback, useEffect, useMemo, useState } from "react"; -import InputCom from "../Helpers/Inputs/InputCom"; import Layout from "../Partials/Layout"; -import SiteService from "../../services/SiteService"; -import ModalCom from "../Helpers/ModalCom"; import DataIteration from "../Helpers/DataIteration"; import SearchCom from "../Helpers/SearchCom"; -import collections from "../../data/collectionplan_data.json"; import FamilyMarketCard from "../Cards/FamilyMarketCard"; -import { Link } from "react-router-dom"; import usersService from "../../services/UsersService"; import SuggestTask from "../FamilyPopup/SuggestTask"; export default function FamilyMarket() { - const [selectTab, setValue] = useState("today"); const [popUp, setPopUp] = useState(false); - - const [MyFamilySampleTasks, setMyFamilySampleTasks] = useState({ + const [searchQuery, setSearchQuery] = useState(""); + const [myFamilySampleTasks, setMyFamilySampleTasks] = useState({ loading: true, status: false, data: [], @@ -24,8 +18,8 @@ export default function FamilyMarket() { const apiCall = useMemo(() => new usersService(), []); const getMyFamilySampleTasks = useCallback(async () => { - setMyFamilySampleTasks({ loading: true, status: false, data: [] }); try { + setMyFamilySampleTasks({ loading: true, status: false, data: [] }); const res = await apiCall.getFamilySampleTasks(); setMyFamilySampleTasks({ loading: false, @@ -34,57 +28,53 @@ export default function FamilyMarket() { }); } catch (error) { setMyFamilySampleTasks({ loading: false, status: false, data: [] }); - console.log("Error getting tasks"); + console.log("Error getting tasks:", error); } - }, [apiCall, setMyFamilySampleTasks]); + }, [apiCall]); useEffect(() => { getMyFamilySampleTasks(); }, [getMyFamilySampleTasks]); - console.log("My family stuff>> ", MyFamilySampleTasks); + const handleSearch = (event) => { + setSearchQuery(event.target.value); + }; + + const filteredTasks = + myFamilySampleTasks.data?.filter((task) => + task.title.toLowerCase().includes(searchQuery.toLowerCase()) + ) || []; const popUpHandler = () => { setPopUp((prev) => !prev); }; - // tab handler - const filterHandler = (value) => { - setValue(value); - }; - return ( - {/**/}
{/* heading */}

- - Suggest Task to the Parents - + Suggest Task to the Parents

-
-
filterHandler("today")} - className="relative" - >
-
{/* Body */}
{/* filter-search */}
- +
{/* filer-dropdown */}
-
- - {({ datas }) => ( - - )} - + {filteredTasks.map((task) => ( + + ))}
@@ -110,25 +94,3 @@ export default function FamilyMarket() { ); } - -const CloseIcon = () => ( - - - - -); diff --git a/src/components/FamilyPopup/SuggestTask.jsx b/src/components/FamilyPopup/SuggestTask.jsx index 4353f80..4d2ffa9 100644 --- a/src/components/FamilyPopup/SuggestTask.jsx +++ b/src/components/FamilyPopup/SuggestTask.jsx @@ -1,7 +1,43 @@ -import React from "react"; +import React, { useMemo, useState } from "react"; import ModalCom from "../Helpers/ModalCom"; +import { Form, Formik } from "formik"; +import InputCom from "../Helpers/Inputs/InputCom"; +import usersService from "../../services/UsersService"; +const DEFAULT_IMAGE = require("../../assets/images/family/default.jpg"); const SuggestTask = ({ details, onClose, situation }) => { + const [submitTask, setSubmitTask] = useState({ + loading: false, + msg: "", + state: "", + }); + // default image + const selectedImage = details?.selectedImage || DEFAULT_IMAGE; + const initialValues = { + title: details?.title || "", + description: details?.description || "", + }; + + const apiCall = useMemo(() => new usersService(), []); + + const handleSubmit = async (values) => { + try { + setSubmitTask({ loading: true }); + const reqData = { ...values }; + const res = await apiCall.sendFamilySuggestedTasks(reqData); + if (res.internal_return < 0) { + setSubmitTask({ loading: false, msg: res.status, state: "bad" }); + return; + } + setTimeout(() => { + setSubmitTask({ loading: false, msg: res.status, state: "success" }); + onClose(); + }, 2000); + } catch (error) { + setSubmitTask({ loading: false, msg: error, state: "bad" }); + throw new Error("Error Occurred", error); + } + }; return (
@@ -35,40 +71,97 @@ const SuggestTask = ({ details, onClose, situation }) => {
-
-
+ + {(props) => { + return ( +
+
+
+
+
- {/* ACTION SECTION */} -
-
-
-
- + {/* ACTION SECTION */} +
+ {/* Title */} +
+ +
- {/* {requestStatus.loading ? ( + {/* Description */} +
+ +