From be96cb2dd0fe5e44a24e3460a410610d99f3a945 Mon Sep 17 00:00:00 2001 From: "Mr. Singleton" Date: Tue, 5 Dec 2023 09:06:42 -0500 Subject: [PATCH] componentization and full search expansion for resume items --- src/components/block-content-ui/cmsClient.ts | 25 +++++- .../mackenzies-mind/header/FullTextSearch.tsx | 42 ++++++--- .../mackenzies-mind/header/Header.tsx | 4 +- .../mackenzies-mind/header/MainMenu.tsx | 33 +++---- .../ResumeExperienceItem.tsx | 87 ++++++++++++++++++ .../ResumeExperienceSection.tsx | 59 +----------- .../PortfolioItemModal.tsx | 87 ++++++++++++++++++ .../ResumePortfolioEntry.tsx | 67 ++++++++++++++ .../ResumePortfolioSection.tsx | 89 ++----------------- .../ResumeSkillReferences.tsx | 64 +++++++++++++ .../ResumeSkillSetItem.tsx | 45 ++++++++++ .../ResumeSkillsSection.tsx | 27 ++---- 12 files changed, 436 insertions(+), 193 deletions(-) create mode 100644 src/components/templates/my-digital-resume/resume-experience-section/ResumeExperienceItem.tsx create mode 100644 src/components/templates/my-digital-resume/resume-portfolio-section/PortfolioItemModal.tsx create mode 100644 src/components/templates/my-digital-resume/resume-portfolio-section/ResumePortfolioEntry.tsx create mode 100644 src/components/templates/my-digital-resume/resume-skills-section/ResumeSkillReferences.tsx create mode 100644 src/components/templates/my-digital-resume/resume-skills-section/ResumeSkillSetItem.tsx diff --git a/src/components/block-content-ui/cmsClient.ts b/src/components/block-content-ui/cmsClient.ts index 7f56d7a7..93e35bd8 100644 --- a/src/components/block-content-ui/cmsClient.ts +++ b/src/components/block-content-ui/cmsClient.ts @@ -7,7 +7,7 @@ import { SanityRef, SanityTransformHwHomePage } from '../../common/sanityIo/Types' -import {ThwServiceItemType, WhySwitchSectionType} from "../BlockContentTypes"; +import {ResumeSkill, ThwServiceItemType, WhySwitchSectionType} from "../BlockContentTypes"; import GroqQueries from "../../common/sanityIo/groqQueries"; import groqQueries from "../../common/sanityIo/groqQueries"; import {SanityHomePage} from "./static-pages/cmsStaticPagesClient"; @@ -483,16 +483,35 @@ const fullTextSearch = (textToSearch: string): Promise => { contentWelcomeMessage, contentSummaryTitle, contentSummaryTexts, - videoUrl - ] match '*${textToSearch}*']`, + videoUrl, + + ] match '*${textToSearch}*']{ + ..., + "skillsUsed" : skillsUsed[]->, + }`, // {searchText: textToSearch} ).then((data: any) => { console.log("data from fulltext search", data) return data }) } +const skillReferenceSearch = (skill: ResumeSkill): Promise => { + return sanityClient + .fetch( + `*[references($searchText)]{ + ..., + "skillsHighlighted": skillsHighlighted[]->, + "skillsUsed" : skillsUsed[]->, + }`, + {searchText: skill._id} + ).then((data: any) => { + console.log("data from skillReference search", data) + return data + }) +} export default { + skillReferenceSearch, fetchRef, fetchRefs, fetchLandingPage, diff --git a/src/components/templates/mackenzies-mind/header/FullTextSearch.tsx b/src/components/templates/mackenzies-mind/header/FullTextSearch.tsx index 7cc92f3c..478bbe0f 100644 --- a/src/components/templates/mackenzies-mind/header/FullTextSearch.tsx +++ b/src/components/templates/mackenzies-mind/header/FullTextSearch.tsx @@ -9,10 +9,16 @@ import makeStyles from "@mui/styles/makeStyles"; import {Theme} from "@mui/material/styles"; import { AnimatedAboutUsSectionType, - HeroAnimatedContentSectionType, + HeroAnimatedContentSectionType, ResumeExperience, ResumeExperienceSectionType, ResumeSkill, ResumeSkillSet, SanityHeroContentSlide, ServiceItemNoRefType } from "../../../BlockContentTypes"; +import ResumeExperienceSection from "../../my-digital-resume/resume-experience-section/ResumeExperienceSection"; +import ResumeExperienceItem from "../../my-digital-resume/resume-experience-section/ResumeExperienceItem"; +import {COLORS} from "../../../../theme/common/ColorPalette"; +import ResumeSkillsSection from "../../my-digital-resume/resume-skills-section/ResumeSkillsSection"; +import ResumeSkillSetItem from "../../my-digital-resume/resume-skills-section/ResumeSkillSetItem"; +import ResumeSkillReferences from "../../my-digital-resume/resume-skills-section/ResumeSkillReferences"; export const useStyles = makeStyles((theme: Theme) => ({ endAdornedInput: { @@ -61,7 +67,7 @@ const FullTextSearch: FunctionComponent = (props: IProps) => { setSearchText(event.target.value) } - return ( + return ( = (props: IProps) => { , }}/> - { + { {results?.length && {results?.length} {(results?.length ?? 1) > 1 ? "results" : "result"}} - + {results?.map((theResult: any) => { switch (theResult?._type) { case "ServiceItem": @@ -117,7 +123,7 @@ const FullTextSearch: FunctionComponent = (props: IProps) => { Show: {/*{convertedAnimatedServicesSection.title}*/} + {/* fontWeight={'bold'}>{convertedResumeSkill.title}*/} {convertedAnimatedHeroSection.contentSlides.map((slide: SanityHeroContentSlide) => { return = (props: IProps) => { {convertedAnimatedServicesSection.contentPreTitle}-{convertedAnimatedServicesSection.contentTitle} {/*{convertedAnimatedServicesSection.title}*/} + {/* fontWeight={'bold'}>{convertedResumeSkill.title}*/} {convertedAnimatedServicesSection.contentTexts.map((textContent: string) => { return = (props: IProps) => { })} + case "ResumeExperience": + const convertedResumeExperience: ResumeExperience = theResult; + + console.log(convertedResumeExperience) + return + + My Experience + + + + case "ResumeSkill": + const convertedResumeSkill: ResumeSkill = theResult; + + console.log(convertedResumeSkill) + return + + My Skill - {convertedResumeSkill.title} + + + default: return {theResult?._type} } - })} - - - } ) } diff --git a/src/components/templates/mackenzies-mind/header/Header.tsx b/src/components/templates/mackenzies-mind/header/Header.tsx index 8afbadf8..fbf04579 100644 --- a/src/components/templates/mackenzies-mind/header/Header.tsx +++ b/src/components/templates/mackenzies-mind/header/Header.tsx @@ -84,8 +84,8 @@ const Header: FunctionComponent = (props) => { setIsSearchOpen(false) }}/> - + diff --git a/src/components/templates/mackenzies-mind/header/MainMenu.tsx b/src/components/templates/mackenzies-mind/header/MainMenu.tsx index a30cd1f9..42d95131 100644 --- a/src/components/templates/mackenzies-mind/header/MainMenu.tsx +++ b/src/components/templates/mackenzies-mind/header/MainMenu.tsx @@ -61,7 +61,7 @@ const MainMenu: FunctionComponent = ({menu, anchor}) => { default: const menuItem: SanityMenuItem = subMenu return - + @@ -98,22 +96,25 @@ const MainMenu: FunctionComponent = ({menu, anchor}) => { - - - - - + + + + + - {list(anchor)} - + + ) } diff --git a/src/components/templates/my-digital-resume/resume-experience-section/ResumeExperienceItem.tsx b/src/components/templates/my-digital-resume/resume-experience-section/ResumeExperienceItem.tsx new file mode 100644 index 00000000..443da7eb --- /dev/null +++ b/src/components/templates/my-digital-resume/resume-experience-section/ResumeExperienceItem.tsx @@ -0,0 +1,87 @@ +import React, {FunctionComponent} from 'react' + +import makeStyles from "@mui/styles/makeStyles"; +import { Theme} from "@mui/material/styles"; +import {Chip, Grid, Typography, useTheme} from "@mui/material"; +import {COLORS} from "../../../../theme/common/ColorPalette"; +import {ResumeExperience} from "../../../BlockContentTypes"; + +export const useStyles = makeStyles((theme: Theme) => ({ + root: { + }, +})) + +interface IProps { +experience: ResumeExperience +} + +const ResumeExperienceItem: FunctionComponent = (props:IProps) => { + const classes = useStyles() + + const theme = useTheme() + + React.useEffect(()=>{ + }, []) + + return (= (props.sectionData.experiences?.length ?? 0) - 1 ? "transparent" : COLORS.LIGHTGRAY}`, + // // padding: theme.spacing(1.75, 0) + // }} + xs={12}> + + + {props.experience.companyName} + + + + {props.experience.title} + + + + {props.experience.companySubtitle} + + + + + + + {props.experience.dateStart?.toString().replaceAll('-', '.')} + + {/**/} + {/**/} + — + + {/**/} + {/**/} + {props.experience.dateEnd?.toString().replaceAll('-', '.')} + + + + + + {props.experience.description} + + + { + props.experience.skillsUsed?.map((skill, index) => { + console.log(skill) + return + }) + } + + ) +} + +export default ResumeExperienceItem \ No newline at end of file diff --git a/src/components/templates/my-digital-resume/resume-experience-section/ResumeExperienceSection.tsx b/src/components/templates/my-digital-resume/resume-experience-section/ResumeExperienceSection.tsx index f134009e..f8efbc5a 100644 --- a/src/components/templates/my-digital-resume/resume-experience-section/ResumeExperienceSection.tsx +++ b/src/components/templates/my-digital-resume/resume-experience-section/ResumeExperienceSection.tsx @@ -3,6 +3,7 @@ import {Chip, Grid, Typography, useMediaQuery, useTheme} from '@mui/material' import {ResumeExperience, ResumeExperienceSectionType} from "../../../BlockContentTypes"; import useThwCommonStyles from "../../../../common/sanityIo/ThwCommonStyles"; import {COLORS} from "../../../../theme/common/ColorPalette"; +import ResumeExperienceItem from "./ResumeExperienceItem"; interface IProps { sectionData: ResumeExperienceSectionType @@ -34,63 +35,7 @@ const ResumeExperienceSection: FunctionComponent = (props: IProps) => { { props.sectionData.experiences?.map((experience: ResumeExperience, index2: number) => { - return = (props.sectionData.experiences?.length ?? 0) - 1 ? "transparent" : COLORS.LIGHTGRAY}`, - // padding: theme.spacing(1.75, 0) - }} xs={12}> - - - {experience.companyName} - - - - {experience.title} - - - - {experience.companySubtitle} - - - - - - - {experience.dateStart?.toString().replaceAll('-', '.')} - - {/**/} - {/**/} - — - - {/**/} - {/**/} - {experience.dateEnd?.toString().replaceAll('-', '.')} - - - - - - {experience.description} - - - { - experience.skillsUsed?.map((skill, index) => { - return - }) - } - - + return }) } diff --git a/src/components/templates/my-digital-resume/resume-portfolio-section/PortfolioItemModal.tsx b/src/components/templates/my-digital-resume/resume-portfolio-section/PortfolioItemModal.tsx new file mode 100644 index 00000000..8cf6232b --- /dev/null +++ b/src/components/templates/my-digital-resume/resume-portfolio-section/PortfolioItemModal.tsx @@ -0,0 +1,87 @@ +import React, {FunctionComponent} from 'react' + +import makeStyles from "@mui/styles/makeStyles"; +import {Theme} from "@mui/material/styles"; +import {Button, ButtonGroup, Chip, Grid, IconButton, Modal, Typography, useTheme} from "@mui/material"; +import {Close} from "@mui/icons-material"; +import {urlFor} from "../../../block-content-ui/static-pages/cmsStaticPagesClient"; +import {ResumePortfolioItem} from "../../../BlockContentTypes"; + +export const useStyles = makeStyles((theme: Theme) => ({ + root: {}, +})) + +interface IProps { + currentItem?: ResumePortfolioItem, + isOpen?: boolean + setIsOpen: (open: boolean) => void +} + +const PortfolioItemModal: FunctionComponent = (props: IProps) => { + const theme = useTheme() + + const [isOpen, setIsOpen] = React.useState(false) + + const setOpenWrapper = (theValue:boolean)=>{ + setIsOpen(theValue) + props.setIsOpen(theValue) + } + + React.useEffect(() => { + // if (props.isOpen) { + setIsOpen(!!props.isOpen) + // } + }, [props.isOpen]) + + return ( setIsOpen(false)}> + + setIsOpen(false)} + size="large"> + + {props.currentItem?.detailTitle} + + {props.currentItem?.detailDescription} + + {props.currentItem?.skillsHighlighted?.map((skill) => ( + + ))} + + {props.currentItem?.inceptionDate?.toString()} + + + {props.currentItem?.imageGallery?.map((image) => ( + + + {'imageGalleryEntry'} + + ))} + + + + + + + + + + + ) +} + +export default PortfolioItemModal \ No newline at end of file diff --git a/src/components/templates/my-digital-resume/resume-portfolio-section/ResumePortfolioEntry.tsx b/src/components/templates/my-digital-resume/resume-portfolio-section/ResumePortfolioEntry.tsx new file mode 100644 index 00000000..fffda159 --- /dev/null +++ b/src/components/templates/my-digital-resume/resume-portfolio-section/ResumePortfolioEntry.tsx @@ -0,0 +1,67 @@ +import React, {FunctionComponent} from 'react' + +import makeStyles from "@mui/styles/makeStyles"; +import { Theme} from "@mui/material/styles"; +import {Button, Grid, Typography, useTheme} from "@mui/material"; +import {urlFor} from "../../../block-content-ui/static-pages/cmsStaticPagesClient"; +import dateUtils from "../../../../utils/dateUtils"; +import {ResumePortfolioItem} from "../../../BlockContentTypes"; +import PortfolioItemModal from "./PortfolioItemModal"; + +export const useStyles = makeStyles((theme: Theme) => ({ + root: { + }, +})) + +interface IProps { + portfolioItem?: ResumePortfolioItem +} + +const ResumePortfolioEntry: FunctionComponent = (props:IProps) => { + const classes = useStyles() + const theme = useTheme() + + const [isOpen, setIsOpen] = React.useState(false) + + const [currentItem, setCurrentItem] = React.useState() + + return ( + + {setIsOpen(val)}}/> +) +} + +export default ResumePortfolioEntry \ No newline at end of file diff --git a/src/components/templates/my-digital-resume/resume-portfolio-section/ResumePortfolioSection.tsx b/src/components/templates/my-digital-resume/resume-portfolio-section/ResumePortfolioSection.tsx index ce0cf3b3..d87b0b70 100644 --- a/src/components/templates/my-digital-resume/resume-portfolio-section/ResumePortfolioSection.tsx +++ b/src/components/templates/my-digital-resume/resume-portfolio-section/ResumePortfolioSection.tsx @@ -5,6 +5,8 @@ import useThwCommonStyles from "../../../../common/sanityIo/ThwCommonStyles"; import {urlFor} from "../../../block-content-ui/static-pages/cmsStaticPagesClient"; import {Close} from "@mui/icons-material"; import dateUtils from "../../../../utils/dateUtils"; +import ResumePortfolioEntry from "./ResumePortfolioEntry"; +import PortfolioItemModal from "./PortfolioItemModal"; interface IProps { sectionData: ResumePortfolioSectionType @@ -17,7 +19,8 @@ const ResumePortfolioSection: FunctionComponent = (props: IProps) => { const [isOpen, setIsOpen] = React.useState(false) const [currentItem, setCurrentItem] = React.useState() - const sendToModal = (portfolioItem: ResumePortfolioItem) => { + const sendToModal = (portfolioItem?: ResumePortfolioItem) => { + console.log("The current Item", portfolioItem) setCurrentItem(portfolioItem) setIsOpen(true) @@ -46,92 +49,12 @@ const ResumePortfolioSection: FunctionComponent = (props: IProps) => { { props.sectionData.portfolioEntries?.map((portfolioItem: ResumePortfolioItem, index2: number) => { - return - - + return }) } - - - setIsOpen(false)} - size="large"> - - {currentItem?.detailTitle} - - {currentItem?.detailDescription} - - {currentItem?.skillsHighlighted?.map((skill) => ( - - ))} - - {currentItem?.inceptionDate?.toString()} - - - {currentItem?.imageGallery?.map((image) => ( - - - {'imageGalleryEntry'} - - ))} - - - - - - - - - - - + {setIsOpen(value)}}/> ); } diff --git a/src/components/templates/my-digital-resume/resume-skills-section/ResumeSkillReferences.tsx b/src/components/templates/my-digital-resume/resume-skills-section/ResumeSkillReferences.tsx new file mode 100644 index 00000000..240d931f --- /dev/null +++ b/src/components/templates/my-digital-resume/resume-skills-section/ResumeSkillReferences.tsx @@ -0,0 +1,64 @@ +import React, {FunctionComponent} from 'react' + +import makeStyles from "@mui/styles/makeStyles"; +import {Theme} from "@mui/material/styles"; +import {Grid, Typography} from "@mui/material"; +import {ResumeSkill} from "../../../BlockContentTypes"; +import cmsClient from "../../../block-content-ui/cmsClient"; +import ResumeExperienceItem from "../resume-experience-section/ResumeExperienceItem"; +import {ResumePortfolioItem} from "../../../BlockContentTypes"; +import ResumePortfolioEntry from "../resume-portfolio-section/ResumePortfolioEntry"; +import PortfolioItemModal from "../resume-portfolio-section/PortfolioItemModal"; + +export const useStyles = makeStyles((theme: Theme) => ({ + root: { + }, +})) + +interface IProps { + skill?: ResumeSkill +} + +const ResumeSkillReferences: FunctionComponent = (props:IProps) => { + const classes = useStyles() + + const [referenceResults, setReferenceResults] = React.useState<[]>() + + const searchCMS = async () => { + console.log("about to search full text") + if (props.skill) { + const cmsResponse = await cmsClient.skillReferenceSearch(props.skill) + console.log("results", cmsResponse) + setReferenceResults(cmsResponse) + } + } + + React.useEffect(()=>{ + // find the rerences of this skill + searchCMS().then() + + }, []) + + const [currentItem, setCurrentItem] = React.useState() + + const [isOpen, setIsOpen] = React.useState(false) + return ( + { + referenceResults?.map((searchResult:any)=>{ + switch (searchResult?._type) { + case "ResumeExperience": + return + case "ResumePortfolioItem": + return + case "ResumeSkillSection": + return <> + default: + return {searchResult._type} + } + }) + } + + ) +} + +export default ResumeSkillReferences \ No newline at end of file diff --git a/src/components/templates/my-digital-resume/resume-skills-section/ResumeSkillSetItem.tsx b/src/components/templates/my-digital-resume/resume-skills-section/ResumeSkillSetItem.tsx new file mode 100644 index 00000000..96683420 --- /dev/null +++ b/src/components/templates/my-digital-resume/resume-skills-section/ResumeSkillSetItem.tsx @@ -0,0 +1,45 @@ +import React, {FunctionComponent} from 'react' + +import makeStyles from "@mui/styles/makeStyles"; +import { Theme} from "@mui/material/styles"; +import {Grid, Typography} from "@mui/material"; +import {COLORS} from "../../../../theme/common/ColorPalette"; +import {ResumeSkillSet} from "../../../BlockContentTypes"; + +export const useStyles = makeStyles((theme: Theme) => ({ + root: { + }, +})) + +interface IProps { + skillset: ResumeSkillSet +} + +const ResumeSkillSetItem: FunctionComponent = (props:IProps) => { + const classes = useStyles() + + React.useEffect(()=>{ + }, []) + + return (= (props.sectionData?.skillsets?.length ?? 0) - 2 ? 'transparent' : COLORS.LIGHTGRAY}` + }}> + + {props.skillset.title} + + + { + props.skillset.skills?.map((skill, index) => { + return {skill.title}{index !== (props.skillset.skills?.length ?? 0) - 1 ? ',' : ''}  + }) + } + + ) +} + +export default ResumeSkillSetItem \ No newline at end of file diff --git a/src/components/templates/my-digital-resume/resume-skills-section/ResumeSkillsSection.tsx b/src/components/templates/my-digital-resume/resume-skills-section/ResumeSkillsSection.tsx index 2d4fe12d..bb985cc8 100644 --- a/src/components/templates/my-digital-resume/resume-skills-section/ResumeSkillsSection.tsx +++ b/src/components/templates/my-digital-resume/resume-skills-section/ResumeSkillsSection.tsx @@ -6,6 +6,7 @@ import {ResumeSkillSectionType, ResumeSkillSet} from "../../../BlockContentTypes import useThwCommonStyles from "../../../../common/sanityIo/ThwCommonStyles"; import {COLORS} from "../../../../theme/common/ColorPalette"; import CustomizedThemeContext from "../../../customized-theme-provider/CustomizedThemeContext"; +import ResumeSkillSetItem from "./ResumeSkillSetItem"; export const useStyles = makeStyles((theme: Theme) => ({ @@ -33,33 +34,15 @@ const ResumeSkillsSection: FunctionComponent = (props: IProps) => { > - {props.sectionData.title}{props.sectionData?.title}. - {props.sectionData.introduction} + {props.sectionData?.introduction} { - props.sectionData.skillsets?.map((skillset: ResumeSkillSet, index2: number) => { - return = (props.sectionData.skillsets?.length ?? 0) - 2 ? 'transparent' : COLORS.LIGHTGRAY}` - }}> - - {skillset.title} - - - { - skillset.skills?.map((skill, index) => { - return {skill.title}{index !== (skillset.skills?.length ?? 0) - 1 ? ',' : ''}  - }) - } - - + props.sectionData?.skillsets?.map((skillset: ResumeSkillSet, index2: number) => { + return }) }