import { default as React, FunctionComponent } from "react"; import { useNextGraphAuth } from "./reactMethods"; import { SocialContactShapeType } from "./.ldo/contact.shapeTypes.ts"; import { useSubscribeToResource, useResource, useSubject, useLdo } from "./reactMethods.ts"; import { StarIcon } from '@heroicons/react/24/solid' import { StarIcon as StarIconOutline, NoSymbolIcon } from '@heroicons/react/24/outline' export const Contact: FunctionComponent = ({nuri}) => { const { session } = useNextGraphAuth(); const { createData, commitData, changeData } = useLdo(); useResource(session.sessionId && nuri ? nuri : undefined, { subscribe: true }); let contact = useSubject(SocialContactShapeType, session.sessionId && nuri ? nuri.substring(0,53) : undefined); const ksp = "did:ng:k:skills:programming:"; const ksp_mapping = [ "svelte", "nextjs", "react", "vuejs", "tailwind", "rdf", "rust", "yjs", "automerge", ]; const ksp_name = [ "Svelte", "NextJS", "React", "VueJS", "Tailwind", "RDF/SPARQL", "Rust", "Yjs", "Automerge", ] const [skills, setSkills] = React.useState([ 0, 0, 0, 0, 0, 0, 0, 0, 0 ]); React.useEffect(() => { //contact.hasRating?.map((r)=> {if (r.skill) console.log(r.rated,r.skill["@id"].substring(24))}); let nextSkills = skills.map((s) => { return 0; }); contact.hasRating?.map((r) => { nextSkills[ksp_mapping.indexOf(r.skill["@id"].substring(24))] = r.rated +1; }); setSkills(nextSkills); }, [contact]) if (!session.sessionId || !nuri) return <>; async function rate(skill: number, rating: number) { const nextSkills = [...skills]; const old = skills[skill]; if (old == 0) { if (rating == 0) return;//should happen // we create a new rating nextSkills[skill] = rating; try { await session.ng.sparql_update(session.sessionId, `PREFIX xskills: PREFIX ksp: PREFIX xsd: INSERT { <> xskills:hasRating [ a xskills:Rating ; xskills:rated "${rating-1}"^^xsd:integer ; xskills:skill ksp:${ksp_mapping[skill]} ]. } WHERE {}`, nuri); } catch (e) { console.error(e) } } else { if (old == rating) { nextSkills[skill] = rating - 1; } else { nextSkills[skill] = rating; } if (nextSkills[skill] == 0) { // we remove the rating try { const s = `PREFIX xskills: PREFIX ksp: PREFIX xsd: DELETE { <> xskills:hasRating ?rating. ?rating a xskills:Rating . ?rating xskills:skill ksp:${ksp_mapping[skill]} . ?rating xskills:rated "${old-1}"^^xsd:integer. } WHERE { <> xskills:hasRating ?rating . ?rating a xskills:Rating . ?rating xskills:skill ksp:${ksp_mapping[skill]} }`; await session.ng.sparql_update(session.sessionId, s, nuri); } catch (e) { console.error(e) } } else { // we update the rating try { await session.ng.sparql_update(session.sessionId, `PREFIX xskills: PREFIX ksp: PREFIX xsd: DELETE { ?rating xskills:rated "${old-1}"^^xsd:integer. } INSERT { ?rating xskills:rated "${nextSkills[skill]-1}"^^xsd:integer. } WHERE { <> xskills:hasRating ?rating . ?rating a xskills:Rating . ?rating xskills:skill ksp:${ksp_mapping[skill]} }`, nuri); } catch (e) { console.error(e) } } } setSkills(nextSkills); } return <> {contact.fn? (
{contact.fn}
{contact.hasEmail}
{ skills.map( (skill,s) =>
{ [...Array(5)].map( (e,i) => { if (i + 1 <= skill) { return rate(s,i+1)} className="size-6"/> } else { return rate(s,i+1)} className=" size-6"/> } } ) } {ksp_name[s]}
) }
) : <>} ; };