From e01bfa369bb8fc143675fdb2a09c9d9b04057b13 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Fri, 1 Mar 2024 18:49:23 +0100 Subject: [PATCH] created pages for family resources --- src/Routers.jsx | 9 + src/components/Home/FamilyDash.jsx | 27 +-- .../Resources/tabs/MyUploadedFiles.jsx | 2 +- .../familyResources/FamAIQuestion.jsx | 137 +++++++++++++ src/components/familyResources/FamBlog.jsx | 58 ++++++ .../familyResources/FamBlogItem.jsx | 54 ++++++ src/components/familyResources/FamGames.jsx | 10 + .../familyResources/FamInterest.jsx | 10 + src/components/familyResources/FamMyFiles.jsx | 180 ++++++++++++++++++ .../familyResources/FamWorkInProgress.jsx | 24 +++ src/views/FamAIQuestionPage.jsx | 10 + src/views/FamBlogPage.jsx | 10 + src/views/FamGamesPage.jsx | 9 + src/views/FamInterestPage.jsx | 10 + src/views/FamMyFilesPage.jsx | 10 + src/views/FamWorkInProgressPage.jsx | 10 + 16 files changed, 546 insertions(+), 24 deletions(-) create mode 100644 src/components/familyResources/FamAIQuestion.jsx create mode 100644 src/components/familyResources/FamBlog.jsx create mode 100644 src/components/familyResources/FamBlogItem.jsx create mode 100644 src/components/familyResources/FamGames.jsx create mode 100644 src/components/familyResources/FamInterest.jsx create mode 100644 src/components/familyResources/FamMyFiles.jsx create mode 100644 src/components/familyResources/FamWorkInProgress.jsx create mode 100644 src/views/FamAIQuestionPage.jsx create mode 100644 src/views/FamBlogPage.jsx create mode 100644 src/views/FamGamesPage.jsx create mode 100644 src/views/FamInterestPage.jsx create mode 100644 src/views/FamMyFilesPage.jsx create mode 100644 src/views/FamWorkInProgressPage.jsx diff --git a/src/Routers.jsx b/src/Routers.jsx index a44c638..e62da5f 100644 --- a/src/Routers.jsx +++ b/src/Routers.jsx @@ -60,6 +60,10 @@ import YourPages from "./views/YourPage_"; import ParentWaitingPage from "./views/ParentWaitingPage"; import FamilyPendingOfferPage from "./views/FamilyPendingOfferPage"; import FamilyPastDuePage from "./views/FamilyPastDuePage"; +import FamBlogPage from "./views/FamBlogPage" +import FamAIQuestionPage from "./views/FamAIQuestionPage" +import FamMyFilesPage from "./views/FamMyFilesPage" +import FamWorkInProgressPage from "./views/FamWorkInProgressPage"; export default function Routers() { return ( @@ -135,6 +139,11 @@ export default function Routers() { } /> } /> } /> + } /> + } /> + } /> + } /> + } /> Resources
{tab_categories.data.map((item) => { - // onClick={()=>navigate('/resources', {state:{tab:'created'}})} - let resourceState = '' - switch(item?.action){ - case 'fam-blog': - resourceState = 'blog' - break - case 'ai-question': - resourceState = 'onsale' - break - case 'myfiles': - resourceState = 'created' - break - case 'ai-lab': - resourceState = 'onsale' - break - default: - resourceState = 'blog' - break - } - // console.log('EX', item.enabled, item?.action, resourceState) - if(item.enabled){ + // if(item.enabled){ + // } return ( - +
banner image @@ -151,7 +132,7 @@ export default function FamilyDash({ MyActiveJobList, serverImg }) {
- )} + ) })}
diff --git a/src/components/Resources/tabs/MyUploadedFiles.jsx b/src/components/Resources/tabs/MyUploadedFiles.jsx index d1d93aa..fbe7d6c 100644 --- a/src/components/Resources/tabs/MyUploadedFiles.jsx +++ b/src/components/Resources/tabs/MyUploadedFiles.jsx @@ -134,7 +134,7 @@ export default function MyUploadedFiles({ uploadedFiles }) { prev={currentPage == 0 ? true : false} next={ currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >= - uploadedFiles?.data.length + uploadedFiles?.data?.length ? true : false } diff --git a/src/components/familyResources/FamAIQuestion.jsx b/src/components/familyResources/FamAIQuestion.jsx new file mode 100644 index 0000000..4535a3c --- /dev/null +++ b/src/components/familyResources/FamAIQuestion.jsx @@ -0,0 +1,137 @@ +import React, { useEffect, useState } from 'react' +import Layout from '../Partials/Layout' + +import usersService from '../../services/UsersService' +import SearchCom from '../Helpers/SearchCom' +import LoadingSpinner from '../Spinners/LoadingSpinner' +import { useLocation } from 'react-router-dom' +import CustomBreadcrumb from '../Breadcrumb/CustomBreadcrumb' +import { localImgLoad } from '../../lib' + +export default function FamAIQuestion() { + const apiCall = new usersService() + + const {pathname} = useLocation() + + const [requestStatus, setRequestStatus] = useState({loading: false, status: false, message: ''}) + + const [error, setError] = useState({question: '', searchPhrase: ''}) + + const [questions, setQuestions] = useState({loading: true, data: []}) + + const [askQuestion, setAskQuestion] = useState({question: '', searchPhrase: ''}) + + const changeAskQuestion = ({target: {name, value}}) => { + setAskQuestion(prev => ({...prev, [name]: value})) + setRequestStatus({loading: false, status: false, message: ''}) + } + + const onSearch = () => { + setError({question: '', searchPhrase: ''}) // sets error to false + if(!askQuestion.question){ + return setError(prev => ({...prev, question: 'Select a question'})) + } + if(!askQuestion.searchPhrase){ + return setError(prev => ({...prev, searchPhrase: 'Enter search parameter'})) + } + if(askQuestion.searchPhrase.length > 60){ + return setError(prev => ({...prev, searchPhrase: 'Max of 60 characters'})) + } + + setRequestStatus({loading: true, status: false, message: ''}) + let reqData = { + question_key: '', + question: '' + } + apiCall.askResourcesResult().then(res => { + console.log(res.data.choices[0].text) + if(!res.data || res.data?.choices?.length < 1){ + setRequestStatus({loading: false, status: false, message: 'No result found!'}) + } + setRequestStatus({loading: false, status: false, message: res.data?.choices[0].text}) + }).catch(error => { + setRequestStatus({loading: false, status: false, message: 'No result found!'}) + }) + } + + useEffect(()=>{ + apiCall.getResourceList().then(res => { + setQuestions({loading: false, data: res.data?.ask_categories?.data}) + }).catch(error => { + setQuestions({loading: false, data: []}) + console.log('ERROR', error) + }) + }, []) + return ( + + <> +
+ +
+
+
+
+

Ask our A.I

+
+
+ AI +
+
+
+ +
+ {error.question &&

{error.question}

} + {/* filter-search */} +
+ +
+ {error.searchPhrase &&

{error.searchPhrase}

} +
+ +
+
+ {requestStatus.loading ? + + : +

{requestStatus.message}

+ } +
+
+
+
+
+
+ + + ) +} diff --git a/src/components/familyResources/FamBlog.jsx b/src/components/familyResources/FamBlog.jsx new file mode 100644 index 0000000..47ec98c --- /dev/null +++ b/src/components/familyResources/FamBlog.jsx @@ -0,0 +1,58 @@ +import React from 'react' +import Layout from '../Partials/Layout' +import SearchCom from '../Helpers/SearchCom' +import DataIteration from '../Helpers/DataIteration' +import FamBlogItem from './FamBlogItem' +import CustomBreadcrumb from '../Breadcrumb/CustomBreadcrumb' + +export default function FamBlog() { + let blogdata = [1,2,3,4,5,6,7,8] + return ( + + <> +
+ +
+
+
+
+ {/* filter-search */} +
+ +
+
+ +
+
+ + {({ datas }) => ( +
+
+ )} + +
+
+
+
+ + + ) +} diff --git a/src/components/familyResources/FamBlogItem.jsx b/src/components/familyResources/FamBlogItem.jsx new file mode 100644 index 0000000..d03eebc --- /dev/null +++ b/src/components/familyResources/FamBlogItem.jsx @@ -0,0 +1,54 @@ +import React from 'react' +import { Link } from 'react-router-dom'; + +export default function FamBlogItem({datas, className, bg, hidden=false}) { + return ( +
+
+
+
+
+
+ {datas?.isActive && ( + + Active + + )} +
+
+ {hidden &&
} +
+
+
+ {/* title */} + +

+ {datas?.post_title ? datas?.post_title : "dummy title..."} +

+ +
+
+
+ + View + +
+
+
+
+
+ ); +} diff --git a/src/components/familyResources/FamGames.jsx b/src/components/familyResources/FamGames.jsx new file mode 100644 index 0000000..6e23e26 --- /dev/null +++ b/src/components/familyResources/FamGames.jsx @@ -0,0 +1,10 @@ +import React from 'react' +import Layout from '../Partials/Layout' + +export default function FamGames() { + return ( + +
Family Games Page
+ + ) +} diff --git a/src/components/familyResources/FamInterest.jsx b/src/components/familyResources/FamInterest.jsx new file mode 100644 index 0000000..00f54d1 --- /dev/null +++ b/src/components/familyResources/FamInterest.jsx @@ -0,0 +1,10 @@ +import React from 'react' +import Layout from '../Partials/Layout' + +export default function FamInterest() { + return ( + +
Fam Interesting Dummy Page
+ + ) +} diff --git a/src/components/familyResources/FamMyFiles.jsx b/src/components/familyResources/FamMyFiles.jsx new file mode 100644 index 0000000..9ed69bf --- /dev/null +++ b/src/components/familyResources/FamMyFiles.jsx @@ -0,0 +1,180 @@ +import React, { useState } from "react"; +import { Link } from "react-router-dom"; +import defaultImg from "../../assets/images/myfiles/default.svg"; +import localImgLoad from "../../lib/localImgLoad"; +import { PaginatedList, handlePagingFunc } from "../../components/Pagination"; +import Layout from "../Partials/Layout"; +import CustomBreadcrumb from "../Breadcrumb/CustomBreadcrumb"; + +export default function FamMyFiles() { + + let uploadedFiles = [] // To be updated Later from replaced with real data from API CALL + + const [currentPage, setCurrentPage] = useState(0); + const indexOfFirstItem = Number(currentPage); + const indexOfLastItem = + Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE); + const currentFiles = uploadedFiles?.data?.slice( + indexOfFirstItem, + indexOfLastItem + ); + const handlePagination = (e) => { + handlePagingFunc(e, setCurrentPage); + }; + return ( + + <> +
+ +
+
+ + Add My Item + +
+
+
+
+

+ My Uploads +

+
+
+
+ + + <> + {uploadedFiles?.data && uploadedFiles?.data.length ? ( + currentFiles.map((value, idx) => { + let addedDate = value?.added?.split(" ")[0]; + let formattedSize = formatFileSize(value?.file_size); + let imageLink = `${uploadedFiles?.image}${localStorage.getItem('session_token')}/myfile/${value.file_uid}` + return ( + + + + + ); + }) + ) : ( + + + + )} + + +
+
+
+ data +
+
+

+ {value.title || "Dummy Text"} +

+
+ {value.description || "Dummy Description"} +
+ + Added:{" "} + {addedDate} + +
+ + File Name:{" "} + + {" "} + {value.file_name} + + + + File Size:{" "} + + {" "} + {formattedSize} + + + + File Type:{" "} + + {" "} + {value?.file_type} + + +
+
+
+ 		+
+ + download-link + +
+
+ No Files Currently! +
+ {/* PAGINATION BUTTON */} + = + uploadedFiles?.data?.length + ? true + : false + } + data={uploadedFiles?.data} + start={indexOfFirstItem} + stop={indexOfLastItem} + /> + {/* END OF PAGINATION BUTTON */} +
+
+ + + ); +} + +const formatFileSize = (sizeInBytes) => { + if (sizeInBytes < 1024) { + return `${sizeInBytes} bytes`; + } else if (sizeInBytes < 1024 * 1024) { + const sizeInKB = (sizeInBytes / 1024).toFixed(2); + return `${sizeInKB} KB`; + } else { + const sizeInMB = (sizeInBytes / (1024 * 1024)).toFixed(2); + return `${sizeInMB} MB`; + } +}; diff --git a/src/components/familyResources/FamWorkInProgress.jsx b/src/components/familyResources/FamWorkInProgress.jsx new file mode 100644 index 0000000..d3c88ac --- /dev/null +++ b/src/components/familyResources/FamWorkInProgress.jsx @@ -0,0 +1,24 @@ +import React from 'react' +import Layout from '../Partials/Layout' +import CustomBreadcrumb from '../Breadcrumb/CustomBreadcrumb' + +export default function FamWorkInProgress() { + return ( + + <> +
+ +
+
Work in Progress Coming Soon
+ + + ) +} diff --git a/src/views/FamAIQuestionPage.jsx b/src/views/FamAIQuestionPage.jsx new file mode 100644 index 0000000..c43ef50 --- /dev/null +++ b/src/views/FamAIQuestionPage.jsx @@ -0,0 +1,10 @@ +import React from 'react' +import FamAIQuestion from '../components/familyResources/FamAIQuestion' + +export default function FamAIQuestionPage() { + return ( + <> + + + ) +} diff --git a/src/views/FamBlogPage.jsx b/src/views/FamBlogPage.jsx new file mode 100644 index 0000000..de1c63c --- /dev/null +++ b/src/views/FamBlogPage.jsx @@ -0,0 +1,10 @@ +import React from 'react' +import FamBlog from '../components/familyResources/FamBlog' + +export default function FamBlogPage() { + return ( + <> + + + ) +} diff --git a/src/views/FamGamesPage.jsx b/src/views/FamGamesPage.jsx new file mode 100644 index 0000000..d98fe65 --- /dev/null +++ b/src/views/FamGamesPage.jsx @@ -0,0 +1,9 @@ +import React from 'react' +import FamGames from '../components/familyResources/FamGames' +export default function FamGamesPage() { + return ( + <> + + + ) +} diff --git a/src/views/FamInterestPage.jsx b/src/views/FamInterestPage.jsx new file mode 100644 index 0000000..c32b9b1 --- /dev/null +++ b/src/views/FamInterestPage.jsx @@ -0,0 +1,10 @@ +import React from 'react' +import FamInterest from '../components/familyResources/FamInterest' + +export default function FamInterestPage() { + return ( + <> + + + ) +} diff --git a/src/views/FamMyFilesPage.jsx b/src/views/FamMyFilesPage.jsx new file mode 100644 index 0000000..7454f27 --- /dev/null +++ b/src/views/FamMyFilesPage.jsx @@ -0,0 +1,10 @@ +import React from 'react' +import FamMyFiles from '../components/familyResources/FamMyFiles' + +export default function FamMyFilesPage() { + return ( + <> + + + ) +} diff --git a/src/views/FamWorkInProgressPage.jsx b/src/views/FamWorkInProgressPage.jsx new file mode 100644 index 0000000..82385ef --- /dev/null +++ b/src/views/FamWorkInProgressPage.jsx @@ -0,0 +1,10 @@ +import React from 'react' +import FamWorkInProgress from '../components/familyResources/FamWorkInProgress' + +export default function FamWorkInProgressPage() { + return ( + <> + + + ) +}