Create New Record

+ {numFileUploaders > 2 &&

Max file uploads reached

} +

2 ? "sadd-mu" : "add-mu"} + onClick={() => + numFileUploaders > 2 + ? null + : setNumFileUploaders(numFileUploaders + 1) + } + > + +

+ {Array.from({ length: numFileUploaders }) + .map((_, index) => ( + { + const otherFiles = form.getValues("otherFiles") + otherFiles[index] = file as File + form.setValue("otherFiles", otherFiles) + }} /> + ))} + + + <select + required + {...form.register('condition')}> + <option value="">-- Select a condition --</option> + {possibleConditions.map((condition) => ( + <option + key={condition} + value={condition.toLowerCase()}>{condition}</option> + ))} + </select> + + <FileUploader + required + onChange={(file) => { + form.setValue("file", file as File) + }} /> + <button type="submit">Save</button> + <p> + *ensure inputted information are correct as once saved it cannot be + deleted/edited + </p> + </div> + </form> + </div> + ); +}; + +export default index; diff --git a/tauri-app/src/components/AddRemedyComponent/index.css b/tauri-app/src/components/AddRemedyComponent/index.css new file mode 100644 index 0000000..47a106b --- /dev/null +++ b/tauri-app/src/components/AddRemedyComponent/index.css @@ -0,0 +1,225 @@ +.step-container { + margin: 20px 0px; + font-family: "Roboto"; +} + +.main-add-card-container { + background: var(--color-white); + width: 500px; + min-height: 300px; + max-height: 600px; + position: relative; + z-index: 7; + border-radius: 15px; + padding: var(--padding-desktop); + margin-top: 30px; +} + +.main-add-card-container h1 { + font-family: "Roboto"; + font-size: 35px; + font-weight: 400; + margin-bottom: 20px; +} + +.input-form-r { + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: column; + padding: 10px; + overflow-y: scroll; + overflow-x: hidden; + max-height: 300px; +} + +.input-form-r::-webkit-scrollbar { + width: 6px; +} + +.input-form-r::-webkit-scrollbar-track { + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); + border-radius: 5px; +} + +.input-form-r::-webkit-scrollbar-thumb { + width: 2px; + background: var(--color-blue); + border-radius: 5px; + margin: 0 3px; +} + +.input-form-r input[type="text"] { + width: 60%; + border: none; + background: var(--color-slate); + padding: 10px 2px; + border-radius: 8px; + font-family: "Roboto"; + text-indent: 10px; + outline: none; + margin-bottom: 10px; + margin-right: 40%; +} + +.input-form-r textarea { + width: 96%; + border: none; + background: var(--color-slate); + padding: 10px 2px; + border-radius: 8px; + font-family: "Roboto"; + text-indent: 10px; + outline: none; + min-height: 80px; + margin-right: 4%; +} + +.input-form-r button { + width: 30%; + border: none; + color: var(--color-white); + background: var(--color-green); + box-shadow: var(--box-shadow-green); + margin-top: 20px; + padding: 5px 2px; + margin-right: 70%; + font-size: 24px; + border-radius: 8px; + font-family: "Pacifico"; + text-indent: 10px; + outline: none; +} + +.input-form-r p { + color: var(--color-red); + font-family: "Roboto"; + margin-top: 10px; +} + +.form-container { + border: 2px solid var(--color-blue); + border-style: dashed; + border-radius: 15px; + width: 100%; + min-height: 60px; + margin: 15px 0; + display: flex; + justify-content: center; + align-items: center; + transition: 0.3s; +} + +.form-container-active { + border: 2px solid var(--color-green); + border-radius: 15px; + width: 100%; + min-height: 60px; + margin: 15px 0; + display: flex; + justify-content: center; + align-items: center; + transition: 0.3s; +} + +.form-container input { + width: 40%; + position: relative; + margin: auto auto; +} + +.form-container-active input { + width: 40%; + position: relative; + margin: auto auto; +} + +.add-mu { + background: var(--color-red); + color: var(--color-white); + box-shadow: var(--box-shadow-red); + width: 35px; + height: 35px; + border-radius: 50%; + font-size: 20px; + display: flex; + justify-content: center; + align-items: center; + position: absolute; + left: 15px; + transform: translateY(20px); +} + +.sadd-mu { + background: var(--color-red); + color: var(--color-white); + box-shadow: var(--box-shadow-red); + width: 35px; + height: 35px; + border-radius: 50%; + font-size: 20px; + display: flex; + justify-content: center; + align-items: center; + position: absolute; + left: 15px; + transform: translateY(50px); + opacity: 0.5; +} + +.uploader-content { + width: 90%; +} + +@media (max-width: 750px) { + .main-add-card-container { + width: 300px; + padding: var(--padding-mobile); + margin-top: 50px; + z-index: 10; + position: relative; + } + + .input-form-r { + overflow-y: scroll; + height: 300px; + padding: 5px; + } + + .main-add-card-container h1 { + font-size: 25px; + } + + .add-mu, + .sadd-mu { + top: 20px; + left: 265px; + } + + .sadd-mu { + transform: translateY(13px); + } + + .form-container, + .form-container-active { + height: 60px; + } + + .input-form-r input[type="text"] { + width: 100%; + margin-right: 0; + } + + .input-form-r input[type="file"] { + padding: 10px 0; + } + + .input-form-r button { + width: 100%; + margin-right: 0; + } + + .input-form-r textarea { + width: 100%; + } +} diff --git a/tauri-app/src/components/AddRemedyComponent/index.tsx b/tauri-app/src/components/AddRemedyComponent/index.tsx new file mode 100644 index 0000000..0eb07cc --- /dev/null +++ b/tauri-app/src/components/AddRemedyComponent/index.tsx @@ -0,0 +1,87 @@ +import "./index.css"; +import React, { FC, useState } from "react"; +import Remedies from '../../pages/Remedies' + +interface FileProp { + file: File | null | undefined; +} + +//@ts-ignore +const FileUploader: FC = ({formFunc, form}) => { + const [file, setFile] = useState<FileProp>({ file: null }); + + return ( + <div className={!file?.file ? "form-container" : "form-container-active"}> + <input + onChange={(e) => { + const fileList = e.target.files + if (!fileList) return + + const file = fileList[0] + if (!file) return + setFile({ file: e?.target?.files?.[0] }); + formFunc({ + ...form, + doc: file + }) + }} + type="file" + accept=".jpg,.png,.jpeg" + + /> + </div> + ); +}; + +interface StepProp { + index: React.ReactNode; +} + +//add stepFunction +//to trigger when save in main form is clicked +const StepField: FC<StepProp> = ({ index }) => { + return ( + <div className="step-container"> + <h1>Step #{index}</h1> + <input type="text" placeholder="Step title" /> + <textarea placeholder="What to do."> +

+ ); +}; + +//@ts-ignore +const index: FC = ({saveFunc, formFunc, form}) => { + const [steps, setSteps] = useState([ + , + ]); + + return ( +
+
Create New Remedy
+ { + e.preventDefault() + saveFunc() + }} + > + {/* @ts-ignore */} + +
+ formFunc({ ...form, name: e.target.value })} + /> + formFunc({ ...form, description: e.target.value })} + /> + <br/> + <input type="text" placeholder="Created By" required={true} + onChange={(e) => formFunc({ ...form, created_by: e.target.value })} + /> + <button type="submit">Save</button> + </div> + </form> + </div> + ); +}; + +export default index; diff --git a/tauri-app/src/components/Auth/Guard.tsx b/tauri-app/src/components/Auth/Guard.tsx new file mode 100644 index 0000000..afe43fa --- /dev/null +++ b/tauri-app/src/components/Auth/Guard.tsx @@ -0,0 +1,12 @@ +import useWeb5Store from "@/stores/useWeb5Store" +import { PropsWithChildren, ReactNode } from "react"; + +export default function AuthGuard({ children, fallback }: PropsWithChildren & { fallback?: ReactNode }) { + const { web5, did } = useWeb5Store((state) => ({ web5: state.web5, did: state.did })); + + if (!web5 || !did) + return <>{fallback}</> ?? null + + + return <>{children}</> +} diff --git a/tauri-app/src/components/Auth/Profile/Guard.tsx b/tauri-app/src/components/Auth/Profile/Guard.tsx new file mode 100644 index 0000000..3822b7d --- /dev/null +++ b/tauri-app/src/components/Auth/Profile/Guard.tsx @@ -0,0 +1,21 @@ +import { PropsWithChildren, ReactNode, useEffect } from "react"; +import AuthGuard from "../Guard"; +import { useProfile } from "@/stores/profile"; + +const Guard = ({ children, fallback }: PropsWithChildren & { fallback?: ReactNode }) => { + const { isSignedIn } = useProfile(state => ({ isSignedIn: state.state.isSignedIn, signIn: state.signIn })) + + if (!isSignedIn) return <>{fallback}</> ?? null; + + return <>{children}</>; +}; + +export default function ProfileGuard( + props: PropsWithChildren & { fallback?: ReactNode }, +) { + return ( + <AuthGuard> + <Guard {...props} /> + </AuthGuard> + ); +} diff --git a/tauri-app/src/components/Auth/types.ts b/tauri-app/src/components/Auth/types.ts new file mode 100644 index 0000000..dc9f5d0 --- /dev/null +++ b/tauri-app/src/components/Auth/types.ts @@ -0,0 +1,6 @@ +import { Web5 } from '@web5/api/browser' + +export type Agent = { + web5: Web5 + did: string +} diff --git a/tauri-app/src/components/Card/index.css b/tauri-app/src/components/Card/index.css new file mode 100644 index 0000000..ee364de --- /dev/null +++ b/tauri-app/src/components/Card/index.css @@ -0,0 +1,61 @@ +.main-card-container { + box-shadow: var(--box-shadow-black); + border-radius: 8px; + height: 300px; + margin: 20px 10px; + min-width: 300px; + width: 300px; + overflow: hidden; +} + +.card-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 26px 20px; + background: var(--color-slate); +} + +.card-header h1 { + font-family: "Roboto"; + font-size: 20px; + font-weight: 300; + text-transform: lowercase; +} + +.card-header i { + font-size: 34px; +} + +.info-container { + padding: 20px 10px; +} + +.info-container p { + font-family: "Open Sans"; +} + +.date-container { + display: flex; + align-items: center; + justify-content: space-between; + font-family: "Open Sans"; + width: 25%; + margin-top: 30px; +} + +.vbtn { + border: none; + font-size: 24px; + padding: 6px 8px; + border-radius: 5px; + font-family: "Pacifico"; + background: var(--color-green); + box-shadow: var(--box-shadow-green); + color: var(--color-white); + margin: 0 auto; + margin-top: 14px; + width: 280px; + outline: none; + cursor: pointer; +} diff --git a/tauri-app/src/components/Card/index.tsx b/tauri-app/src/components/Card/index.tsx new file mode 100644 index 0000000..c1b8abf --- /dev/null +++ b/tauri-app/src/components/Card/index.tsx @@ -0,0 +1,64 @@ +import "./index.css"; +import React, { FC, useState } from "react"; + +interface CardProp { + file_name: String; + file_extension: string; + title: String; + desc: String; + date: String; + cardUtils: any[]; +} + +const index: FC<CardProp> = ({ + file_name, + file_extension, + title, + desc, + date, + cardUtils, +}) => { + const [supportedIMGExtensions, setSupportedIMGExtensions] = useState([ + "jpg", + "png", + "jpeg", + ]); + return ( + <div className="main-card-container"> + <div className="card-header"> + {file_extension == "pdf" && ( + <i + style={{ color: "var(--color-red)" }} + className="fa-solid fa-file-pdf" + ></i> + )} + {file_extension == "docx" && ( + <i + style={{ color: "var(--color-green)" }} + className="fas fa-file-word" + ></i> + )} + {supportedIMGExtensions.includes(file_extension) && ( + <i + className="fa-solid fa-image" + style={{ color: "var(--color-blue)" }} + ></i> + )} + + <h1>{title ? title : file_name}</h1> + </div> + <div className="info-container"> + <p>{desc.substring(0, 50) + "..."}</p> + <div className="date-container"> + <i className="fas fa-save"></i> + <span>{date}</span> + </div> + <button onClick={() => cardUtils[1](cardUtils[0])} className="vbtn"> + View more + </button> + </div> + </div> + ); +}; + +export default index; diff --git a/tauri-app/src/components/Chat/index.css b/tauri-app/src/components/Chat/index.css new file mode 100644 index 0000000..dd76343 --- /dev/null +++ b/tauri-app/src/components/Chat/index.css @@ -0,0 +1,94 @@ +.chat-component-container { + box-shadow: var(--box-shadow-black); + border-radius: 15px; + padding: 20px; + width: 100%; + height: 100%; + min-height: 500px; +} + +.chat-message-input-container { + width: 100%; + padding: 15px 0px; + display: flex; + justify-content: space-around; + align-items: center; +} + +.chat-message-input-container input { + width: 85%; + padding: 12px 8px; + background: var(--color-slate-accent); + border: none; + border-radius: 25px; + outline: none; + font-family: "Roboto"; + font-size: 20px; + text-indent: 8px; +} + +.chat-message-input-container button { + width: 40px; + height: 40px; + border: none; + border-radius: 50%; + color: var(--color-white); + background: var(--color-blue); + box-shadow: var(--box-shadow-blue); + font-size: 20px; + outline: none; +} + +.chats-container { + width: 98%; + background: var(--color-light-grey); + height: 85%; + padding: 12px; + border-radius: 15px 5px 5px 15px; + margin: 0 auto; + overflow-y: scroll; + overflow-x: hidden; + height: 600px; +} + +.chats-container::-webkit-scrollbar { + width: 6px; +} + +.chats-container::-webkit-scrollbar-track { + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); + border-radius: 0 15px 15px 0; + transform: translateX(-4px); +} + +.chats-container::-webkit-scrollbar-thumb { + width: 2px; + background: var(--color-blue); + border-radius: 0 5px 5px 0; + margin: 0 3px; +} + +.msg-container { + width: 100%; + margin: 25px 2px; +} + +.msg-f { + width: max-content; + background: var(--color-light-green); + font-family: "Roboto"; + padding: 4px 10px; + border-radius: 8px 8px 8px 0px; + margin-right: auto; + max-width: 600px; +} + +.msg-t { + width: max-content; + background: var(--color-light-blue); + font-family: "Roboto"; + padding: 4px 10px; + border-radius: 8px 8px 0px 8px; + margin-left: auto; + max-width: 600px; +} diff --git a/tauri-app/src/components/Chat/index.tsx b/tauri-app/src/components/Chat/index.tsx new file mode 100644 index 0000000..64148bd --- /dev/null +++ b/tauri-app/src/components/Chat/index.tsx @@ -0,0 +1,301 @@ +import "./index.css"; +import React, { useEffect, FC } from "react"; + +// Import necessary libraries and modules +// import React, { useEffect } from 'react'; +import { Web5 } from "@web5/api/browser"; +import { dingerProtocolDefinition } from '@/stores/useWeb5Store'; +// import Chat from '../components/Chat'; + +// Define your dingerProtocolDefinition object + +//@ts-ignore +const index: React.FC = () => { + useEffect(() => { + const initDinger = async () => { + // const copyDidElement = document.querySelector('#copy-did'); + const dingForm = document.querySelector('#ding-form'); + const dingErrorElement = document.querySelector('#ding-error'); + const dingProgressElement = document.querySelector('#ding-progress'); + const dingedList = document.querySelector('#dinged-list'); + const dingedByList = document.querySelector('#dinged-by-list'); + + const { web5, did: myDid } = await Web5.connect(); + await configureProtocol(web5); + + setInterval(async () => { + await renderDings(web5, myDid, dingedList, dingedByList); + }, 2000); + + //@ts-ignore + // copyDidElement.addEventListener('click', async () => { + // try { + // await navigator.clipboard.writeText(myDid); + // } catch (err) { + // //@ts-ignore + // alert('Failed to copy DID: ', err); + // } + // }); + + //@ts-ignore + dingForm.addEventListener('submit', async (event) => { + // ... (your existing form submission logic) + event.preventDefault(); + + //@ts-ignore + dingErrorElement.textContent = ''; + //@ts-ignore + dingProgressElement.textContent = ''; + //@ts-ignore + const did = document.querySelector('#did').value; + //@ts-ignore + const note = document.querySelector('#note').value; + + if (did.length === 0) { + //@ts-ignore + dingErrorElement.textContent = 'DID required'; + return; + } + + const ding = { dinger: myDid }; + if (note) { + //@ts-ignore + ding.note = note; + } + //@ts-ignore + dingProgressElement.textContent = 'writing ding to local DWN...'; + + try { + const { record, status } = await web5.dwn.records.write({ + data: ding, + message: { + protocol: dingerProtocolDefinition.protocol, + protocolPath: 'ding', + schema: 'ding', + recipient: did + } + }); + + if (status.code !== 202) { + //@ts-ignore + dingErrorElement.textContent = `${status.code} - ${status.detail}`; + return; + } + + const shortenedDid = did.substr(0, 22); + //@ts-ignore + dingProgressElement.textContent = `Ding written! Dinging ${shortenedDid}...`; + //@ts-ignore + const { status: sendStatus } = await record.send(did); + console.log('send status', sendStatus); + + if (sendStatus.code !== 202) { + //@ts-ignore + dingErrorElement.textContent = `${sendStatus.code} - ${sendStatus.detail}`; + return; + } + //@ts-ignore + dingProgressElement.textContent = `Dinged ${shortenedDid}!`; + } catch (e) { + //@ts-ignore + dingErrorElement.textContent = e.message; + return; + } + }); + }; + + initDinger(); + }, []); + + const configureProtocol = async (web5: any) => { + // ... (your existing configureProtocol function) + const { protocols, status } = await web5.dwn.protocols.query({ + message: { + filter: { + protocol: 'https://dinger.app/protocol' + } + } + }); + + if (status.code !== 200) { + alert('Failed to query protocols. check console'); + console.error('Failed to query protocols', status); + + return; + } + + // protocol already exists + if (protocols.length > 0) { + console.log('protocol already exists'); + return; + } + + // create protocol + const { status: configureStatus } = await web5.dwn.protocols.configure({ + message: { + definition: dingerProtocolDefinition + } + }); + + console.log('configure protocol status', configureStatus); + }; + + const renderDings = async (web5: any, myDid: string, dingedList: any, dingedByList: any) => { + // ... (your existing renderDings function) + const { records, status } = await web5.dwn.records.query({ + message: { + filter: { + protocol: dingerProtocolDefinition.protocol + } + } + }); + + if (status.code !== 200) { + alert('Failed to query for dings. check console'); + console.error('Failed to query dings', status); + } + + for (let record of records) { + const recordExists = document.getElementById(record.id); + if (recordExists) { + continue; + } + + const { dinger, note } = await record.data.json(); + if (dinger === myDid) { + const shortenedDid = record.recipient.substr(0, 22); + const formattedDing = `[${new Date(record.dateCreated).toLocaleString()}] ${shortenedDid}... - ${note || ''}`; + + const dingElement = document.createElement('li'); + dingElement.id = record.id; + dingElement.textContent = formattedDing; + + const dingBackButton = document.createElement('button'); + dingBackButton.className = 'ding-back'; + // dingBackButton.textContent = 'Ding agane'; + dingBackButton.dataset.toDing = record.recipient; + + dingBackButton.addEventListener('click', event => { + const didInput = document.querySelector('#did'); + //@ts-ignore + didInput.value = event.target.dataset.toDing; + }); + + dingElement.appendChild(dingBackButton); + dingedList.appendChild(dingElement); + } else { + const shortenedDid = dinger.substr(0, 22); + const formattedDing = `[${new Date(record.dateCreated).toLocaleString()}] ${shortenedDid}... - ${note || ''}`; + + const dingElement = document.createElement('li'); + dingElement.id = record.id; + dingElement.textContent = formattedDing; + + const dingBackButton = document.createElement('button'); + dingBackButton.className = 'ding-back'; + // dingBackButton.textContent = 'Ding Back'; + dingBackButton.dataset.toDing = dinger; + + dingBackButton.addEventListener('click', event => { + const didInput = document.querySelector('#did'); + //@ts-ignore + didInput.value = event.target.dataset.toDing; + }); + + dingElement.appendChild(dingBackButton); + dingedByList.appendChild(dingElement); + } + } + + }; + + + interface MessageProp { + message: string; + isLeft: boolean; + } + + const Message: FC<MessageProp> = ({ message, isLeft }) => { + return ( + <div className="msg-container" style={{ justifyContent: "right" }}> + <div className={isLeft ? "msg-f" : "msg-t"}> + <p>{message}</p> + </div> + </div> + ); + }; + + // const index: FC = () => { + return ( + <div className="chat-component-container"> + <div className="chats-container"> + <Message message={"Hi Larry"} isLeft={false} /> + <Message message={"Sup Greg"} isLeft={true} /> + <Message + message={ + "Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis." + } + isLeft={false} + /> + <Message + message={ + "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat." + } + isLeft={true} + /> + <Message + message={ + "Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis." + } + isLeft={true} + /> + <Message + message={ + "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat." + } + isLeft={false} + /> + + {/* <h2>You Dinged:</h2> */} + <ul id="dinged-list"> + {/* List items will be added here dynamically */} + </ul> + + {/* <h2 style={{float: "right"}}>You were Dinged by:</h2> */} + <ul id="dinged-by-list" style={{ float: "right" }}> + {/* List items will be added here dynamically */} + </ul> + </div> + <div className="chat-message-input-container"> + {/* <button id="copy-did">Copy your DID</button> */} + <form + onSubmit={(e) => { + e.preventDefault(); + }} + id="ding-form"> + <p id="ding-error"></p> + {/* <div style={{display: "inline-block"}}> */} + <input type="text" id="did" placeholder="Enter DID"/> + <input type="text" id="note" placeholder="Say Hi!" /> + {/* </div> */} + <button type="submit"> + <i className="fa fa-caret-right"></i> + </button> + <span id="ding-progress"></span> + </form> + </div> + + {/* <h2>You Dinged:</h2> + <ul id="dinged-list"> */} + {/* List items will be added here dynamically */} + {/* </ul> + + <h2>You were Dinged by:</h2> */} + {/* <ul id="dinged-by-list"> */} + {/* List items will be added here dynamically */} + {/* </ul> */} + </div> + ); +}; + +export default index; diff --git a/tauri-app/src/components/DetailCardComponent/index.css b/tauri-app/src/components/DetailCardComponent/index.css new file mode 100644 index 0000000..e93f6dd --- /dev/null +++ b/tauri-app/src/components/DetailCardComponent/index.css @@ -0,0 +1,92 @@ +.main-detail-container { + width: 500px; + max-height: 600px; + background: var(--color-white); + padding: var(--padding-desktop); + border-radius: 15px; + position: relative; + margin-top: 20px; +} + +.main-detail-container h1 { + font-family: "Roboto"; + font-weight: 400; +} + +.image-container img { + width: 100%; + height: 280px; + border-radius: 15px; + margin-top: 20px; +} + +.main-detail-container p { + margin: 20px 0; + font-family: "Open Sans"; + max-height: 300px; + overflow-y: scroll; +} + +.main-detail-container::-webkit-scrollbar { + width: 6px; +} + +.main-detail-container::-webkit-scrollbar-track { + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); + border-radius: 5px; +} + +.main-detail-container::-webkit-scrollbar-thumb { + width: 2px; + background: var(--color-blue); + border-radius: 5px; + margin: 0 3px; +} + +.close-btn { + width: 50px; + height: 50px; + background: var(--color-red); + box-shadow: var(--box-shadow-red); + border-radius: 15px; + position: absolute; + top: 20px; + right: 80px; + color: var(--color-white); + display: flex; + justify-content: center; + align-items: center; + font-size: 25px; + transform: rotate(45deg); +} + +.file-container { + display: flex; + justify-content: left; + align-items: center; +} + +.file-container a { + color: var(--color-blue); + font-family: "Roboto"; + text-decoration: none; + margin-left: 18px; + font-weight: 400; +} + +@media (max-width: 750px) { + .main-detail-container { + padding: var(--padding-mobile); + width: 300px; + height: 400px; + overflow-y: scroll; + } + + .image-container img { + height: 180px; + } + + .close-btn { + right: 25px; + } +} diff --git a/tauri-app/src/components/DetailCardComponent/index.tsx b/tauri-app/src/components/DetailCardComponent/index.tsx new file mode 100644 index 0000000..b22aedb --- /dev/null +++ b/tauri-app/src/components/DetailCardComponent/index.tsx @@ -0,0 +1,78 @@ +import "./index.css"; +import React, { FC, useState } from "react"; +import { CardData } from "@/pages/Records/utils"; + +// interface OtherFileProp { +// title: String; +// file_extension: string; +// file_name: string; +// +// file_url: string; +// } + +// interface CardDataProps { +// file_name: String; +// file_extension: string; +// title: String; +// desc: String; +// date: String; +// other_files: OtherFileProp[]; +// } + +interface CardProp { + // cardData: CardDataProps; + cardData: CardData + close: (isCardDetailActive: boolean) => void; +} + +const index: FC<CardProp> = ({ cardData, close }) => { + const [supportedIMGExtensions, setSupportedIMGExtensions] = useState([ + "jpg", + "png", + "jpeg", + ]); + + return ( + <div className="main-detail-container"> + <div className="close-btn" onClick={() => close(false)}> + <i className="fa fa-plus" /> + </div> + <h1>{cardData.title ? cardData.title : cardData.file.name}</h1> + {supportedIMGExtensions.includes(cardData.file.type.split("/")[1]) && ( + <div className="image-container"> + <img src={cardData.file.url} alt={cardData.file.name} /> + </div> + )} + <p>{cardData.description}</p> + <div className="other-files-container"> + {cardData.otherFiles.map((file) => { + const fileExtension = file.type.split("/")[1] + return ( + <div className="file-container"> + {fileExtension === "pdf" && ( + <i + style={{ color: "var(--color-red)" }} + className="fa-solid fa-file-pdf" /> + )} + {fileExtension === "docx" && ( + <i + style={{ color: "var(--color-green)" }} + className="fas fa-file-word" /> + )} + {supportedIMGExtensions.includes(fileExtension) && ( + <i + className="fa-solid fa-image" + style={{ color: "var(--color-blue)" }} /> + )} + <a href={file.url}> + <h3>{file.name}</h3> + </a> + </div> + ); + })} + </div> + </div> + ); +}; + +export default index; diff --git a/tauri-app/src/components/FindFriends/index.css b/tauri-app/src/components/FindFriends/index.css new file mode 100644 index 0000000..3618e78 --- /dev/null +++ b/tauri-app/src/components/FindFriends/index.css @@ -0,0 +1,80 @@ +.find-friends-container { + width: 500px; + height: max-content; + min-height: 420px; + background: var(--color-white); + border-radius: 15px; + padding: 20px; + margin-top: 30px; +} + +.find-friends-container h3 { + font-family: "Pacifico"; +} + +.loading-container { + display: flex; + justify-content: center; + align-items: center; + flex-direction: center; + width: 480px; + height: max-content; + margin: auto auto; + min-height: 300px; + position: relative; +} + +.pluse-container { + width: 100px; + height: 100px; + background: var(--color-red); + box-shadow: var(--box-shadow-red); + border-radius: 50%; + font-size: 30px; + color: var(--color-white); + display: flex; + justify-content: center; + align-items: center; + position: relative; +} + +.g-pluse { + position: absolute; + width: 100px; + height: 100px; + background: var(--color-green); + border-radius: 50%; + top: 100px; + transform: scale(1.5); + animation: pulseAnim 2s ease-out infinite; +} + +.b-pluse { + position: absolute; + width: 100px; + height: 100px; + background: var(--color-blue); + border-radius: 50%; + top: 100px; + transform: scale(1.5); + animation: pulseAnim 2s ease-out infinite; + animation-delay: 1s; +} + +@keyframes pulseAnim { + 100% { + transform: scale(2.5); + opacity: 0; + } +} + +@media (max-width: 750px) { + .find-friends-container { + width: 320px; + padding: 10px; + } + + .loading-container { + width: 310px; + } +} diff --git a/tauri-app/src/components/FindFriends/index.tsx b/tauri-app/src/components/FindFriends/index.tsx new file mode 100644 index 0000000..ce07ba3 --- /dev/null +++ b/tauri-app/src/components/FindFriends/index.tsx @@ -0,0 +1,82 @@ +import "./index.css"; +import React, { FC, useState, useRef } from "react"; + +const FriendRequest: FC = () => { + const [isCopied, setIsCopied] = useState(false); + const copyRef = useRef(null); + + return ( + <div className="friend-request-container"> + <div className="friend-request-header"> + <img src={"/pg.jpg"} /> + <div> + <p>@Hello.world</p> + <div + style={{ + display: "flex", + justifyContent: "center", + alignItems: "center", + }} + > + <input ref={copyRef} type="text" value="did" /> + {!isCopied ? ( + <i + onClick={() => { + copyRef.current.select(); + document.execCommand("copy"); + setIsCopied(true); + }} + className="fa-regular fa-copy" + ></i> + ) : ( + <i className="fas fa-check-double"></i> + )} + </div> + </div> + </div> + <div className="btn-container"> + <button> + Send A Friend Request{" "} + <i style={{ marginLeft: "10px" }} className="fa fa-user-plus"></i> + </button> + </div> + </div> + ); +}; + +const index: FC = () => { + const [isLoading, setIsLoading] = useState(true); + setTimeout(() => { + setIsLoading(false); + }, 5000); + return ( + <div + className="find-friends-container" + onClick={(e) => e.stopPropagation()} + > + {isLoading ? ( + <> + <div className="loading-container"> + <div className="g-pluse"></div> + <div className="b-pluse"></div> + + <div className="pluse-container"> + <i className="fa fa-user"></i> + </div> + </div> + <h3>Recommending friends based off medical records...</h3> + </> + ) : ( + <> + <div className="requests-container"> + {[1, 2, 3, 4, 5, 6, 7].map((num) => { + return <FriendRequest />; + })} + </div> + </> + )} + </div> + ); +}; + +export default index; diff --git a/tauri-app/src/components/FootNavbar/index.css b/tauri-app/src/components/FootNavbar/index.css new file mode 100644 index 0000000..711ee03 --- /dev/null +++ b/tauri-app/src/components/FootNavbar/index.css @@ -0,0 +1,87 @@ +.footer-container { + background: #000; + padding: var(--padding-desktop); + color: #fff; + display: flex; + justify-content: space-around; + align-items: center; + padding-top: 20px; +} + +.footer-logo-right-container { + margin-right: 50px; + text-align: center; +} + +.footer-logo-right-container h1 { + margin-bottom: 35px; + font-family: "Roboto"; +} + +.footer-logo-right-container p { + font-family: "Roboto"; +} + +.footer-logo-right-container h1 span { + font-family: "Pacifico"; +} + +.footer-link-container { + width: 100%; +} + +.footer-utils-link-container { + display: flex; + align-items: center; + padding: 10px 0px; + justify-content: space-evenly; +} + +.footer-utils-link-container h1 { + font-family: "Roboto"; + font-size: 18px; +} + +.footer-utils-link-container h1 a { + color: #fff; + text-decoration: none; +} + +.footer-line { + width: 50%; + margin: 10px auto; +} + +.footer-link-container p { + color: #fff; + font-family: "Pacifico"; + margin: 10px auto; +} + +.team-container { + width: 100%; + text-align: center; +} + +@media (max-width: 750px) { + .footer-container { + display: block; + background: #000; + padding: var(--padding-mobile); + } + + .footer-utils-link-container { + display: block; + justify-content: center; + } + + .footer-utils-link-container h1 { + margin: 10px auto; + width: max-content; + } + + .footer-logo-right-container { + width: 100%; + margin: 0; + } +} diff --git a/tauri-app/src/components/FootNavbar/index.tsx b/tauri-app/src/components/FootNavbar/index.tsx new file mode 100644 index 0000000..8645bb8 --- /dev/null +++ b/tauri-app/src/components/FootNavbar/index.tsx @@ -0,0 +1,35 @@ +import "./index.css"; + +const index = () => { + return ( + <div className="footer-container"> + <div className="footer-logo-right-container"> + <h1> + Pulse<span>Pal</span> + </h1> + <p>Copyright © 2023</p> + </div> + <div className="footer-link-container"> + <div className="footer-utils-link-container"> + <h1> + <a href="#">Home</a> + </h1> + <h1> + <a href="#">DIY Remedies</a> + </h1> + <h1> + <a href="#">Contact Us</a> + </h1> + </div> + <hr className="footer-line" /> + <div className="team-container"> + <p> + Made with <i className="fa fa-heart"></i> by pulsepal team. + </p> + </div> + </div> + </div> + ); +}; + +export default index; diff --git a/tauri-app/src/components/FriendRequests/index.css b/tauri-app/src/components/FriendRequests/index.css new file mode 100644 index 0000000..ba82165 --- /dev/null +++ b/tauri-app/src/components/FriendRequests/index.css @@ -0,0 +1,127 @@ +.friend-request-container { + box-shadow: var(--box-shadow-black); + padding: 5px 8px; + border-radius: 5px; + width: 280px; + margin: 18px 0px; +} + +.friend-requests-container:n-child(1) { + margin-top: 60px; +} + +.btn-container { + display: flex; + justify-content: space-around; + align-items: center; +} + +.btn-container button { + width: max-content; + padding: 4px 12px; + outline: none; + border-radius: 3px; + border: none; + font-family: "Roboto"; + margin: 8px 0px; + font-weight: 800; + color: var(--color-white); + text-transform: uppercase; +} + +.btn-container button:nth-child(1) { + background: var(--color-green); + box-shadow: var(--box-shadow-green); +} + +.btn-container button:nth-child(2) { + background: var(--color-red); + box-shadow: var(--box-shadow-red); +} + +.friend-request-header { + display: flex; + justify-content: space-between; + align-items: center; + font-family: "Roboto"; + text-align: left; +} + +.friend-request-header img { + width: 50px; + height: 50px; + border-radius: 5px; +} + +.friend-request-header input { + padding: 4px 8px; + background: var(--color-slate-accent); + border: none; + border-radius: 3px; + font-family: "Roboto"; + margin: 8px 0; + margin-right: 10px; + outline: none; +} + +.friend-requests-container { + width: 400px; + height: max-content; + border-radius: 15px; + background: var(--color-white); + padding: 20px; +} + +.friend-requests-container h1 { + padding: 8px 10px; + font-family: "Pacifico"; +} + +.requests-container { + height: 420px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + overflow-y: scroll; + overflow-x: hidden; + text-align: center; +} + +.requests-container::-webkit-scrollbar { + width: 6px; +} + +.requests-container::-webkit-scrollbar-track { + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); + border-radius: 5px; +} + +.requests-container::-webkit-scrollbar-thumb { + width: 2px; + background: var(--color-blue); + border-radius: 5px; + margin: 0 3px; +} + +@media (max-width: 750px) { + .friend-requests-container { + width: 300px; + } + + .friend-request-container { + width: 270px; + } + + .friend-request-header img { + margin-right: 5px; + } + + .btn-container button { + padding: 8px 10px; + } + + .friend-requests-container:n-child(1) { + margin-top: 110px; + } +} diff --git a/tauri-app/src/components/FriendRequests/index.tsx b/tauri-app/src/components/FriendRequests/index.tsx new file mode 100644 index 0000000..ad5d819 --- /dev/null +++ b/tauri-app/src/components/FriendRequests/index.tsx @@ -0,0 +1,60 @@ +import "./index.css"; +import React, { FC, useState, useRef } from "react"; + +const FriendRequest: FC = () => { + const [isCopied, setIsCopied] = useState(false); + const copyRef = useRef(null); + + return ( + <div className="friend-request-container"> + <div className="friend-request-header"> + <img src={"/pg.jpg"} /> + <div> + <p>@Hello.world</p> + <div + style={{ + display: "flex", + justifyContent: "center", + alignItems: "center", + }} + > + <input ref={copyRef} type="text" value="did" /> + {!isCopied ? ( + <i + onClick={() => { + copyRef.current.select(); + document.execCommand("copy"); + setIsCopied(true); + }} + className="fa-regular fa-copy" + ></i> + ) : ( + <i className="fas fa-check-double"></i> + )} + </div> + </div> + </div> + <div className="btn-container"> + <button>Accept</button> + <button>Decline</button> + </div> + </div> + ); +}; +const index: FC = () => { + return ( + <div + className="friend-requests-container" + onClick={(e) => e.stopPropagation()} + > + <h1>Friend Requests!</h1> + <div className="requests-container"> + {[1, 2, 3, 4, 5, 6, 7].map((num) => { + return <FriendRequest />; + })} + </div> + </div> + ); +}; + +export default index; diff --git a/tauri-app/src/components/MobileChat/index.css b/tauri-app/src/components/MobileChat/index.css new file mode 100644 index 0000000..3113d50 --- /dev/null +++ b/tauri-app/src/components/MobileChat/index.css @@ -0,0 +1,101 @@ +.m-chat-m-container { + width: 320px; + height: 440px; + background: var(--color-white); + border-radius: 15px; + padding: 8px; +} + +.m-chat-component-container { + box-shadow: var(--box-shadow-black); + border-radius: 15px; + padding: 20px; + width: 80%; + height: 100%; + min-height: 500px; +} + +.m-chat-message-input-container { + width: 100%; + padding: 15px 0px; + display: flex; + justify-content: space-around; + align-items: center; +} + +.m-chat-message-input-container input { + width: 65%; + padding: 8px 5px; + background: var(--color-slate-accent); + border: none; + border-radius: 25px; + outline: none; + font-family: "Roboto"; + font-size: 20px; + text-indent: 8px; +} + +.m-chat-message-input-container button { + width: 40px; + height: 40px; + border: none; + border-radius: 50%; + color: var(--color-white); + background: var(--color-blue); + box-shadow: var(--box-shadow-blue); + font-size: 20px; + outline: none; +} + +.m-chats-container { + width: 90%; + background: var(--color-light-grey); + padding: 12px; + border-radius: 15px 5px 5px 15px; + margin: 0 auto; + overflow-y: scroll; + overflow-x: hidden; + height: 350px; +} + +.m-chats-container::-webkit-scrollbar { + width: 6px; +} + +.m-chats-container::-webkit-scrollbar-track { + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); + border-radius: 0 15px 15px 0; + transform: translateX(-4px); +} + +.m-chats-container::-webkit-scrollbar-thumb { + width: 2px; + background: var(--color-blue); + border-radius: 0 5px 5px 0; + margin: 0 3px; +} + +.msg-container { + width: 100%; + margin: 25px 2px; +} + +.msg-f { + width: max-content; + background: var(--color-light-green); + font-family: "Open Sans"; + padding: 4px 10px; + border-radius: 8px 8px 8px 0px; + margin-right: auto; + max-width: 200px; +} + +.msg-t { + width: max-content; + background: var(--color-light-blue); + font-family: "Open Sans"; + padding: 4px 10px; + border-radius: 8px 8px 0px 8px; + margin-left: auto; + max-width: 200px; +} diff --git a/tauri-app/src/components/MobileChat/index.tsx b/tauri-app/src/components/MobileChat/index.tsx new file mode 100644 index 0000000..617b14e --- /dev/null +++ b/tauri-app/src/components/MobileChat/index.tsx @@ -0,0 +1,70 @@ +import "./index.css"; +import React, { FC } from "react"; + +interface MessageProp { + message: string; + isLeft: boolean; +} + +const Message: FC<MessageProp> = ({ message, isLeft }) => { + return ( + <div className="msg-container" style={{ justifyContent: "right" }}> + <div className={isLeft ? "msg-f" : "msg-t"}> + <p>{message}</p> + </div> + </div> + ); +}; +//@ts-ignore +const index: FC = ({ setHideChat, hideChat }) => { + return ( + <div className="m-chat-m-container"> + <div className="m-chats-container"> + <Message message={"Hi Larry"} isLeft={false} /> + <Message message={"Sup Greg"} isLeft={true} /> + <Message + message={ + "Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis." + } + isLeft={false} + /> + <Message + message={ + "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat." + } + isLeft={true} + /> + <Message + message={ + "Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis." + } + isLeft={true} + /> + <Message + message={ + "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat." + } + isLeft={false} + /> + </div> + <div className="m-chat-message-input-container"> + <input type="text" placeholder="Say Hi!" /> + <button> + <i className="fa fa-caret-right"></i> + </button> + <button + style={{ + background: "var(--color-red)", + boxShadow: "var(--box-shadow-red)", + transform: "rotate(45deg)", + }} + onClick={() => setHideChat(!hideChat)} + > + <i className="fa fa-plus"></i> + </button> + </div> + </div> + ); +}; + +export default index; diff --git a/tauri-app/src/components/MobileNavbar/index.css b/tauri-app/src/components/MobileNavbar/index.css new file mode 100644 index 0000000..45b1d1c --- /dev/null +++ b/tauri-app/src/components/MobileNavbar/index.css @@ -0,0 +1,53 @@ +.mobile_menu { + width: 85%; + height: 50px; + padding: 10px; + border-radius: 5px; + box-shadow: 0 0px 4px rgba(0, 0, 0, 0.3); + position: fixed; + bottom: 35px; + left: 50%; + transform: translateX(-50%); + display: flex; + justify-content: space-around; + align-items: center; + background: var(--color-white); + z-index: 5; +} + +.menu_item { + font-size: 30px; + color: var(--color-blue); + position: relative; + text-align: center; +} + +.menu_item h3 { + font-size: 12px; + font-family: "Roboto"; + font-weight: 800; +} + +.menu_item span { + font-size: 10px; + background: var(--color-red); + color: var(--color-white); + padding: 2px 4px; + border-radius: 5px; + font-family: "Roboto"; + border: 2px solid var(--color-white); + position: absolute; + top: 0; +} + +.menu_item span:nth-child(1) { + right: -14px; +} + +.menu_item span:nth-child(2) { + right: -18px; +} + +.menu_item span:nth-child(3) { + right: 0px; +} diff --git a/tauri-app/src/components/MobileNavbar/index.tsx b/tauri-app/src/components/MobileNavbar/index.tsx new file mode 100644 index 0000000..bf5ec08 --- /dev/null +++ b/tauri-app/src/components/MobileNavbar/index.tsx @@ -0,0 +1,44 @@ +import "./index.css"; +import { NavLink } from "react-router-dom"; + +const index = () => { + return ( + <div className="mobile_menu"> + <NavLink to="/" style={{ textDecoration: "none" }}> + <div className="menu_item"> + <i style={{ fontSize: "30px" }} className="fa fa-home"></i> + <h3 style={{ fontSize: "13px" }}>Home</h3> + </div> + </NavLink> + <NavLink to="/records" style={{ textDecoration: "none" }}> + <div className="menu_item"> + <i style={{ fontSize: "30px" }} className="fa fa-database"></i> + <h3 style={{ fontSize: "13px" }}>Records</h3> + <span>35</span> + </div> + </NavLink> + <NavLink to="/chat" style={{ textDecoration: "none" }}> + <div className="menu_item"> + <i className="fas fa-comment-alt"></i> + <span>28</span> + <h3>Chats</h3> + </div> + </NavLink> + <NavLink to="/remedies" style={{ textDecoration: "none" }}> + <div className="menu_item"> + <i className="fas fa-first-aid"></i> + <h3>DIY Remedies</h3> + <span>99+</span> + </div> + </NavLink> + <NavLink to="/contact" style={{ textDecoration: "none" }}> + <div className="menu_item"> + <i className="fa fa-address-book"></i> + <h3>Contact</h3> + </div> + </NavLink> + </div> + ); +}; + +export default index; diff --git a/tauri-app/src/components/Navbar/index.css b/tauri-app/src/components/Navbar/index.css new file mode 100644 index 0000000..50ace42 --- /dev/null +++ b/tauri-app/src/components/Navbar/index.css @@ -0,0 +1,147 @@ +.main_navbar_container { + padding: 20px 65px; + box-shadow: 0 0 3px 4px rgba(0, 0, 0, 0.1); + display: flex; + justify-content: space-between; + align-items: center; + position: sticky; + top: 0; + background: var(--color-white); + z-index: 10; +} + +.logo_container { + position: relative; +} + +.logo_container i:nth-child(1) { + font-size: 54px; + color: var(--color-blue); +} + +.logo_container i:nth-child(2) { + font-size: 15px; + position: absolute; + left: 12px; + top: 8px; + color: var(--color-white); +} + +.comp_menu_container { + display: flex; + justify-content: center; + align-items: center; +} + +.comp_menu_container div { + font-family: "Roboto"; + font-size: 14px; + margin: 0px 10px; + position: relative; + display: flex; + justify-content: space-between; + align-items: center; +} + +.comp_menu_container div i { + color: var(--color-blue); + margin-right: 4px; +} + +.comp_menu_container div span { + color: var(--color-white); + background: var(--color-red); + font-family: "Roboto"; + display: flex; + justify-content: center; + align-items: center; + border-radius: 5px; + font-size: 14px; + margin-left: 8px; + text-align: center; + padding: 2px 4px; +} + +.comp_menu_container div h3 { + color: var(--color-blue); + font-weight: 800; + transition: 0.3s; +} + +.comp_menu_container div h3:hover { + opacity: 1; +} + +.auth_container:focus { + outline: none; +} + +.auth_container { + border: 0; + display: flex; + align-items: center; + justify-content: center; + width: max-content; +} + +.auth_container { + padding: 8px 20px; + padding-right: 8px; + border-radius: 28px; + background: var(--color-green); + box-shadow: var(--box-shadow-green); + color: var(--color-white); + font-family: "Roboto"; + cursor: pointer; + font-weight: 800; +} + +.auth_container i { + background: var(--color-white); + padding: 10px 12px; + border-radius: 50%; + color: var(--color-black); + margin-left: 10px; +} + +.did-container { + width: 200px; + height: 150px; + background: var(--color-white); + box-shadow: var(--box-shadow-black); + position: absolute; + top: 100px; + right: 45px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + padding: 8px; + border-radius: 5px; +} + +.did-container .auth_container { + background: var(--color-red); + box-shadow: var(--box-shadow-red); +} + +.did-container input { + background: var(--color-slate-accent); + border-radius: 5px; + border: none; + font-family: "Roboto"; + outline: none; + padding: 8px 4px; + margin: 14px 0px; + margin-right: 8px; +} + +@media (max-width: 750px) { + .main_navbar_container { + padding: 15px 25px; + } + + .comp_menu_container { + display: none; + } +} diff --git a/tauri-app/src/components/Navbar/index.tsx b/tauri-app/src/components/Navbar/index.tsx new file mode 100644 index 0000000..4ea6ab3 --- /dev/null +++ b/tauri-app/src/components/Navbar/index.tsx @@ -0,0 +1,150 @@ +import ProfileGuard from "../Auth/Profile/Guard"; +import "./index.css"; +import { NavLink } from "react-router-dom"; +import useWeb5Store from "@/stores/useWeb5Store.ts"; +import { Agent } from "../Auth/types"; +import { useProfile } from "@/stores/profile.ts"; +import { useState, useRef } from "react"; + +const SignedInBtn = () => { + const { profile, signOut } = useProfile((store) => ({ + profile: store.state.profile!, + signOut: store.signOut, + })); + const [showSignOutUtils, setShowSignOutUtils] = useState(false); + const [isCopied, setIsCopied] = useState(false); + const copyRef = useRef(null); + + return ( + <> + {showSignOutUtils && ( + <div className="did-container"> + <div> + <b style={{ fontFamily: "Roboto" }}>DID:</b> + <input + ref={copyRef} + type="text" + value={profile.did} + placeholder="did field" + /> + {!isCopied ? ( + <i + onClick={() => { + copyRef.current.select(); + document.execCommand("copy"); + setIsCopied(true); + }} + className="fa-regular fa-copy" + ></i> + ) : ( + <i className="fas fa-check-double"></i> + )} + </div> + <button + type="button" + className="auth_container" + onClick={() => signOut()} + > + <h3>Sign Out</h3> + <i className="fa fa-sign-out" /> + </button> + </div> + )} + + <button + type="button" + className="auth_container" + onClick={() => { + setIsCopied(false); + setShowSignOutUtils(!showSignOutUtils); + }} + > + <h3>In App</h3> + <i + style={{ width: "max-content", height: "max-content" }} + className="fa fa-cubes" + /> + </button> + </> + ); +}; + +const index = () => { + const { web5, did } = useWeb5Store((state) => ({ + web5: state.web5, + did: state.did, + })); + const { signIn, setShowAuthModal, signOut } = useProfile((state) => ({ + signIn: state.signIn, + signOut: state.signOut, + setShowAuthModal: state.setShowAuthModal, + })); + + const beginAuthFlow = async (agent: Agent) => { + const signedIn = await signIn(agent); + if (!signedIn) { + console.log("displaying auth modal"); + setShowAuthModal(true); + } + }; + + return ( + <div className="main_navbar_container"> + <div className="logo_container"> + <i className="fa-brands fa-paypal" /> + <i className="fa fa-heartbeat" /> + </div> + <div className="comp_menu_container"> + <NavLink to="/" style={{ textDecoration: "none" }}> + <div> + <i className="fa fa-home" /> + <h3>Home</h3> + </div> + </NavLink> + <NavLink to="/records" style={{ textDecoration: "none" }}> + <div> + <i className="fa fa-database" /> + <h3>Records </h3> + <span>28</span> + </div> + </NavLink> + <NavLink to="/chat" style={{ textDecoration: "none" }}> + <div> + <i className="fas fa-comment-alt" /> + <h3>Chats </h3> + <span>5</span> + </div> + </NavLink> + <NavLink to="/remedies" style={{ textDecoration: "none" }}> + <div> + <i className="fas fa-first-aid" /> + <h3>DIY Remedies</h3> + <span>99+</span> + </div> + </NavLink> + <NavLink to="/contact" style={{ textDecoration: "none" }}> + <div> + <i className="fa fa-address-book" /> + <h3>Contact</h3> + </div> + </NavLink> + </div> + <ProfileGuard + fallback={ + <button + type="button" + className="auth_container" + onClick={() => (web5 && did ? beginAuthFlow({ web5, did }) : null)} + > + <h3>Connect Wallet</h3> + <i className="fa fa-user" /> + </button> + } + > + <SignedInBtn /> + </ProfileGuard> + </div> + ); +}; + +export default index; diff --git a/tauri-app/src/components/Ratings/index.css b/tauri-app/src/components/Ratings/index.css new file mode 100644 index 0000000..e69de29 diff --git a/tauri-app/src/components/Ratings/index.tsx b/tauri-app/src/components/Ratings/index.tsx new file mode 100644 index 0000000..872165a --- /dev/null +++ b/tauri-app/src/components/Ratings/index.tsx @@ -0,0 +1,15 @@ +import "./index.css"; + +const index = () => { + return ( + <div> + <i className="fa-regular fa-star"></i> + <i className="fa-regular fa-star"></i> + <i className="fa-regular fa-star"></i> + <i className="fa-regular fa-star"></i> + <i className="fa-regular fa-star"></i> + </div> + ); +}; + +export default index; diff --git a/tauri-app/src/components/RemedyCard/index.css b/tauri-app/src/components/RemedyCard/index.css new file mode 100644 index 0000000..f4a93a3 --- /dev/null +++ b/tauri-app/src/components/RemedyCard/index.css @@ -0,0 +1,59 @@ +.ratings-container { + margin: 10px 0; + font-family: "Pacifico"; +} + +.ratings-container i { + margin-right: 5px; +} + +.remedy-card { + height: 400px; + width: 300px; + border-radius: 15px; + padding: px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + overflow: hidden; + margin: 20px 0px; +} + +.remedy-card-image-container { + height: 200px; + color: var(--color-white); + padding: 15px; + font-weight: 500; + border-radius: 0 0 15px 15px; +} + +.remedy-card-image-container h1 { + font-family: "Roboto"; + margin-bottom: 15px; + text-transform: capitalize; + font-size: 30px; +} + +.remedy-card-image-container p { + font-family: "Roboto"; +} + +.remedy-info-container p { + padding: 15px; + font-family: "Open Sans"; +} + +.remedy-info-container button { + margin-top: 20px; + border: none; + font-family: "Pacifico"; + background: var(--color-green); + box-shadow: var(--box-shadow-green); + padding: 10px 15px; + width: 90%; + color: var(--color-white); + font-size: 24px; + margin: auto auto; + border-radius: 8px; + margin-left: 5%; + cursor: pointer; + outline: none; +} diff --git a/tauri-app/src/components/RemedyCard/index.tsx b/tauri-app/src/components/RemedyCard/index.tsx new file mode 100644 index 0000000..21709a2 --- /dev/null +++ b/tauri-app/src/components/RemedyCard/index.tsx @@ -0,0 +1,54 @@ +import "./index.css"; + +// @ts-ignore +const createRatingsIcons = (ratings) => { + const icons = []; + for (let n = 0; n < ratings; n++) { + icons.push(<i className="fa fa-leaf"></i>); + } + + return icons; +}; + +const index = ({ + // @ts-ignore + name, + // @ts-ignore + description, + // @ts-ignore + created_by, useUrl, + // @ts-ignore + rating, + // @ts-ignore + isClicked, +}) => { + return ( + <div className="remedy-card"> + <div + style={{ + background: `linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.5)),url(${useUrl})`, + backgroundPosition: "center", + backgroundSize: "cover", + }} + className="remedy-card-image-container" + > + <h1>{name}</h1> + <p>--by {created_by}</p> + <div className="ratings-container"> + <h3> + {rating}{" "} + {createRatingsIcons(rating).map((icon) => { + return icon; + })} + </h3> + </div> + </div> + <div className="remedy-info-container"> + <p>{description.substring(0, 50) + "..."}</p> + <button onClick={() => isClicked[1](isClicked[0])}>View Remedy</button> + </div> + </div> + ); +}; + +export default index; diff --git a/tauri-app/src/components/UserFriendList/index.css b/tauri-app/src/components/UserFriendList/index.css new file mode 100644 index 0000000..7cd7e00 --- /dev/null +++ b/tauri-app/src/components/UserFriendList/index.css @@ -0,0 +1,112 @@ +.friend-tag-container { + display: flex; + justify-content: space-between; + align-items: center; + margin: 12px 0; + border-radius: 8px; + transition: 0.3s; + padding: 8px; + transition: 0.3s; +} + +.friend-tag-container h1 { + font-size: 15px; + font-family: "Roboto"; +} + +.friend-tag-container img { + width: 40px; + height: 40px; + border-radius: 5px; +} + +.friend-tag-container span { + font-family: "Roboto"; + background: var(--color-red); + border-radius: 3px; + padding: 2px 3px; + color: var(--color-white); + border: 2px solid var(--color-white); + border-radius: 8px; + + font-size: 8px; + position: relative; + left: -5px; + width: 20px; + height: 20px; +} + +.friends-list-container hr { + width: 60%; + margin: 0 auto; +} + +.friends-list-container hr:last-child { + display: none; +} + +.friend-tag-container:hover { + background: var(--color-slate-accent); +} + +.friends-list-container { + box-shadow: var(--box-shadow-black); + padding: 8px 14px; + border-radius: 15px; + margin-top: 30px; + width: 200px; +} + +.friends-list-header { + padding: 8px 12px; + border-radius: 10px; + color: var(--color-white); + font-family: "Roboto"; + text-align: center; +} + +.d-did-container { + display: flex; + justify-content: center; + align-items: center; +} + +.friend-tag-container input { + background: var(--color-light-grey); + border-radius: 5px; + border: none; + font-family: "Roboto"; + outline: none; + padding: 8px 4px; + margin: 14px 0px; + margin-right: 8px; + width: 40px; +} + +.friend-main-list-container { + overflow-y: scroll; + overflow-x: hidden; + height: 250px; + margin: 15px 0; + padding: 5px; +} + +.friend-main-list-container::-webkit-scrollbar { + width: 6px; +} + +.friend-main-list-container::-webkit-scrollbar-track { + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); + border-radius: 5px; +} + +.friend-main-list-container::-webkit-scrollbar-thumb { + width: 2px; + background: var(--color-blue); + border-radius: 5px; + margin: 0 3px; +} + +.friends-list-header b { + font-family: "Pacifico"; +} diff --git a/tauri-app/src/components/UserFriendList/index.tsx b/tauri-app/src/components/UserFriendList/index.tsx new file mode 100644 index 0000000..05d80f7 --- /dev/null +++ b/tauri-app/src/components/UserFriendList/index.tsx @@ -0,0 +1,98 @@ +import { Friend } from "@/pages/Chat"; +import "./index.css"; +import React, { FC, useState, useRef } from "react"; + +interface FriendTagProp { + friendProfileImg: string; + friendName: string; + isFriendOnline: boolean; + newChat?: number; + did?: string; +} + +const FriendTag: FC<FriendTagProp> = ({ + friendProfileImg, + friendName, + isFriendOnline, + newChat, + did, +}) => { + const [isCopied, setIsCopied] = useState<boolean>(false); + + const didRef = useRef(null); + + return ( + <div className="friend-tag-container"> + <div> + <img src={friendProfileImg} /> + {newChat && <span>{newChat}</span>} + </div> + <div + style={{ + padding: "0px 5px", + }} + > + <h1>{friendName.slice(0, 6) + "..."}</h1> + <div className="m-did-container"> + <input ref={didRef} type="text" value={did} /> + + {!isCopied ? ( + <i + onClick={(e) => { + e.stopPropagation(); + didRef.current.select(); + document.execCommand("copy"); + setIsCopied(true); + }} + className="fa-regular fa-copy" + ></i> + ) : ( + <i className="fas fa-check-double"></i> + )} + </div> + </div> + <i + className="fa fa-cube" + style={{ + color: `${ + isFriendOnline ? "var(--color-green)" : "var(--color-red)" + }`, + }} + /> + </div> + ); +}; + +interface UserFriendListProp { + friendList: FriendTagProp[]; + setHideChat: () => void; + hideChat: boolean; +} + +const index: FC<{ friendList: Friend[]}> = ({ friendList, setHideChat, hideChat }) => { + return ( + <div className="friends-list-container"> + <div className="friends-list-header" style={{ background:"var(--color-blue)"}}> + <h1>Friends</h1> + </div> + <div className="friend-main-list-container"> + {friendList.map((friend) => { + return ( + <> + <FriendTag + friendProfileImg={friend.profilePictureUrl} + isFriendOnline={friend.isOnline} + friendName={friend.username} + newChat={0} + did={friend.did} + /> + <hr /> + </> + ); + })} + </div> + </div> + ); +}; + +export default index; diff --git a/tauri-app/src/components/UserMobileFriendList/index.css b/tauri-app/src/components/UserMobileFriendList/index.css new file mode 100644 index 0000000..5da9c63 --- /dev/null +++ b/tauri-app/src/components/UserMobileFriendList/index.css @@ -0,0 +1,85 @@ +.m-friend-tag-container { + display: flex; + justify-content: space-around; + align-items: center; + border-radius: 15px; + padding: 2px 8px; + transition: 0.3s; + margin: 15px 20px; + background: var(--color-slate-accent); + box-shadow: var(--box-shadow-black); + height: 80px; +} + +.m-friend-tag-container h1 { + font-size: 15px; + font-family: "Roboto"; +} + +.m-friend-tag-container img { + width: 60px; + height: 60px; + border-radius: 50%; +} + +.m-friend-tag-container span { + font-family: "Roboto"; + background: var(--color-red); + border-radius: 3px; + padding: 2px 4px; + color: var(--color-white); + border: 2px solid var(--color-white); + border-radius: 8px; + font-size: 10px; + position: relative; + width: 40px; + top: -25px; + height: 40px; +} + +.m-friend-tag-container input { + background: var(--color-white); + border-radius: 5px; + border: none; + font-family: "Roboto"; + outline: none; + padding: 8px 4px; + margin: 14px 0px; + margin-right: 8px; +} + +.m-did-container { + display: flex; + justify-content: center; + align-items: center; +} + +.m-friends-list-container hr { + width: 80%; + margin: 0 auto; +} + +.m-friends-list-container hr:last-child { + display: none; +} + +.m-friends-list-container { + border-radius: 15px; +} + +.m-friends-list-header { + padding: var(--padding-mobile); + font-family: "Roboto"; + text-align: left; +} + +.m-friend-main-list-container { + overflow: hidden; +} + +.m-header { + background: var(--color-blue); + color: var(--color-white); + font-family: "Roboto"; + padding: 8px 25px; +} diff --git a/tauri-app/src/components/UserMobileFriendList/index.tsx b/tauri-app/src/components/UserMobileFriendList/index.tsx new file mode 100644 index 0000000..7de5ce9 --- /dev/null +++ b/tauri-app/src/components/UserMobileFriendList/index.tsx @@ -0,0 +1,106 @@ +import "./index.css"; +import React, { FC, useState, useRef } from "react"; + +interface FriendTagProp { + friendProfileImg: string; + friendName: string; + isFriendOnline: boolean; + newChat?: number; + setHideChat: () => void; + hideChat: boolean; + didi?: string; +} + +interface UserFriendListProp { + friendList: FriendTagProp[]; +} + +const FriendTag: FC<FriendTagProp> = ({ + friendProfileImg, + friendName, + isFriendOnline, + newChat, + setHideChat, + hideChat, + did, +}) => { + const [isCopied, setIsCopied] = useState<boolean>(false); + const didRef = useRef(null); + + return ( + <div + onClick={() => setHideChat(!hideChat)} + className="m-friend-tag-container" + > + <div> + <img src={friendProfileImg} /> + {newChat && <span>{newChat}</span>} + </div> + <div + style={{ + padding: "0px 5px", + }} + > + <h1>{friendName.slice(0, 20) + "..."}</h1> + <div className="m-did-container"> + <input ref={didRef} type="text" value={did} /> + + {!isCopied ? ( + <i + onClick={(e) => { + e.stopPropagation(); + didRef.current.select(); + document.execCommand("copy"); + setIsCopied(true); + }} + className="fa-regular fa-copy" + ></i> + ) : ( + <i className="fas fa-check-double"></i> + )} + </div> + </div> + <i + className="fa fa-cube" + style={{ + color: `${ + isFriendOnline ? "var(--color-green)" : "var(--color-red)" + }`, + }} + /> + </div> + ); +}; + +const index: FC<UserFriendListProp> = ({ + friendList, + hideChat, + setHideChat, +}) => { + return ( + <div className="m-friends-list-container"> + <div className="m-header"> + <h1>Friends</h1> + </div> + <div className="m-friend-main-list-container"> + {friendList.map((friend) => { + return ( + <> + <FriendTag + friendProfileImg={friend.profile_pic} + isFriendOnline={friend.isOnline} + friendName={friend.username} + newChat={friend.newChat} + setHideChat={setHideChat} + hideChat={hideChat} + did={friend.did} + /> + </> + ); + })} + </div> + </div> + ); +}; + +export default index; diff --git a/tauri-app/src/components/UserMobileProfile/index.css b/tauri-app/src/components/UserMobileProfile/index.css new file mode 100644 index 0000000..2704664 --- /dev/null +++ b/tauri-app/src/components/UserMobileProfile/index.css @@ -0,0 +1,53 @@ +.m-userprofile-container { + box-shadow: var(--box-shadow-black); + text-align: center; + position: relative; + padding-bottom: 15px; +} + +.m-userprofile-info-container img { + width: 80px; + height: 80px; + border-radius: 50%; + background: var(--color-white); + padding: 10px; + position: absolute; + top: 80px; + right: 20px; +} + +.m-userprofile-info-container p { + font-family: "Open Sans"; + margin-top: 50px; +} + +.m-cover-container { + height: 130px; + width: auto; + text-align: left; + padding-right: 6px; +} + +.m-cover-container h3 { + color: var(--color-white); + font-family: "Roboto"; + font-size: 18px; + position: relative; + left: 6px; + top: 10px; +} + +.m-cover-container p { + color: var(--color-white); + font-family: "Open Sans"; + font-size: 14px; + position: relative; + left: 6px; + top: 25px; +} + +@media (max-width: 750px) { + .m-userprofile-container { + width: auto; + } +} diff --git a/tauri-app/src/components/UserMobileProfile/index.tsx b/tauri-app/src/components/UserMobileProfile/index.tsx new file mode 100644 index 0000000..eae5b80 --- /dev/null +++ b/tauri-app/src/components/UserMobileProfile/index.tsx @@ -0,0 +1,74 @@ +import React, { FC } from "react"; + +import "./index.css"; + +interface friendUtils { + showFriendRequests: boolean; + setShowFriendRequests: () => void; +} + +interface findFriends { + showFriendRequests: boolean; + setShowFriendRequests: () => void; +} + +interface UserProfileProps { + username: String; + profile_pic: String; + cover_pic: String; + about_user: String; + friends: Number; + friendRequetsUtils: friendUtils[]; + findFriendsUtils: findFriendUtils[]; +} + +const index: FC<UserProfileProps> = ({ + username, + profile_pic, + cover_pic, + about_user, + friends, + friendRequests, + friendRequestsUtils, + findFriendsUtils, +}) => { + return ( + <div className="m-userprofile-container"> + <div + style={{ + background: `linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.1)),url(${cover_pic})`, + backgroundPosition: "center", + backgroundSize: "cover", + }} + className="m-cover-container" + > + <h3>@{username.slice(0, 10) + "..."}</h3> + <p> + Friends | <b>{friends}</b> + </p> + <p> + <button + onClick={() => findFriendsUtils[1](!findFriendsUtils[0])} + className="find-friend-btn" + > + Find Friends + </button> + </p> + + <div className="bell-container"> + <i + onClick={() => friendRequestsUtils[1](!friendRequestsUtils[0])} + className="fa fa-bell" + ></i> + <span>{friendRequests}</span> + </div> + </div> + <div className="m-userprofile-info-container"> + <img src={profile_pic} /> + <p>{about_user}</p> + </div> + </div> + ); +}; + +export default index; diff --git a/tauri-app/src/components/UserProfile/index.css b/tauri-app/src/components/UserProfile/index.css new file mode 100644 index 0000000..d827ddc --- /dev/null +++ b/tauri-app/src/components/UserProfile/index.css @@ -0,0 +1,111 @@ +.userprofile-container { + box-shadow: var(--box-shadow-black); + width: 200px; + text-align: center; + border-radius: 15px; + padding: 8px 11px; + position: relative; + padding-bottom: 12px; +} + +.userprofile-info-container img { + width: 80px; + height: 80px; + border-radius: 50%; + background: var(--color-white); + padding: 10px; + position: absolute; + top: 80px; + left: 50%; + transform: translateX(-50%); +} + +.userprofile-info-container p { + font-family: "Open Sans"; + margin-top: 40px; +} + +.cover-container { + height: 130px; + border-radius: 15px; + text-align: left; +} + +.cover-container h3 { + color: var(--color-white); + font-family: "Roboto"; + font-size: 18px; + position: relative; + left: 6px; + top: 10px; +} + +.cover-container p { + color: var(--color-white); + font-family: "Open Sans"; + font-size: 14px; + position: relative; + left: 6px; + top: 15px; +} + +.bell-container { + position: absolute; + right: 10px; + top: 22px; +} + +.bell-container i { + font-size: 25px; + color: var(--color-white); +} + +.bell-container span { + font-family: "Roboto"; + background: var(--color-red); + box-shadow: var(--box-shadow-red); + color: var(--color-white); + padding: 2px 4px; + border-radius: 10px; + border: 2px solid var(--color-white); + font-size: 10px; + position: relative; + left: -8px; +} + +.find-friend-btn { + background: transparent; + color: var(--color-white); + font-family: "Roboto"; + border: none; + outline: none; + text-decoration: underline; + cursor: pointer; +} + +@media (max-width: 750px) { + .userprofile-container { + width: 100%; + } + + .bell-container { + top: 18px; + } + + .bell-container i { + font-size: 30px; + } + + .find-friend-btn { + padding: 4px 6px; + margin-top: 5px; + background: var(--color-red); + box-shadow: var(--box-shadow-red); + color: var(--color-white); + border-radius: 5px; + font-family: "Roboto"; + border: none; + outline: none; + text-decoration: none; + } +} diff --git a/tauri-app/src/components/UserProfile/index.tsx b/tauri-app/src/components/UserProfile/index.tsx new file mode 100644 index 0000000..038de71 --- /dev/null +++ b/tauri-app/src/components/UserProfile/index.tsx @@ -0,0 +1,73 @@ +import React, { FC } from "react"; + +import "./index.css"; + +interface friendUtils { + showFriendRequests: boolean; + setShowFriendRequests: () => void; +} + +interface findFriends { + showFriendRequests: boolean; + setShowFriendRequests: () => void; +} + +interface UserProfileProps { + username: String; + profile_pic: String; + cover_pic: String; + about_user: String; + friends: Number; + friendRequetsUtils: friendUtils[]; + findFriendsUtils: findFriendUtils[]; +} + +const index: FC<UserProfileProps> = ({ + username, + profile_pic, + cover_pic, + about_user, + friends, + friendRequests, + friendRequestsUtils, + findFriendsUtils, +}) => { + return ( + <div className="userprofile-container"> + <div + style={{ + background: `linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.1)),url(${cover_pic})`, + backgroundPosition: "center", + backgroundSize: "cover", + }} + className="cover-container" + > + <h3>@{username.slice(0, 10) + "..."}</h3> + <p> + Friends <b>{friends}</b> + </p> + <p> + <button + onClick={() => findFriendsUtils[1](!findFriendsUtils[0])} + className="find-friend-btn" + > + Find Friends + </button> + </p> + <div className="bell-container"> + <i + onClick={() => friendRequestsUtils[1](!friendRequestsUtils[0])} + className="fa fa-bell" + ></i> + <span>{friendRequests}</span> + </div> + </div> + <div className="userprofile-info-container"> + <img src={profile_pic} /> + <p>{about_user}</p> + </div> + </div> + ); +}; + +export default index; diff --git a/tauri-app/src/hooks/useCopy.tsx b/tauri-app/src/hooks/useCopy.tsx new file mode 100644 index 0000000..e69de29 diff --git a/tauri-app/src/index.css b/tauri-app/src/index.css new file mode 100644 index 0000000..1696928 --- /dev/null +++ b/tauri-app/src/index.css @@ -0,0 +1,25 @@ +:root { + --color-green: #22c55e; + --box-shadow-green: 0 5px 12px rgba(34, 197, 94, 0.5); + --color-red: #ef4444; + --box-shadow-red: 0 5px 12px rgba(239, 68, 68, 0.5); + --color-blue: #0ea5e9; + --box-shadow-blue: 0 5px 12px rgba(14, 165, 233, 0.3); + --box-shadow-black: 0 3px 12px rgba(0, 0, 0, 0.1); + --color-slate-accent: #f1f5f9; + --color-white: #fff; + --color-black: #000; + --color-slate: #e2e8f0; + --color-orange: #f97316; + --color-light-green: #4ade80; + --color-light-blue: #7dd3fc; + --color-light-grey: #f8fafc; + --color-grey: #d1d5db; + --padding-desktop: 40px 65px; + --padding-mobile: 40px 25px; +} + +* { + margin: 0; + padding: 0; +} diff --git a/tauri-app/src/main.tsx b/tauri-app/src/main.tsx index 24eb0b3..ca0902c 100644 --- a/tauri-app/src/main.tsx +++ b/tauri-app/src/main.tsx @@ -1,10 +1,10 @@ // import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; -import "./globals.css"; +import "./index.css"; ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( // <React.StrictMode> - <App /> + <App />, // {/* </React.StrictMode> */} ); diff --git a/tauri-app/src/pages/Chat/FindFriends/index.css b/tauri-app/src/pages/Chat/FindFriends/index.css new file mode 100644 index 0000000..e69de29 diff --git a/tauri-app/src/pages/Chat/FindFriends/index.tsx b/tauri-app/src/pages/Chat/FindFriends/index.tsx new file mode 100644 index 0000000..e69de29 diff --git a/tauri-app/src/pages/Chat/index.css b/tauri-app/src/pages/Chat/index.css new file mode 100644 index 0000000..866178c --- /dev/null +++ b/tauri-app/src/pages/Chat/index.css @@ -0,0 +1,32 @@ +.main-chat-container { + padding: var(--padding-desktop); + display: flex; + justify-content: space-around; + align-items: flex-start; + position: relative; + max-height: 100%; +} + +.utils-container { + width: 25%; +} + +.chat-container { + width: 70%; + height: 100%; +} + +.data-container { + background: rgba(0, 0, 0, 0.3); + position: fixed; + width: 100%; + height: 100vh; + top: 0; + left: 0; + display: flex; + justify-content: center; + align-items: center; + z-index: 7; +} + +@media (max-width: 750px) {} diff --git a/tauri-app/src/pages/Chat/index.tsx b/tauri-app/src/pages/Chat/index.tsx new file mode 100644 index 0000000..5450385 --- /dev/null +++ b/tauri-app/src/pages/Chat/index.tsx @@ -0,0 +1,241 @@ +import "./index.css"; +import UserProfile from "../../components/UserProfile/"; +import UserFriendList from "../../components/UserFriendList/"; +import Chat from "../../components/Chat/"; +import FriendRequests from "../../components/FriendRequests/"; +import FindFriends from "../../components/FindFriends/"; + +import UserMobileProfile from "../../components/UserMobileProfile/"; +import UserMobileFriendList from "../../components/UserMobileFriendList/"; +import MobileChat from "../../components/MobileChat"; + +import { useEffect, useState } from "react"; +import { Agent } from "@/components/Auth/types"; +import UserDetailsUtils from "@/utils/user"; +import { Record as UserDetailsProtocolRecord } from "@/utils/protocols/user"; +import BlobUtils from "@/utils/blob"; +import { useProfile } from "@/stores/profile"; +import useWeb5Store from "@/stores/useWeb5Store"; + +const fetchProfilesWithConditions = async (agent: Agent, conditions: string[]) => { + const profileRecords = await UserDetailsUtils.fetchUserDetailsRecords(agent) + if (!profileRecords) + return [] + + const profilesWithRank = [] + for (const record of profileRecords) { + const profile: UserDetailsProtocolRecord.Details = await record.data.json() + + if (profile.did === agent.did) continue + + const profileWithRank = { + profile, + rank: 0 + } + + for (const condition of conditions) { + if (profile.conditions.indexOf(condition) > -1) { + profileWithRank.rank += 1 + } + } + + if (profileWithRank.rank === 0) continue + + profilesWithRank.push(profileWithRank) + } + + const sortedProfiles = profilesWithRank + .sort((a, b) => b.rank - a.rank) + .map((profileWithRank) => profileWithRank.profile) + + const matchingProfiles: (Omit<UserDetailsProtocolRecord.Details, "profilePictureId"> & { profilePictureUrl: string })[] = [] + + for (const p of sortedProfiles) { + const { profilePictureId, ...profile } = p + const profilePictureRecord = await BlobUtils.fetchBlobRecord(agent, { recordId: profilePictureId }, true) + + const payload = { + ...profile, + profilePictureUrl: "" + } + + if (profilePictureRecord) { + const profilePicture = await profilePictureRecord.data.blob() + payload.profilePictureUrl = URL.createObjectURL(profilePicture) + } + + matchingProfiles.push(payload) + } + + return matchingProfiles +} + +export type Friend = Awaited<ReturnType<typeof fetchProfilesWithConditions>>[number] & { + isOnline: boolean + username: string +} + +const index = () => { + const [friends, setFriends] = useState([ + { + profile_pic: "/pg.jpg", + username: "@scriptkidd", + isOnline: false, + did: "1020383*@(wppwsj)", + }, + { + profile_pic: "/pg.jpg", + username: "@nikki", + isOnline: false, + newChat: 1, + did: "apqpwpudrZpwpsAaap", + }, + { + profile_pic: "/pm.jpg", + username: "@gregidd", + isOnline: true, + newChat: 7, + did: "12340APDPDISavavagaAjd", + }, + { + profile_pic: "/pic.jpg", + username: "@scdd", + isOnline: false, + newChat: 4, + did: "APSOWJEHDHaksosodoQPPE1O", + }, + ]); + + {/*const [friends, setFriends] = useState<Friend[]>([ + // { profile_pic: "/pg.jpg", username: "@scriptkidd", isOnline: false, did: "1020383*@(wppwsj)" }, + // { profile_pic: "/pg.jpg", username: "@nikki", isOnline: false, newChat: 1, did: "apqpwpudrZpwpsAaap" }, + // { + // profile_pic: "/pm.jpg", + // username: "@gregidd", + // isOnline: true, + // newChat: 7, + // did: "12340APDPDISavavagaAjd" + // }, + // { profile_pic: "/pic.jpg", username: "@scdd", isOnline: false, newChat: 4, did: "APSOWJEHDHaksosodoQPPE1O" }, +>>>>>>> 499f1964de53b184725503bcf7efa766f1394645*/} + + const [isMobile, setIsMobile] = useState<boolean>(false); + const [hideChat, setHideChat] = useState<boolean>(false); + const [showFriendRequests, setShowFriendRequests] = useState<boolean>(false); + const [showFindFriends, setShowFindFriends] = useState<boolean>(false); + + const profile = useProfile(store => store.state.profile!) + const { web5, did } = useWeb5Store(store => ({ web5: store.web5!, did: store.did! })) + + useEffect(() => { + const fetchProfiles = async () => { + const res = await fetchProfilesWithConditions({ web5, did }, profile.conditions) + const newFriends = res.map(profile => ({ + ...profile, + isOnline: true, + username: `${profile.firstName}${profile.lastName}` + })) + setFriends(newFriends) + } + + fetchProfiles() + }, [profile, web5, did]) + + useEffect(() => { + if (window.innerWidth < 750) { + setIsMobile(true); + return; + } + + setIsMobile(false); + }, [window.innerWidth]); + + if (isMobile) { + return ( + <div className="m-chat-container"> + <UserMobileProfile + username={`${profile.firstName}${profile.lastName}`} + about_user={profile.description} + profile_pic={profile.profilePictureUrl} + cover_pic={profile.profilePictureUrl} + friends={friends.length} + friendRequests={5} + friendRequestsUtils={[showFriendRequests, setShowFriendRequests]} + findFriendsUtils={[showFindFriends, setShowFindFriends]} + //@ts-ignore + friendList={friends} + setHideChat={setHideChat} + hideChat={hideChat} + /> + {hideChat && ( + <div className="data-container"> + <MobileChat + //@ts-ignore + setHideChat={setHideChat} + hideChat={hideChat} + /> + </div> + )} + + {showFriendRequests && ( + <div + onClick={() => setShowFriendRequests(false)} + className="data-container" + > + <FriendRequests /> + </div> + )} + {showFindFriends && ( + <div + onClick={() => setShowFindFriends(false)} + className="data-container" + > + <FindFriends /> + </div> + )} + </div> + ); + } + return ( + <div className="main-chat-container"> + <div className="utils-container"> + <UserProfile + username={`${profile.firstName}${profile.lastName}`} + about_user={profile.description} + profile_pic={profile.profilePictureUrl} + cover_pic={profile.profilePictureUrl} + friends={friends.length} + friendRequests={5} + friendRequestsUtils={[showFriendRequests, setShowFriendRequests]} + findFriendsUtils={[showFindFriends, setShowFindFriends]} + + /> + <UserFriendList + friendList={friends} /> + </div> + <div className="chat-container"> + <Chat /> + </div> + + {showFriendRequests && ( + <div + onClick={() => setShowFriendRequests(false)} + className="data-container" + > + <FriendRequests /> + </div> + )} + + {showFindFriends && ( + <div + onClick={() => setShowFindFriends(false)} + className="data-container" + > + <FindFriends /> + </div> + )} + </div> + ); +}; + +export default index; diff --git a/tauri-app/src/pages/Contact/index.css b/tauri-app/src/pages/Contact/index.css new file mode 100644 index 0000000..cffe141 --- /dev/null +++ b/tauri-app/src/pages/Contact/index.css @@ -0,0 +1,87 @@ +.row-container { + display: flex; + justify-content: space-between; + align-items: center; + width: 70%; + + box-shadow: var(--box-shadow-black); + border-radius: 8px; + margin: 20px auto; + font-family: "Open Sans"; +} + +.row-container div { + padding: 10px 14px; + width: 100px; + border-radius: 15px; + margin: 10px; + text-align: center; +} + +.row-container div:nth-child(2) { + background: var(--color-green); + color: var(--color-white); + box-shadow: var(--box-shadow-green); +} + +.row-container div:nth-child(4) { + background: var(--color-red); + color: var(--color-white); + box-shadow: var(--box-shadow-red); +} + +.locate-container { + padding: var(--padding-desktop); +} + +.header { + display: flex; + justify-content: space-between; + align-items: center; +} + +.header h1 { + font-family: "Pacifico"; + margin: auto 0; +} + +.header button { + width: 150px; + border-radius: 50px; + background: var(--color-blue); + color: var(--color-white); + border: none; + outline: none; + font-size: 28px; + font-family: "Pacifico"; + padding: 8px 20px; + box-shadow: var(--box-shadow-blue); +} + +@media (max-width: 750px) { + .locate-container { + padding: var(--padding-mobile); + } + + .header { + flex-direction: column; + justify-content: center; + } + + .header button { + margin-top: 20px; + } + + .row-container { + width: 100%; + flex-direction: column; + } + + .row-container div { + width: 80%; + } +} + +.find { + cursor: pointer; +} \ No newline at end of file diff --git a/tauri-app/src/pages/Contact/index.tsx b/tauri-app/src/pages/Contact/index.tsx new file mode 100644 index 0000000..141b55e --- /dev/null +++ b/tauri-app/src/pages/Contact/index.tsx @@ -0,0 +1,82 @@ +import "./index.css"; +import React, { FC, useState } from "react"; + +interface RowProp { + name: String; + address: String; + rating: String +} + +const RowComponent: FC<RowProp> = ({ name, address, rating}) => { + return ( + <div className="row-container"> + <div> + <h3>{name}</h3> + </div> + <div> + <h3>{address}</h3> + </div> + <div> + <h3>{rating}</h3> + </div> + </div> + ); +}; + +//@ts-ignore +const index: FC = ({find, places}) => { + // const [fetchedLocations, setFetchedLocations] = useState<RowProp[]>([ + // { + // name: "Hopsital", + // address: "No 4 Dress road", + // city: "Kumkubaga", + // distance: '47', + // }, + // { + // name: "Hopsital", + // address: "No 4 Dress road", + // city: "Kumkubaga", + // distance: '47', + // }, + // { + // name: "Hopsital", + // address: "No 4 Dress road", + // city: "Kumkubaga", + // distance: '47', + // }, + // ]); + return ( + <div className="locate-container"> + <div className="header"> + <h1>Find Hospitals/Drs. Near You.</h1> + <button className="find" onClick={find}>Find</button> + </div> + <div className="locations-container"> + <div className="row-container"> + <div> + <h3>Hospital/Dr. name</h3> + </div> + <div> + <h3>Address</h3> + </div> + <div> + <h3>Ratings</h3> + </div> + </div> + + {/* @ts-ignore */} + {places?.map((place) => { + return ( + <RowComponent + name={place.name} + address={place.vicinity} + rating={place.rating} + /> + ); + })} + </div> + </div> + ); +}; + +export default index; diff --git a/tauri-app/src/pages/Home/SignUpForm.tsx b/tauri-app/src/pages/Home/SignUpForm.tsx new file mode 100644 index 0000000..dd58adb --- /dev/null +++ b/tauri-app/src/pages/Home/SignUpForm.tsx @@ -0,0 +1,137 @@ +import "./index.css"; +import useWeb5Store from "@/stores/useWeb5Store"; +import { useProfile } from "@/stores/profile"; +import { Agent } from "@/components/Auth/types"; +import { FunctionComponent, useRef, useState } from "react"; +import { z } from "zod"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { useForm } from "react-hook-form"; +import toast from "react-hot-toast"; +import { SignUpPayload } from "@/stores/profile"; + +const formSchema = z.object({ + firstName: z.string().min(1), + lastName: z.string().min(1), + description: z.string().min(1), + profilePicture: z.instanceof(File), +}); + +interface FileProp { + file: File | null | undefined; +} + +const FileUploader: FunctionComponent<{ + onChange: (file: File | null) => void; +}> = ({ onChange }) => { + const [file, setFile] = useState<FileProp>({ file: null }); + + return ( + <div className={!file?.file ? "form-container" : "form-container-active"}> + <h3>Profile Picture</h3> + <br /> + <input + onChange={(e) => { + const file = e?.target?.files?.[0]; + onChange(file ? file : null); + setFile({ file: e?.target?.files?.[0] }); + }} + type="file" + accept=".jpg,.png,.jpeg" + /> + </div> + ); +}; + +export default function SignUpForm() { + console.log("kfjle"); + const { web5, did } = useWeb5Store((state) => ({ + web5: state.web5!, + did: state.did!, + })); + + const submitBtnRef = useRef<HTMLButtonElement>(null); + const { setShowAuthModal, signUp, signIn } = useProfile((state) => ({ + signUp: state.signUp, + signIn: state.signIn, + setShowAuthModal: state.setShowAuthModal, + })); + + const form = useForm<z.infer<typeof formSchema>>({ + resolver: zodResolver(formSchema), + }); + + form.watch((value) => { + if (!submitBtnRef.current) return; + + const isValid = formSchema.safeParse(value).success; + + if (isValid) { + submitBtnRef.current.classList.remove("not-filled-btn"); + submitBtnRef.current.classList.add("filled-btn"); + submitBtnRef.current.disabled = false; + } else { + submitBtnRef.current.classList.add("not-filled-btn"); + submitBtnRef.current.classList.remove("filled-btn"); + submitBtnRef.current.disabled = true; + } + }); + + const createProfile = async (agent: Agent, payload: SignUpPayload) => { + const hasSignedUpSuccessfully = await signUp(agent, payload); + + if (!hasSignedUpSuccessfully) { + toast.error("Sorry an error occurred!"); + return; + } + + if (!(await signIn(agent))) return; + + toast.success("Successfully signed up!"); + + setShowAuthModal(false); + }; + + const onSubmit = (value: z.infer<typeof formSchema>) => { + if (web5 && did) createProfile({ web5, did }, value); + }; + + return ( + <div className="data-container" onClick={() => setShowAuthModal(false)}> + <form + className="auth-form" + onClick={(e) => e.stopPropagation()} + onSubmit={form.handleSubmit(onSubmit)} + > + <FileUploader + onChange={(file) => form.setValue("profilePicture", file as File)} + /> + <input + type="text" + required + placeholder="First name" + {...form.register("firstName")} + /> + <input + type="text" + required + placeholder="Last name" + {...form.register("lastName")} + /> + + <textarea + required + placeholder="Let's know about you?" + {...form.register("description")} + /> + <button + type="submit" + style={{ width: "100%", marginRight: "0" }} + className="not-filled-btn" + ref={submitBtnRef} + > + Fill Form To Proceed + </button> + </form> + </div> + ); +} diff --git a/tauri-app/src/pages/Home/index.css b/tauri-app/src/pages/Home/index.css new file mode 100644 index 0000000..b6dbc78 --- /dev/null +++ b/tauri-app/src/pages/Home/index.css @@ -0,0 +1,484 @@ +.main_container { + /* padding: 40px 65px;*/ +} + +.main_info_container { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--padding-desktop); +} + +.info_container { + width: 45%; +} + +.info_container h1 { + font-size: 40px; + font-family: "Roboto"; + font-weight: 700; + text-transform: uppercase; + margin: 20px 0px; +} + +#header { + font-family: "Roboto"; + font-size: 20px; + font-weight: 500; +} + +#header b { + font-family: "Pacifico"; + text-transform: capitalize; + color: var(--color-blue); +} + +.info_container p { + font-family: "Open Sans"; + font-weight: 200; + margin-bottom: 20px; +} + +.gs_btn { + width: max-content; + background: var(--color-red); + color: var(--color-white); + box-shadow: var(--box-shadow-red); + padding: 15px 20px; + border: none; + border-radius: 5px; + font-size: 20px; + font-family: "Pacifico"; + font-weight: 600; +} + +.gs_btn i { + margin-left: 12px; +} + +.img-container { + background-size: contain; + background-position: center; + background: url("../../../public/pic.jpg"); + width: 45%; + height: 400px; + border-radius: 18px; + box-shadow: var(--box-shadow-blue); +} + +.techstack-container { + padding: var(--padding-desktop); + background: var(--color-blue); + position: relative; + top: -10px; +} + +#b-wave-1 { + position: relative; + top: -15px; +} + +.techstack-container h1 { + color: var(--color-white); + font-family: "Roboto"; + text-transform: uppercase; + margin-bottom: 30px; + font-size: 35px; +} + +.tech { + width: 280px; + height: 300px; + background: var(--color-white); + border-radius: 18px; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 15px 18px; + margin: 20px; + box-shadow: 0 4px 3px rgba(0, 0, 0, 0.2); +} + +.tech i { + font-size: 65px; + margin-bottom: 20px; +} + +.tech h2 { + font-family: "Pacifico"; + text-transform: uppercase; + margin-bottom: 10px; +} + +.tech p { + font-family: "Open Sans"; + font-size: 14px; +} + +.tech-container { + display: flex; + justify-content: space-around; + align-items: center; + flex-wrap: wrap; +} + +.more-info-container { + padding: var(--padding-desktop); + display: flex; + justify-content: space-between; + align-items: center; +} + +.mi-container { + width: 45%; + text-align: center; +} + +.mi-container h1 { + font-size: 48px; + font-family: "Pacifico"; +} + +.mi-container h1 span { + color: var(--color-green); +} + +.mi-container p { + font-family: "Open Sans"; +} + +@keyframes morphBorder { + + 0%, + 100% { + border-radius: 70% 30% 41% 59% / 47% 73% 27% 53%; + } + + 34% { + border-radius: 70% 30% 41% 59% / 29% 45% 55% 71%; + } + + 60% { + border-radius: 55% 45% 56% 44% / 57% 23% 77% 43%; + } + + 80% { + border-radius: 55% 45% 39% 61% / 25% 50% 50% 75%; + } +} + +.img-blob-container { + width: 52%; + height: 400px; + background: var(--color-green); + border-radius: 31% 69% 41% 59% / 34% 62% 38% 66%; + box-shadow: var(--box-shadow-green); + animation: 3s linear morphBorder infinite; + background-size: contain; + background-position: left; + background: url("../../../public/pic2.jpg"); + margin-bottom: 20px; + background-repeat: no-repeat; +} + +.main-testimonial-container { + background: var(--color-green); + padding: var(--padding-desktop); + position: relative; + top: -10px; +} + +.main-testimonial-container h1 { + color: var(--color-white); + font-family: "Roboto"; + text-transform: uppercase; + margin-bottom: 30px; + font-size: 35px; +} + +.testimonial-container { + display: flex; + justify-content: space-evenly; + align-items: center; + padding-bottom: 30px; +} + +.testimonial { + width: 50%; + min-width: 500px; + height: max-content; + background: var(--color-white); + padding: 10px 20px; + border-radius: 8px; + margin-bottom: 20px; + display: flex; + justify-content: space-around; + align-items: flex-start; +} + +.user-info { + display: flex; + justify-content: space-around; + align-items: left; + flex-direction: column; + margin-right: 20px; +} + +.user-info img { + width: 100px; + height: 100px; + border-radius: 15px; + margin-bottom: 20px; +} + +.user-info h2 { + font-family: "Pacifico"; + text-transform: uppercase; +} + +.info { + font-family: "Open Sans"; +} + +.testimonial-2 { + min-width: 26%; + height: max-content; + background: var(--color-white); + padding: 10px 20px; + border-radius: 8px; + margin: 20px; + position: relative; + top: -10px; +} + +.testimonial-2 .user-info { + flex-direction: row; +} + +.data-container { + background: rgba(0, 0, 0, 0.3); + position: fixed; + width: 100%; + height: 100vh; + top: 0; + left: 0; + display: flex; + justify-content: center; + align-items: center; + z-index: 7; +} + +.auth-form { + background: var(--color-white); + height: max-content; + box-shadow: var(--box-shadow-black); + border-radius: 15px; + display: flex; + justify-content: left; + align-items: center; + flex-direction: column; + padding: 15px 40px; + width: 300px; + font-family: "Roboto"; + position: relative; + z-index: 7; +} + +.auth-form input { + padding: 6px 10px; + background: var(--color-slate-accent); + border: none; + border-radius: 5px; + margin: 10px 0px; + width: 80%; + font-family: "Roboto"; + margin-right: 20%; +} + +.auth-form textarea { + padding: 6px 10px; + background: var(--color-slate-accent); + border: none; + border-radius: 5px; + margin: 10px 0px; + height: 100px; + width: 100%; + font-family: "Roboto"; +} + +.auth-form p { + color: var(--color-red); + font-family: "Roboto"; + margin: 8px 0px; +} + +.filled-btn { + padding: 14px 20px; + border-radius: 5px; + border: none; + background: var(--color-green); + box-shadow: var(--box-shadow-green); + color: var(--color-white); + font-family: "Roboto"; + text-transform: uppercase; + font-weight: 700; + width: 80%; +} + +.not-filled-btn { + padding: 14px 20px; + border-radius: 5px; + border: none; + background: var(--color-red); + box-shadow: var(--box-shadow-red); + color: var(--color-white); + font-family: "Roboto"; + text-transform: uppercase; + font-weight: 700; + width: 80%; +} + +.form-container { + border: 2px solid var(--color-blue); + border-style: dashed; + border-radius: 15px; + width: 100%; + min-height: 60px; + margin: 25px 0; + display: flex; + justify-content: center; + align-items: center; + transition: 0.3s; + flex-direction: column; + padding: 12px 0; +} + +.form-container-active { + border: 2px solid var(--color-green); + border-radius: 15px; + width: 100%; + min-height: 60px; + margin: 25px 0; + display: flex; + justify-content: center; + align-items: center; + transition: 0.3s; + flex-direction: column; + padding: 12px 0px; +} + +.form-container input { + width: 40%; + position: relative; + margin: auto auto; +} + +.form-container-active input { + width: 40%; + position: relative; + margin: auto auto; +} + +.form-container, +.form-container-active h3 { + font-family: "Open Sans"; +} + +.x-close-btn { + width: 30px; + height: 30px; + background: var(--color-red); + color: var(--color-white); + border-radius: 50%; + box-shadow: var(--box-shadow-red); + position: absolute; + right: 10px; + top: 3px; + font-size: 15px; + display: flex; + justify-content: center; + align-items: center; + transform: rotate(45deg); +} + +@media (max-width: 750px) { + .main_container { + /* padding: 40px 25px;*/ + } + + .main_info_container { + display: block; + padding: var(--padding-mobile); + } + + .techstack-container { + padding: var(--padding-mobile); + } + + .more-info-container { + padding: var(--padding-desktop); + } + + .info_container { + margin-bottom: 30px; + } + + .info_container, + .img-container, + .img-blob-container, + .mi-container { + width: 100%; + } + + .tech-container { + flex-direction: column; + flex-wrap: nowrap; + } + + .more-info-container { + flex-direction: column; + padding: var(--padding-mobile); + } + + .testimonial-container { + flex-direction: column; + justify-content: center; + padding: var(--padding-mobile); + } + + .testimonial, + .testimonial-2 { + min-width: 260px; + height: 300px; + border-radius: 15px; + margin: 0; + margin-bottom: 30px; + margin-right: -8px; + } + + .testimonial-2 { + left: -5px; + } + + .testimonial { + flex-direction: column; + } + + .user-info { + width: 100%; + justify-content: space-between; + flex-direction: row; + } + + .auth-form { + width: 300px; + padding: 20px 18px; + } + + .form-container-active, + .form-container h3 { + font-size: 10px; + } +} diff --git a/tauri-app/src/pages/Home/index.tsx b/tauri-app/src/pages/Home/index.tsx new file mode 100644 index 0000000..467bf42 --- /dev/null +++ b/tauri-app/src/pages/Home/index.tsx @@ -0,0 +1,226 @@ +import "./index.css"; +import { useProfile } from "@/stores/profile"; +import SignUpForm from "./SignUpForm"; +import AuthGuard from "@/components/Auth/Guard"; +import { Link } from "react-router-dom"; + +export default function HomePage() { + const showAuthModal = useProfile((state) => state.showAuthModal); + + return ( + <div className="main_container"> + <div className="main_info_container"> + <div className="info_container"> + <b id="header"> + Hi welcome to, + <b> + pulse<span>Pal</span> + </b> + </b> + <h1>Stay up & running while connected</h1> + <p> + Welcome to PulsePal, your health guardian in WEB5. Safely store + medical records with decentralized identifiers and web nodes, + ensuring data security. Connect with similar conditions, share home + remedies with a rating system, and access specialized doctors based + on your location. PulsePal – where advanced technology meets + user-friendly design for your secure, connected health journey. + </p> + <button className="gs_btn"> + Get Started! <i className="fa fa-fire"></i> + </button> + </div> + <div className="img-container"></div> + </div> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"> + <path + fill="#0ea5e9" + fill-opacity="1" + d="M0,96L21.8,106.7C43.6,117,87,139,131,170.7C174.5,203,218,245,262,250.7C305.5,256,349,224,393,197.3C436.4,171,480,149,524,149.3C567.3,149,611,171,655,154.7C698.2,139,742,85,785,101.3C829.1,117,873,203,916,240C960,277,1004,267,1047,240C1090.9,213,1135,171,1178,170.7C1221.8,171,1265,213,1309,208C1352.7,203,1396,149,1418,122.7L1440,96L1440,320L1418.2,320C1396.4,320,1353,320,1309,320C1265.5,320,1222,320,1178,320C1134.5,320,1091,320,1047,320C1003.6,320,960,320,916,320C872.7,320,829,320,785,320C741.8,320,698,320,655,320C610.9,320,567,320,524,320C480,320,436,320,393,320C349.1,320,305,320,262,320C218.2,320,175,320,131,320C87.3,320,44,320,22,320L0,320Z" + ></path> + </svg> + <div className="techstack-container"> + <h1>Major Technologies</h1> + <div className="tech-container"> + <div className="tech"> + <i className="fab fa-hive"></i> + <h2>WEB5</h2> + <p> + PulsePal utililizes WEB5 to ensure the immutability of user data + stored making it a breeze to safely store medical data and + records. + </p> + </div> + <div className="tech"> + <i className="fa-solid fa-robot"></i> + <h2>A.I</h2> + <p> + PulsePal uses artificial intelligence to aid users with similiar + medical conditions, find matches who can relate with them and also + find doctors/specialist within there regions on such condition. + </p> + </div> + <div className="tech"> + <i className="fa-brands fa-react"></i> + <h2>React</h2> + <p> + PulsePal employes react a frontend framework to power our frontend + along with typescript enabling better user experience and smoother + and faster development,updates and feature roll outs giving + quality product delivery. + </p> + </div> + </div> + </div> + <svg + id="b-wave-1" + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 1440 320" + > + <path + fill="#0ea5e9" + fill-opacity="1" + d="M0,64L24,96C48,128,96,192,144,224C192,256,240,256,288,261.3C336,267,384,277,432,234.7C480,192,528,96,576,69.3C624,43,672,85,720,85.3C768,85,816,43,864,58.7C912,75,960,149,1008,160C1056,171,1104,117,1152,128C1200,139,1248,213,1296,250.7C1344,288,1392,288,1416,288L1440,288L1440,0L1416,0C1392,0,1344,0,1296,0C1248,0,1200,0,1152,0C1104,0,1056,0,1008,0C960,0,912,0,864,0C816,0,768,0,720,0C672,0,624,0,576,0C528,0,480,0,432,0C384,0,336,0,288,0C240,0,192,0,144,0C96,0,48,0,24,0L0,0Z" + ></path> + </svg> + <div className="more-info-container"> + <div className="img-blob-container"></div> + <div className="mi-container"> + <h1> + "Our <span>Culture</span>" + </h1> + <p> + A culture where innovation and empathy converge to create impactful + solutions. Team members are driven by a shared commitment to + improving healthcare outcomes through cutting-edge technology. + </p> + </div> + </div> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"> + <path + fill="#22c55e" + fill-opacity="1" + d="M0,192L18.5,170.7C36.9,149,74,107,111,122.7C147.7,139,185,213,222,245.3C258.5,277,295,267,332,245.3C369.2,224,406,192,443,160C480,128,517,96,554,69.3C590.8,43,628,21,665,48C701.5,75,738,149,775,186.7C812.3,224,849,224,886,218.7C923.1,213,960,203,997,165.3C1033.8,128,1071,64,1108,32C1144.6,0,1182,0,1218,26.7C1255.4,53,1292,107,1329,128C1366.2,149,1403,139,1422,133.3L1440,128L1440,320L1421.5,320C1403.1,320,1366,320,1329,320C1292.3,320,1255,320,1218,320C1181.5,320,1145,320,1108,320C1070.8,320,1034,320,997,320C960,320,923,320,886,320C849.2,320,812,320,775,320C738.5,320,702,320,665,320C627.7,320,591,320,554,320C516.9,320,480,320,443,320C406.2,320,369,320,332,320C295.4,320,258,320,222,320C184.6,320,148,320,111,320C73.8,320,37,320,18,320L0,320Z" + ></path> + </svg> + <div className="main-testimonial-container"> + <h1>Testimonials</h1> + <div className="testimonial-container"> + <div className="t-container-1"> + <div className="testimonial"> + <div className="user-info"> + <img src="/pic.jpg" /> + <h2>Dave</h2> + </div> + <div className="info"> + <p> + <b>PulsePal</b> has being awesome so far making it a breeze to + keep track of my medical history coupled with guidance have + made staying healthy so much more accessible. The + user-friendly interface and helpful <b>home remedies</b> keep + me on prepared for emergency breakouts. <b>Thank you</b> + </p> + </div> + </div> + <div className="testimonial"> + <div className="user-info"> + <img src="/pm.jpg" /> + <h2>Greg</h2> + </div> + <div className="info"> + <p> + Knowing that <b>blockchain</b> is being used and it's + immutaility makes feel safer from losing such vital records + and there + <b>chat functionality</b> is quite great feel's nice to know + others with the same condition as me.<b>Great job</b> + </p> + </div> + </div> + </div> + <div className="testimonial-2"> + <div className="user-info"> + <img src="/pg.jpg" /> + <h2>Nikki</h2> + </div> + <div className="info"> + <p> + Using it for quite a while now and it had being nice especially + a <b>beta</b> feature,i heard it can find out what is wrong with + your just from your + <b>finger print</b> it is cool can't wait for the roll out,talk + about <b>a.i in action</b> + </p> + </div> + </div> + </div> + </div> + <svg + id="b-wave-1" + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 1440 320" + > + <path + fill="#22c55e" + fill-opacity="1" + d="M0,128L10,154.7C20,181,40,235,60,240C80,245,100,203,120,160C140,117,160,75,180,69.3C200,64,220,96,240,133.3C260,171,280,213,300,218.7C320,224,340,192,360,202.7C380,213,400,267,420,256C440,245,460,171,480,122.7C500,75,520,53,540,48C560,43,580,53,600,96C620,139,640,213,660,229.3C680,245,700,203,720,176C740,149,760,139,780,117.3C800,96,820,64,840,69.3C860,75,880,117,900,149.3C920,181,940,203,960,208C980,213,1000,203,1020,170.7C1040,139,1060,85,1080,53.3C1100,21,1120,11,1140,42.7C1160,75,1180,149,1200,192C1220,235,1240,245,1260,229.3C1280,213,1300,171,1320,149.3C1340,128,1360,128,1380,128C1400,128,1420,128,1430,128L1440,128L1440,0L1430,0C1420,0,1400,0,1380,0C1360,0,1340,0,1320,0C1300,0,1280,0,1260,0C1240,0,1220,0,1200,0C1180,0,1160,0,1140,0C1120,0,1100,0,1080,0C1060,0,1040,0,1020,0C1000,0,980,0,960,0C940,0,920,0,900,0C880,0,860,0,840,0C820,0,800,0,780,0C760,0,740,0,720,0C700,0,680,0,660,0C640,0,620,0,600,0C580,0,560,0,540,0C520,0,500,0,480,0C460,0,440,0,420,0C400,0,380,0,360,0C340,0,320,0,300,0C280,0,260,0,240,0C220,0,200,0,180,0C160,0,140,0,120,0C100,0,80,0,60,0C40,0,20,0,10,0L0,0Z" + ></path> + </svg> + <div + className="techstack-container" + style={{ + background: "var(--color-white)", + }} + > + <h1 style={{ color: "var(--color-black)" }}>Major Features</h1> + <div className="tech-container"> + <div className="tech"> + <i className="fa-solid fa-lock"></i> + <h2>Secure Storage</h2> + <p> + Medical records are stored with the utmost security using WEB5, + guaranteeing data integrity and user control over their personal + health information. + </p> + </div> + <div className="tech"> + <i className="fa fa-users"></i> + <h2>Find Your Tribe</h2> + <p> + Our platform goes beyond conventional networking by employing a + sophisticated algorithm to match users based on their medical + records. PulsePal becomes a virtual community where individuals + can share experiences, insights, and support each other on their + health journeys. + </p> + </div> + <div className="tech"> + <i className="fa fa-medkit"></i> + <h2>Home Remedies</h2> + <p> + PulsePal empowers users to contribute and share simple yet + effective home remedies. A user-driven rating system ensures the + most beneficial remedies rise to the top, creating a + community-driven repository of wellness solutions. + </p> + </div> + <div className="tech"> + <i className="fas fa-user-md"></i> + <h2>Find Specialist</h2> + <p> + Wherever you are, PulsePal provides a seamless experience by + recommending specialized doctors in your nearby areas based on + your current location, enhancing accessibility to healthcare + professionals. + </p> + </div> + </div> + </div> + {showAuthModal && ( + <AuthGuard> + <SignUpForm /> + </AuthGuard> + )} + </div> + ); +} diff --git a/tauri-app/src/pages/Records/index.css b/tauri-app/src/pages/Records/index.css new file mode 100644 index 0000000..8c0bd43 --- /dev/null +++ b/tauri-app/src/pages/Records/index.css @@ -0,0 +1,119 @@ +.main-records-container { + padding: var(--padding-desktop); +} + +.records-header { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; +} + +.records-header h1 { + font-family: "Pacifico"; + font-size: 45px; +} + +.add-records-btn { + width: 60px; + height: 60px; + background: var(--color-blue); + font-size: 34px; + color: var(--color-white); + box-shadow: var(--box-shadow-blue); + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; + cursor: pointer; + z-index: 7; +} + +.close-add-records-btn { + width: 60px; + height: 60px; + background: var(--color-red); + font-size: 34px; + color: var(--color-white); + box-shadow: var(--box-shadow-red); + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; + cursor: pointer; + z-index: 7; + transform: rotate(45deg); + transition: 0.3s; +} + +.cards-container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; +} + +.add-card-container { + background: rgba(0, 0, 0, 0.3); + position: fixed; + width: 100%; + height: 100vh; + top: 0; + left: 0; + display: flex; + justify-content: center; + align-items: center; + z-index: 6; +} + +.component-container { + position: relative; +} + +.no-records { + font-family: "Open Sans"; +} + +.connect-wallet-container { + width: 300px; + background: var(--color-white); + border-radius: 15px; + padding: 18px 8px; + text-align: center; +} + +.connect-wallet-container h1 { + font-family: "Roboto"; + font-size: 25px; + margin-top: 30px; + color: var(--color-red); + margin: auto auto; +} + +@media (max-width: 750px) { + .main-records-container { + padding: var(--padding-mobile); + } + + .add-records-btn { + position: fixed; + bottom: 140px; + right: 30px; + } + + .close-add-records-btn { + position: fixed; + bottom: 140px; + right: 30px; + } + + .cards-container { + flex-direction: column; + justify-content: center; + flex-wrap: nowrap; + } + + .records-header h1 { + font-size: 35px; + } +} diff --git a/tauri-app/src/pages/Records/index.tsx b/tauri-app/src/pages/Records/index.tsx new file mode 100644 index 0000000..3ef81dd --- /dev/null +++ b/tauri-app/src/pages/Records/index.tsx @@ -0,0 +1,135 @@ +import "./index.css"; +import { useEffect, useState } from "react"; +import { format } from "date-fns"; + +import AddCardComponent from "../../components/AddCardComponent"; +import DetailCardComponent from "../../components/DetailCardComponent"; + +import Card from "../../components/Card"; +import { useProfile } from "@/stores/profile"; +import useWeb5Store from "@/stores/useWeb5Store"; +import { CardData, fetchRecords } from "./utils"; +import toast, { Toaster } from "react-hot-toast"; + +const index = () => { + const agent = useWeb5Store((state) => ({ + web5: state.web5!, + did: state.did!, + })); + const profile = useProfile((state) => state.state.profile!); + const isSignedIn = useProfile((state) => state.state.isSignedIn); + + const [showConnectWalletComponent, setShowConnectWalletComponent] = + useState<boolean>(false); + const [cardsData, setCardsData] = useState<CardData[]>([]); + + useEffect(() => { + refetchRecords(); + }, []); + + const refetchRecords = async () => { + const records = await fetchRecords(agent, profile); + console.log("records:", records); + + if (!records) return; + + setCardsData(records); + + return; + }; + + const [isAddCardActive, setIsAddCardActive] = useState(false); + const [isCardDetailActive, setIsCardDetailActive] = useState(false); + const [activeCard, setActiveCard] = useState(null); + + const SignedInCheck = () => { + if (isSignedIn) { + setIsAddCardActive(!isAddCardActive); + } else { + setShowConnectWalletComponent(true); + } + }; + // @ts-ignore + const isCardClicked = (cardDetail) => { + setIsCardDetailActive(!isCardDetailActive); + setIsAddCardActive(false); + setActiveCard(cardDetail); + }; + + return ( + <div className="main-records-container"> + <div className="records-header"> + <h1>Records</h1> + <div + className={ + !isAddCardActive ? "add-records-btn" : "close-add-records-btn" + } + onClick={() => SignedInCheck()} + > + <i className="fa fa-plus" /> + </div> + </div> + <div className="cards-container"> + {cardsData.length > 0 ? ( + cardsData.map((card) => { + return ( + <Card + file_name={card.file.name} + file_extension={card.file.type.split("/")[1]} + title={card.title} + date={format(new Date(card.dateCreated), "dd/MM/yyyy")} + desc={card.description} + cardUtils={[card, isCardClicked]} + /> + ); + }) + ) : ( + <div className="no-records">No Records Found</div> + )} + </div> + {(isAddCardActive || isCardDetailActive) && ( + <div + className="add-card-container" + style={{ zIndex: `${isCardDetailActive ? "7" : "6"}` }} + > + <div className="component-container"> + {isAddCardActive && ( + <AddCardComponent + profile={profile} + agent={agent} + onClose={() => { + setIsAddCardActive(false); + refetchRecords(); + }} + /> + )} + {isCardDetailActive && ( + <DetailCardComponent + // @ts-ignore + cardData={activeCard} + close={setIsCardDetailActive} + /> + )} + </div> + </div> + )} + {showConnectWalletComponent && ( + <div + onClick={() => setShowConnectWalletComponent(false)} + className="add-card-container" + > + <div + className="connect-wallet-container" + onClick={(e) => { + e.stopPropagation(); + }} + > + <h1>Unauthorized - Please Sign in</h1> + </div> + </div> + )} + </div> + ); +}; + +export default index; diff --git a/tauri-app/src/pages/Records/utils.tsx b/tauri-app/src/pages/Records/utils.tsx new file mode 100644 index 0000000..852ceac --- /dev/null +++ b/tauri-app/src/pages/Records/utils.tsx @@ -0,0 +1,57 @@ +import { Agent } from "@/components/Auth/types" +import { ProfileState } from "@/stores/profile" +import { Record as DocumentRecord } from "@/utils/protocols/document"; +import DocumentUtils from "@/utils/document" +import BlobUtils from "@/utils/blob"; + +export const fetchRecords = async (agent: Agent, profile: ProfileState) => { + const records = await DocumentUtils.fetchDocumentRecords(agent) + if (!records) return false + + const profileRecords = [] + for (const record of records) { + const data: DocumentRecord.Document = await record.data.json() + const fileRecord = await BlobUtils.fetchBlobRecord(agent, { recordId: data.file.id }) + if (!fileRecord) continue + const fileData = await fileRecord.data.blob() + + const otherFilesProcessing = await Promise.all(data.otherFiles.map(async file => { + const record = await BlobUtils.fetchBlobRecord(agent, { recordId: file.id }) + if (!record) return false + + const data = await record.data.blob() + return { + name: file.name, + type: file.type, + url: URL.createObjectURL( + new File([data], file.name, { type: file.type }) + ) + } + })) + + if (otherFilesProcessing.includes(false)) continue + + const otherFiles = otherFilesProcessing as Exclude<typeof otherFilesProcessing[number], false>[] + + console.log(data.profileId) + console.log(data.profileId === profile.id) + if (data.profileId === profile.id) { + profileRecords.push({ + title: data.title, + description: data.description, + dateCreated: data.dateCreated, + file: { + name: data.file.name, + type: data.file.type, + url: URL.createObjectURL( + new File([fileData], data.file.name, { type: data.file.type }) + ) + }, + otherFiles + }) + } + } + return profileRecords +} + +export type CardData = Exclude<Awaited<ReturnType<typeof fetchRecords>>, false>[0] diff --git a/tauri-app/src/pages/Remedies/index.css b/tauri-app/src/pages/Remedies/index.css new file mode 100644 index 0000000..cffe86d --- /dev/null +++ b/tauri-app/src/pages/Remedies/index.css @@ -0,0 +1,260 @@ +.main-remedies-container { + padding: var(--padding-desktop); +} + +.main-remedy-cards-container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; +} + +.records-header { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; +} + +.records-header h1 { + font-family: "Pacifico"; + font-size: 45px; +} + +.add-records-btn { + width: 60px; + height: 60px; + background: var(--color-blue); + font-size: 34px; + color: var(--color-white); + box-shadow: var(--box-shadow-blue); + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; + cursor: pointer; + z-index: 8; +} + +.close-add-records-btn { + width: 60px; + height: 60px; + background: var(--color-red); + font-size: 34px; + color: var(--color-white); + box-shadow: var(--box-shadow-red); + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; + cursor: pointer; + z-index: 8; + transform: rotate(45deg); + transition: 0.3s; +} + +.main-remedies-container h1 { + font-family: "Pacifico"; + font-size: 45px; +} + +.view-card-detail-container { + background: rgba(0, 0, 0, 0.3); + position: fixed; + width: 100%; + height: 100vh; + top: 0; + left: 0; + display: flex; + justify-content: center; + align-items: center; + z-index: 6; + margin-top: 40px; +} + +.active-remedy-container { + width: 500px; + min-height: 400px; + background: var(--color-white); + border-radius: 15px; + padding: 25px 20px; + position: relative; +} + +.active-remedy-container h1 { + font-family: "Roboto"; + font-weight: 400; + font-size: 30px; + margin: 10px 0px; +} + +.active-remedy-container p { + font-family: "Open Sans"; + margin: 20px 0px; +} + +.rimg-container { + width: 100%; + height: 300px; + border-radius: 15px; + position: relative; +} + +.r-close-btn { + width: 40px; + height: 40px; + background: var(--color-red); + color: var(--color-white); + border-radius: 50%; + box-shadow: var(--box-shadow-red); + position: absolute; + right: 30px; + top: 20px; + font-size: 20px; + display: flex; + justify-content: center; + align-items: center; + transform: rotate(45deg); +} + +.report-btn { + background: var(--color-red); + color: var(--color-white); + border-radius: 20px; + box-shadow: var(--box-shadow-red); + position: absolute; + right: 80px; + top: 20px; + display: flex; + justify-content: space-between; + align-items: center; + font-family: "Roboto"; + padding: 8px 15px; + text-transform: uppercase; +} + +.report-btn i { + font-size: 25px; + margin-left: 10px; +} + +.remedy-main-info-container { + max-height: 200px; + overflow-y: scroll; + padding: 5px; + border-radius: 5px; + background: var(--color-white-accent); +} + +.remedy-main-info-container::-webkit-scrollbar { + width: 6px; +} + +.remedy-main-info-container::-webkit-scrollbar-track { + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); + border-radius: 5px; +} + +.remedy-main-info-container::-webkit-scrollbar-thumb { + width: 2px; + background: var(--color-blue); + border-radius: 5px; + margin: 0 3px; +} + +.remedy-main-info-container h3 { + font-family: "Roboto"; +} + +.remedy-main-info-container p { + font-family: "Open Sans"; + margin-left: 30px; +} + +.rd-container { + color: var(--color-white); + font-family: "Pacifico"; + font-size: 25px; + position: absolute; + bottom: 10px; + left: 20px; +} + +.rd-container i { + margin-left: 8px; +} + +.add-remedy-container { + background: rgba(0, 0, 0, 0.3); + position: fixed; + width: 100%; + height: 100vh; + top: 0; + left: 0; + display: flex; + justify-content: center; + align-items: center; +} + +@media (max-width: 750px) { + .main-remedies-container { + padding: var(--padding-mobile); + } + + .main-remedies-container h1 { + font-size: 35px; + } + + .main-remedy-cards-container { + flex: nowrap; + flex-direction: column; + } + + .active-remedy-container { + width: 91%; + height: 70%; + margin-top: 20px; + padding: 15px 10px; + } + + .rimg-container { + height: 180px; + } + + .remedy-main-info-container { + height: 180px; + overflow-y: scroll; + padding: 5px; + } + + .report-btn, + .r-close-btn { + top: 10px; + transform: translateX(15px); + } + + .r-close-btn { + transform: rotate(45deg); + right: 10px; + } + + .rd-container i { + margin-left: 4px; + } + + .add-records-btn { + position: fixed; + bottom: 140px; + right: 30px; + } + + .close-add-records-btn { + position: fixed; + bottom: 140px; + right: 30px; + } + + .records-header h1 { + font-size: 35px; + } +} diff --git a/tauri-app/src/pages/Remedies/index.tsx b/tauri-app/src/pages/Remedies/index.tsx new file mode 100644 index 0000000..f70582a --- /dev/null +++ b/tauri-app/src/pages/Remedies/index.tsx @@ -0,0 +1,240 @@ +import "./index.css"; +import { useState } from "react"; +import { useProfile } from "@/stores/profile"; + +import Ratings from "../../components/Ratings"; +import RemedyCard from "../../components/RemedyCard/"; +import AddRemedyComponent from "../../components/AddRemedyComponent/"; +import Remedy from "../remedy"; +//@ts-ignore +const index = ({ save, formFunc, form, remediesData, docsWithImageUrls }) => { + const [remedies, setRemedies] = useState([ + { + name: "Lavendar Scalp Treament", + description: + "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat...", + desc: "Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.", + useUrl: "/pg.jpg", + rating: "1.5", + created_by: "draky", + // steps: [ + // { + // name: "Clean Scalp Throughly", + // desc: "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.", + // }, + // { + // name: "Apply Anti-Flammtory Cream", + // desc: "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.", + // }, + // ], + }, + { + name: "Aloe Vera Eczema Fix", + description: + "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat...", + useUrl: "/pg.jpg", + rating: "4", + created_by: "dave", + }, + { + name: "Asthma Breathing Exercises", + description: + "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat...", + useUrl: "/pg.jpg", + rating: "3.5", + created_by: "nikki", + }, + ]); + + const isSignedIn = useProfile((state) => state.state.isSignedIn); + const [showConnectWalletComponent, setShowConnectWalletComponent] = + useState<boolean>(false); + + const [isDetailRemedyActive, setIsDetailRemedyActive] = useState(false); + const [activeRemedy, setActiveRemedy] = useState(null); + + const url = ""; + // @ts-ignore + const remedyClicked = (remedyDetail) => { + setActiveRemedy(remedyDetail); + setIsDetailRemedyActive(true); + }; + + // const [url,setUrl] = useState<string>(''); + + // //@ts-ignore + // const getUrl = (url) => { + // setUrl(url); + // } + + const [isRated, setIsRated] = useState(false); + const Rate = () => { + if (!isRated) { + setActiveRemedy({ + // @ts-ignore + ...activeRemedy, + // @ts-ignore + rating: activeRemedy.rating + 1, + }); + } else { + setActiveRemedy({ + // @ts-ignore + ...activeRemedy, + // @ts-ignore + rating: activeRemedy.rating - 1, + }); + } + setIsRated(!isRated); + }; + + const [isAddRemedyActive, setIsAddRemedyActive] = useState(false); + const SignedInCheck = () => { + if (isSignedIn) { + setIsAddRemedyActive(!isAddRemedyActive); + } else { + setShowConnectWalletComponent(true); + } + }; + + return ( + <div className="main-remedies-container"> + <div className="records-header"> + <h1>Get a quick Fix!</h1> + <div + className={ + !isAddRemedyActive ? "add-records-btn" : "close-add-records-btn" + } + onClick={() => SignedInCheck()} + > + <i className="fa fa-plus"></i> + </div> + </div> + + <div className="main-remedy-cards-container"> + {/* Dummy Remedy */} + {remedies.map((remedy) => { + return ( + <RemedyCard + name={remedy.name} + description={remedy.description} + useUrl={remedy.useUrl} + created_by={remedy.created_by} + isClicked={[remedy, remedyClicked]} + rating={remedy.rating} + /> + ); + })} + + {/* Remedy Created by user */} + { + //@ts-ignore + docsWithImageUrls.map(({ document, url }) => { + return ( + <RemedyCard + name={document.data.name} + description={document.data.description} + useUrl={document.data.useUrl} + created_by={document.data.created_by} + //@ts-ignore + isClicked={[document.data, remedyClicked]} + rating={document.data.rating} + /> + ); + }) + } + </div> + {isDetailRemedyActive && ( + <div className="view-card-detail-container"> + <div className="active-remedy-container"> + <div + className="rimg-container" + style={{ + // @ts-ignore + background: `url(${activeRemedy.useUrl})`, + backgroundPosition: "center", + backgroundSize: "cover", + }} + > + <div + className="r-close-btn" + onClick={() => { + setIsDetailRemedyActive(false); + setActiveRemedy(null); + }} + > + <i className="fa fa-plus"></i> + </div> + <div + className="report-btn" + onClick={() => { + alert("Report Sent!!"); + }} + > + <h3>Report</h3> + <i className="fa-solid fa-circle-exclamation"></i> + </div> + + <div onClick={() => Rate()} className="rd-container"> + { + // @ts-ignore + activeRemedy.rating + } + <i + style={{ opacity: `${isRated ? "1" : "0.5"}` }} + className="fa fa-leaf" + ></i> + </div> + </div> + <h1> + { + // @ts-ignore + activeRemedy.name + }{" "} + </h1> + + <div className="remedy-main-info-container"> + <p style={{ marginLeft: "0px" }}> + { + // @ts-ignore + activeRemedy.description + } + </p> + </div> + </div> + </div> + )} + + {isAddRemedyActive && ( + <div + className="add-remedy-container" + style={{ zIndex: `${isAddRemedyActive ? "5" : "5"}` }} + > + <AddRemedyComponent + //@ts-ignore + saveFunc={save} + formFunc={formFunc} + form={form} + /> + </div> + )} + + {showConnectWalletComponent && ( + <div + onClick={() => setShowConnectWalletComponent(false)} + className="add-remedy-container" + > + <div + className="connect-wallet-container" + onClick={(e) => { + e.stopPropagation(); + }} + > + <h1>Unauthorized - Please Sign in</h1> + </div> + </div> + )} + </div> + ); +}; + +export default index; diff --git a/tauri-app/src/pages/SharedLayout/index.css b/tauri-app/src/pages/SharedLayout/index.css new file mode 100644 index 0000000..b570e86 --- /dev/null +++ b/tauri-app/src/pages/SharedLayout/index.css @@ -0,0 +1,4 @@ +.b-wave-m { + position: relative; + top: 10px; +} diff --git a/tauri-app/src/pages/SharedLayout/index.tsx b/tauri-app/src/pages/SharedLayout/index.tsx new file mode 100644 index 0000000..4cad4e3 --- /dev/null +++ b/tauri-app/src/pages/SharedLayout/index.tsx @@ -0,0 +1,53 @@ +import useWeb5Store from "../../stores/useWeb5Store"; +import { useState, useEffect } from "react"; + +import "./index.css"; +import { Outlet } from "react-router-dom"; +import Navbar from "../../components/Navbar"; +import MobileNavbar from "../../components/MobileNavbar"; +import FootNavbar from "../../components/FootNavbar"; + +const index = () => { + const web5 = useWeb5Store((state) => state.web5); + const connect = useWeb5Store((state) => state.connect); + const did = useWeb5Store((state) => state.did); + + useEffect(() => { + if (!web5) connect(); + }, []); + + const [isMobile, setIsMobile] = useState(false); + + useEffect(() => { + if (window.innerWidth < 750) { + setIsMobile(true); + return; + } + + setIsMobile(false); + }, []); + + return ( + <div> + <Navbar /> + <section> + <Outlet /> + </section> + {isMobile && <MobileNavbar />} + <svg + className="b-wave-m" + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 1440 320" + > + <path + fill="#000" + fill-opacity="1" + d="M0,64L8.6,74.7C17.1,85,34,107,51,133.3C68.6,160,86,192,103,197.3C120,203,137,181,154,165.3C171.4,149,189,139,206,133.3C222.9,128,240,128,257,122.7C274.3,117,291,107,309,122.7C325.7,139,343,181,360,208C377.1,235,394,245,411,218.7C428.6,192,446,128,463,96C480,64,497,64,514,58.7C531.4,53,549,43,566,58.7C582.9,75,600,117,617,160C634.3,203,651,245,669,250.7C685.7,256,703,224,720,202.7C737.1,181,754,171,771,154.7C788.6,139,806,117,823,96C840,75,857,53,874,53.3C891.4,53,909,75,926,90.7C942.9,107,960,117,977,128C994.3,139,1011,149,1029,154.7C1045.7,160,1063,160,1080,149.3C1097.1,139,1114,117,1131,133.3C1148.6,149,1166,203,1183,192C1200,181,1217,107,1234,85.3C1251.4,64,1269,96,1286,112C1302.9,128,1320,128,1337,138.7C1354.3,149,1371,171,1389,192C1405.7,213,1423,235,1431,245.3L1440,256L1440,320L1431.4,320C1422.9,320,1406,320,1389,320C1371.4,320,1354,320,1337,320C1320,320,1303,320,1286,320C1268.6,320,1251,320,1234,320C1217.1,320,1200,320,1183,320C1165.7,320,1149,320,1131,320C1114.3,320,1097,320,1080,320C1062.9,320,1046,320,1029,320C1011.4,320,994,320,977,320C960,320,943,320,926,320C908.6,320,891,320,874,320C857.1,320,840,320,823,320C805.7,320,789,320,771,320C754.3,320,737,320,720,320C702.9,320,686,320,669,320C651.4,320,634,320,617,320C600,320,583,320,566,320C548.6,320,531,320,514,320C497.1,320,480,320,463,320C445.7,320,429,320,411,320C394.3,320,377,320,360,320C342.9,320,326,320,309,320C291.4,320,274,320,257,320C240,320,223,320,206,320C188.6,320,171,320,154,320C137.1,320,120,320,103,320C85.7,320,69,320,51,320C34.3,320,17,320,9,320L0,320Z" + ></path> + </svg> + <FootNavbar /> + </div> + ); +}; + +export default index; diff --git a/tauri-app/src/pages/chat.tsx b/tauri-app/src/pages/chat.tsx new file mode 100644 index 0000000..0703ca4 --- /dev/null +++ b/tauri-app/src/pages/chat.tsx @@ -0,0 +1,235 @@ +// Import necessary libraries and modules +import React, { useEffect } from 'react'; +import { Web5 } from "@web5/api/browser"; +import { dingerProtocolDefinition } from '@/stores/useWeb5Store'; +import Chat from '../components/Chat'; + +// Define your dingerProtocolDefinition object + +const ChatConnect: React.FC = () => { + useEffect(() => { + const initDinger = async () => { + const copyDidElement = document.querySelector('#copy-did'); + const dingForm = document.querySelector('#ding-form'); + const dingErrorElement = document.querySelector('#ding-error'); + const dingProgressElement = document.querySelector('#ding-progress'); + const dingedList = document.querySelector('#dinged-list'); + const dingedByList = document.querySelector('#dinged-by-list'); + + const { web5, did: myDid } = await Web5.connect(); + await configureProtocol(web5); + + setInterval(async () => { + await renderDings(web5, myDid, dingedList, dingedByList); + }, 2000); + + //@ts-ignore + copyDidElement.addEventListener('click', async () => { + try { + await navigator.clipboard.writeText(myDid); + } catch (err) { + //@ts-ignore + alert('Failed to copy DID: ', err); + } + }); + + //@ts-ignore + dingForm.addEventListener('submit', async (event) => { + // ... (your existing form submission logic) + event.preventDefault(); + +//@ts-ignore + dingErrorElement.textContent = ''; + //@ts-ignore + dingProgressElement.textContent = ''; +//@ts-ignore + const did = document.querySelector('#did').value; + //@ts-ignore + const note = document.querySelector('#note').value; + + if (did.length === 0) { + //@ts-ignore + dingErrorElement.textContent = 'DID required'; + return; + } + + const ding = { dinger: myDid }; + if (note) { + //@ts-ignore + ding.note = note; + } +//@ts-ignore + dingProgressElement.textContent = 'writing ding to local DWN...'; + + try { + const { record, status } = await web5.dwn.records.write({ + data: ding, + message: { + protocol: dingerProtocolDefinition.protocol, + protocolPath: 'ding', + schema: 'ding', + recipient: did + } + }); + + if (status.code !== 202) { + //@ts-ignore + dingErrorElement.textContent = `${status.code} - ${status.detail}`; + return; + } + + const shortenedDid = did.substr(0, 22); + //@ts-ignore + dingProgressElement.textContent = `Ding written! Dinging ${shortenedDid}...`; +//@ts-ignore + const { status: sendStatus } = await record.send(did); + console.log('send status', sendStatus); + + if (sendStatus.code !== 202) { + //@ts-ignore + dingErrorElement.textContent = `${sendStatus.code} - ${sendStatus.detail}`; + return; + } +//@ts-ignore + dingProgressElement.textContent = `Dinged ${shortenedDid}!`; + } catch (e) { + //@ts-ignore + dingErrorElement.textContent = e.message; + return; + } + }); + }; + + initDinger(); + }, []); + + const configureProtocol = async (web5: any) => { + // ... (your existing configureProtocol function) + const { protocols, status } = await web5.dwn.protocols.query({ + message: { + filter: { + protocol: 'https://dinger.app/protocol' + } + } + }); + + if (status.code !== 200) { + alert('Failed to query protocols. check console'); + console.error('Failed to query protocols', status); + + return; + } + + // protocol already exists + if (protocols.length > 0) { + console.log('protocol already exists'); + return; + } + + // create protocol + const { status: configureStatus } = await web5.dwn.protocols.configure({ + message: { + definition: dingerProtocolDefinition + } + }); + + console.log('configure protocol status', configureStatus); + }; + + const renderDings = async (web5: any, myDid: string, dingedList: any, dingedByList: any) => { + // ... (your existing renderDings function) + const { records, status } = await web5.dwn.records.query({ + message: { + filter: { + protocol: dingerProtocolDefinition.protocol + } + } + }); + + if (status.code !== 200) { + alert('Failed to query for dings. check console'); + console.error('Failed to query dings', status); + } + + for (let record of records) { + const recordExists = document.getElementById(record.id); + if (recordExists) { + continue; + } + + const { dinger, note } = await record.data.json(); + if (dinger === myDid) { + const shortenedDid = record.recipient.substr(0, 22); + const formattedDing = `[${new Date(record.dateCreated).toLocaleString()}] ${shortenedDid}... - ${note || ''}`; + + const dingElement = document.createElement('li'); + dingElement.id = record.id; + dingElement.textContent = formattedDing; + + const dingBackButton = document.createElement('button'); + dingBackButton.className = 'ding-back'; + // dingBackButton.textContent = 'Ding agane'; + dingBackButton.dataset.toDing = record.recipient; + + dingBackButton.addEventListener('click', event => { + const didInput = document.querySelector('#did'); + //@ts-ignore + didInput.value = event.target.dataset.toDing; + }); + + dingElement.appendChild(dingBackButton); + dingedList.appendChild(dingElement); + } else { + const shortenedDid = dinger.substr(0, 22); + const formattedDing = `[${new Date(record.dateCreated).toLocaleString()}] ${shortenedDid}... - ${note || ''}`; + + const dingElement = document.createElement('li'); + dingElement.id = record.id; + dingElement.textContent = formattedDing; + + const dingBackButton = document.createElement('button'); + dingBackButton.className = 'ding-back'; + // dingBackButton.textContent = 'Ding Back'; + dingBackButton.dataset.toDing = dinger; + + dingBackButton.addEventListener('click', event => { + const didInput = document.querySelector('#did'); + //@ts-ignore + didInput.value = event.target.dataset.toDing; + }); + + dingElement.appendChild(dingBackButton); + dingedByList.appendChild(dingElement); + } + } + + }; + + return ( + <div> + <Chat/> + {/* <button id="copy-did">Copy your DID</button> + <form id="ding-form"> + <p id="ding-error"></p> + <input type="text" id="did" placeholder="Enter DID" /> + <br /> + <input type="text" id="note" placeholder="Enter note" /> + <br /> + <button type="submit">Send</button> + <span id="ding-progress"></span> + </form> */} + + {/* <h2>You Dinged:</h2> + <ul id="dinged-list"> */} + {/* List items will be added here dynamically */} + {/* </ul> + + <h2>You were Dinged by:</h2> + <ul id="dinged-by-list"> */} + {/* List items will be added here dynamically */} + {/* </ul> */} + </div> + ); +}; + +export default ChatConnect; \ No newline at end of file diff --git a/tauri-app/src/pages/connect.tsx b/tauri-app/src/pages/connect.tsx index 650cec8..d3dcc6b 100644 --- a/tauri-app/src/pages/connect.tsx +++ b/tauri-app/src/pages/connect.tsx @@ -1,9 +1,90 @@ -// import React from "react"; +import useWeb5Store from "@/stores/useWeb5Store"; +import { useState } from "react"; +import { Agent } from "@/components/Auth/types"; +import { Record as UserDetailsProtocolRecord } from "@/utils/protocols/user"; +import UserDetailsUtils from "@/utils/user"; -function Connect (){ - return ( - <div><button>Connect</button></div> - ) +const fetchProfilesWithCondition = async (agent: Agent, condition: string) => { + const profileRecords = await UserDetailsUtils.fetchUserDetailsRecords(agent) + if (!profileRecords) + return [] + + const matchingProfiles = [] + for (const record of profileRecords) { + const profile: UserDetailsProtocolRecord.Details = await record.data.json() + + if (profile.conditions.indexOf(condition) > -1 && profile.did !== agent.did) { + matchingProfiles.push(profile) + } + } + return matchingProfiles +} + +const possibleConditions = [ + "Cancer", + "Diabetes", + "Heart Disease", + "High Blood Pressure", + "High Cholesterol", + "Mental Illness", +] + +function Connect() { + const agent = useWeb5Store((state) => ({ web5: state.web5!, did: state.did! })) + const [similarProfiles, setSimilarProfiles] = useState<UserDetailsProtocolRecord.Details[]>([]) + const [form, setForm] = useState({ condition: possibleConditions[0] }) + + const connectCondition = async () => { + const res = await fetchProfilesWithCondition(agent, form.condition) + console.log(res) + setSimilarProfiles(res) + } + + return ( + <> + <div> + <form onSubmit={(e) => { + e.preventDefault() + connectCondition() + }}> + <div> + <select + required + onChange={(e) => { + setForm({ + ...form, + condition: e.target.value + }) + }}> + {possibleConditions.map((condition) => ( + <option key={condition} value={condition.toLowerCase()}>{condition}</option> + ))} + </select> + </div> + <button type="submit"> + Connect + </button> + </form> + </div> + <div> + <header> + People with similar conditions: + </header> + <div> + {similarProfiles.map((profile, index) => ( + <div key={index}> + <div> + {profile.did} + </div> + <div> + {profile.did} + </div> + </div> + ))} + </div> + </div> + </> + ) } -export default Connect; \ No newline at end of file +export default Connect; diff --git a/tauri-app/src/pages/nearbyDoctor.tsx b/tauri-app/src/pages/nearbyDoctor.tsx new file mode 100644 index 0000000..875f232 --- /dev/null +++ b/tauri-app/src/pages/nearbyDoctor.tsx @@ -0,0 +1,99 @@ +import { FunctionComponent, useEffect, useRef, useState } from "react"; +import useWeb5Store from "@/stores/useWeb5Store"; +import Contact from '@/pages/Contact'; + +const accessToken = "AIzaSyCfqty5e_JIBd-2RrdbB0W5ykv3D4noYNg" + +const Doctors: FunctionComponent = () => { + const { web5 } = useWeb5Store((state) => ({ web5: state.web5!, connect: state.connect })); + const [places, setPlaces] = useState<any[]>([]); + const [lat, setlat] = useState<number>(); + const [long, setlong] = useState<number>(); + + const findHospitals = () => { + if (navigator.geolocation) { + navigator.geolocation.getCurrentPosition((position) => { + const lat = position.coords.latitude + const long = position.coords.longitude + setlat(lat); + setlong(long); + }) + } else { + console.log('Geolocation is not supported') + } + + const fetchData = async () => { + try { + const response = await fetch( + `https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${lat}%2C${long}&radius=1500&keyword=hospital&key=${accessToken}` + ); + + if (!response.ok) { + throw new Error('Network response was not ok'); + } + + const result = await response.json(); + console.log(result.results) + setPlaces(result.results); + } catch (error) { + console.error('Error fetching data:', error); + } + }; + if (web5) { + fetchData() + } + } + // if(navigator.geolocation){ + // navigator.geolocation.getCurrentPosition((position)=>{ + // const lat = position.coords.latitude + // const long = position.coords.longitude + // setlat(lat); + // setlong(long); + // }) + // } else { + // console.log('Geolocation is not supported') + // } + + // useEffect(()=>{ + // const fetchData = async()=>{ + // try { + // const response = await fetch( + // `https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${lat}%2C${long}&radius=1500&keyword=hospital&key=${accessToken}` + // ); + + // if (!response.ok) { + // throw new Error('Network response was not ok'); + // } + + // const result = await response.json(); + // console.log(result.results) + // setPlaces(result.results); + // } catch (error) { + // console.error('Error fetching data:', error); + // } + // }; + // if (web5) { + // fetchData() + // } + // },[web5]) + return ( + <> + <Contact + //@ts-ignore + find={findHospitals} places={places} + /> + {/* <button onClick={findHospitals}>Find Hospitals</button> + {places?.map((place) => ( + <div key={place.place_id}> + <ul> + <li className="font-bold">Name: {place.name}</li> + <li>Address: {place.vicinity}</li> + <li>Rating: {place.rating}</li> + </ul> + </div> + ))} */} + </> + ) +} + +export default Doctors \ No newline at end of file diff --git a/tauri-app/src/pages/remedy.tsx b/tauri-app/src/pages/remedy.tsx index d692825..ac456cf 100644 --- a/tauri-app/src/pages/remedy.tsx +++ b/tauri-app/src/pages/remedy.tsx @@ -1,9 +1,176 @@ -// import React from "react"; +import { FunctionComponent, useEffect, useRef, useState } from "react"; +import useWeb5Store, { schemaOrgProtocolDefinition } from "@/stores/useWeb5Store"; +import { useRemedies } from "@/stores/useRemedy"; +import toast from "react-hot-toast"; +import Remedies from './Remedies'; -function Remedy (){ - return ( - <div><button>Remedy</button></div> - ) +const cards = [ + { + name: "Cancer", + description: "Dangerous..." + }, + { + name: "Cancer", + description: "Dangerous..." + }, + { + name: "Cancer", + description: "Dangerous..." + }, + { + name: "Cancer", + description: "Dangerous..." + } +] + +const Remedy: FunctionComponent = () => { + const { web5, connect } = useWeb5Store((state) => ({ web5: state.web5!, connect: state.connect })); + const { fetchRemedies, remedies, createRemedy, deleteRemedy, updateRemedy, getDocumentFile } = useRemedies(web5) + const [docsWithImageUrls, setDocsWithImageUrls] = useState<{ + document: typeof remedies[0], + url: string + }[]>([]) + + const [form, setForm] = useState<{ + name: string + description: string + created_by: string + doc: File + }>({ + name: "", + description: "", + created_by: "", + doc: new File([], "") + }) + + useEffect(() => { + if (web5) { + fetchRemedies() + } + }, [web5]) + + async function processDocsImage() { + const docsWithImageUrls: { document: typeof remedies[0], url: string }[] = [] + + for (const doc of remedies) { + const file = await getDocumentFile(doc) + let url = "" + if (file) + url = URL.createObjectURL(file) + console.log(url); + doc.data.useUrl=url + docsWithImageUrls.push({ + document: doc, + url + }) + } + + setDocsWithImageUrls(docsWithImageUrls) + } + + useEffect(() => { + processDocsImage() + }, [remedies]) + + const saveRemedy = async () => { + const res = await createRemedy({ name: form.name ? form.name : undefined, description: form.description ? form.description : undefined , file: form.doc, created_by: form.created_by}) + + console.log(res) + if (res) { + toast.success('Successfully created remedy!') + } + else { + toast.error('Failed to create remedy!') + console.error(); + } + } + + console.log(remedies) + + return ( + <> + <Remedies + //@ts-ignore + save={saveRemedy} formFunc={setForm} form={form} remediesData={remedies} docsWithImageUrls={docsWithImageUrls} + /> + {/* <form onSubmit={(e) => { + e.preventDefault() + saveRemedy() + }}> + <div> + <input + type="text" + onChange={(e) => setForm({ ...form, name: e.target.value })} + placeholder="Name" /> + </div> + <div> + <input + type="text" + onChange={(e) => setForm({ ...form, description: e.target.value })} + placeholder="Description" /> + </div> + <div> + <input + type="text" + onChange={(e) => setForm({ ...form, created_by: e.target.value })} + placeholder="Created" /> + </div> + <div> + <input + type="text" + onChange={(e) => setForm({ ...form, rating: e.target.value })} + placeholder="rating" /> + </div> + <div> + <input + type="file" + required + onChange={(e) => { + const fileList = e.target.files + if (!fileList) return + + const file = fileList[0] + if (!file) return + + setForm({ + ...form, + doc: file + }) + }} + placeholder="Document" /> + </div> + <button type="submit"> + Create Remedy + </button> + </form> + <div className="container mx-auto my-8"> + <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"> + {cards.map((card, index) => ( + <div key={index} className="bg-white p-4 rounded-md shadow-md"> + <h5 className="text-xl font-semibold mb-2">{card.name}</h5> + <p className="text-gray-600">{card.description}</p> + </div> + ))} + </div> + </div> + <div className="container mx-auto my-8"> + <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"> + {docsWithImageUrls.map(({document, url}) => ( + <div key={document.id} className="bg-white p-4 rounded-md shadow-md"> + <h5 className="text-xl font-semibold mb-2">{document.data.name}</h5> + <p className="text-gray-600">{document.data.description}</p> + <p className="text-gray-600">{document.data.created_by}</p> + <p className="text-gray-600">{document.data.rating}</p> + <img src={url} alt="txt"/> + <button onClick={()=> deleteRemedy(document)}>Delete</button> + <br/> + <button onClick={()=> updateRemedy(document, {name:'hjk', description: 'hhhj'})}>Edit</button> + </div> + ))} + </div> + </div> */} + </> + ) } -export default Remedy; \ No newline at end of file +export default Remedy diff --git a/tauri-app/src/stores/profile.ts b/tauri-app/src/stores/profile.ts new file mode 100644 index 0000000..9740536 --- /dev/null +++ b/tauri-app/src/stores/profile.ts @@ -0,0 +1,111 @@ +import { create } from "zustand" +import { combine } from "zustand/middleware"; +import { Record as UserDetailsProtocolRecord } from "@/utils/protocols/user"; +import { Agent } from "@/components/Auth/types"; +import UserDetailsUtils, { CreatePayload } from "@/utils/user"; +import BlobUtils from "@/utils/blob"; +import { Record as Web5Record } from "@web5/api/browser" + +export type SignUpPayload = Omit<CreatePayload, "conditions" | "did"> + +export type ProfileState = Omit<UserDetailsProtocolRecord.Details, "profilePictureId"> & +{ + id: string + // username: string + profilePictureUrl: string +} + +type State = { + profile: ProfileState, + isSignedIn: true + record: Web5Record +} | { + profile: null, + record: null, + isSignedIn: false +} + +export const useProfile = create( + combine({ + state: { + profile: null, + isSignedIn: false + } as State, + showAuthModal: false + }, (set, get) => ({ + setShowAuthModal: (showAuthModal: boolean) => { + set({ showAuthModal }) + }, + signOut: () => { + if (get().state.isSignedIn) { + set({ + state: { + isSignedIn: false, + record: null, + profile: null + } + }) + } + }, + signIn: async (agent: Agent) => { + const profileRecord = await UserDetailsUtils.fetchUserDetailsRecord(agent) + if (!profileRecord) return false + + const profile: UserDetailsProtocolRecord.Details = await profileRecord.data.json() + + const profilePicture = await BlobUtils.fetchBlobRecord(agent, { recordId: profile.profilePictureId }) + let profilePictureUrl = "" + if (profilePicture) { + const profilePictureBlob = await profilePicture.data.blob() + profilePictureUrl = URL.createObjectURL(profilePictureBlob) + } + + set({ + state: { + isSignedIn: true, + record: profileRecord, + profile: { + ...profile, + id: profileRecord.id, + profilePictureUrl + } + } + }) + + return true + }, + addCondition: async (agent: Agent, condition: string) => { + const state = get().state + if (!state.isSignedIn) return false + + const { profilePictureUrl, ...payload } = state.profile + if (payload.conditions.indexOf(condition) < -1) return + + payload.conditions.push(condition) + + const updatedRecord = await UserDetailsUtils.updateUserDetailsRecord(agent, state.record, payload) + if (!updatedRecord) return false + const profile = await updatedRecord.data.json() + + set({ + state: { + isSignedIn: true, + record: updatedRecord, + profile: { + ...profile, + id: updatedRecord.id, + profilePictureUrl + } + } + }) + + return updatedRecord + }, + signUp: async (agent: Agent, payload: SignUpPayload) => { + const profile = await UserDetailsUtils.createUserDetailsRecord(agent, { ...payload, conditions: [], did: agent.did }) + if (!profile) return false + + return profile + } + })) +) diff --git a/tauri-app/src/stores/useDocuments.ts b/tauri-app/src/stores/useDocuments.ts new file mode 100644 index 0000000..fe6587c --- /dev/null +++ b/tauri-app/src/stores/useDocuments.ts @@ -0,0 +1,210 @@ +import { Web5, Record as Web5Record } from '@web5/api'; +import { useState, useEffect } from 'react'; +import { schemaOrgProtocolDefinition } from './useWeb5Store'; +import ConditionsProtocol, { did as ConditionsProtocolDID } from '@/utils/protocols/conditions'; +import _ from "lodash" + +export type DigitalDocument = { + "@context": "https://schema.org"; + "@type": "DigitalDocument"; + name: string; + encodingFormat: string; + size: string; + url: string; + identifier: string; + dateCreated?: string; + dateModified?: string; + datePublished: string; + thumbnail?: Blob; + thumbnailUrl?: string; +}; + +type Document = { + record: Web5Record, + id: string + data: DigitalDocument +} + +export function useDocuments(web5: Web5, did: string) { + const [documents, setDocuments] = useState<Document[]>([]); + + async function fetchDocuments() { + const { records } = await web5.dwn.records.query({ + message: { + filter: { + schema: "https://schema.org/DigitalDocument", + }, + // @ts-ignore + dateSort: "createdAscending", + }, + }); + + if (!records) return false + + const docs = []; + for (const record of records) { + const data = await record.data.json(); + docs.push({ + record, + data, + id: record.id + }); + } + setDocuments(docs); + } + + async function fetchDocumentsWithCondition(condition: string) { + const { records } = await web5.dwn.records.query({ + from: ConditionsProtocolDID, + message: { + filter: { + protocolPath: 'condition', + schema: ConditionsProtocol.types.condition.schema, + }, + // @ts-ignore + dateSort: "createdAscending", + }, + }); + if (!records) return false + + const fetchedRecords = await Promise.allSettled(records.map(record => record.data.json())) + .then(results => results + .filter(result => result.status === 'fulfilled') + // @ts-ignore + .map(result => result.value)) + + return fetchedRecords + } + + async function createDocument({ name, file, condition }: { name: string | undefined, file: File, condition: string }): Promise<false | Document> { + const { record: uploadedFileResponse } = await web5.dwn.records.create({ + data: new Blob([file], { type: file.type }), + }); + + if (!uploadedFileResponse) return false; + + const { record } = await web5.dwn.records.create({ + data: { + "@context": "https://schema.org", + "@type": "DigitalDocument", + name: name ?? file.name, + encodingFormat: file.type, + size: file.size.toString(), + url: uploadedFileResponse.id, + identifier: "", + condition, + dateCreated: new Date().toISOString(), + dateModified: new Date().toISOString(), + datePublished: new Date().toISOString(), + }, + message: { + schema: "https://schema.org/DigitalDocument", + protocol: schemaOrgProtocolDefinition.protocol, + protocolPath: "digitalDocument", + dataFormat: "application/json", + published: true + }, + }); + + if (!record) return false; + + const { record: conditionRecord, status } = await web5.dwn.records.create({ + data: { + condition, + did + }, + message: { + protocol: ConditionsProtocol.protocol, + protocolPath: 'condition', + schema: ConditionsProtocol.types.condition.schema, + dataFormat: ConditionsProtocol.types.condition.dataFormats[0], + } + }) + + console.log(status) + console.log(conditionRecord) + if (!conditionRecord) return false + + await conditionRecord.send(ConditionsProtocolDID) + console.log('sent to pulsepal dwn') + + // await conditionRecord.send(did) + // console.log('sent to user dwn') + + const data = await record.data.json(); + const doc = { record, data, id: record.id }; + + setDocuments((prevDocs) => [...prevDocs, doc]); + + return doc + } + + async function updateDocument(document: Document, { name, condition, file }: { name?: string, condition?: string, file?: File }) { + let uploadedFileResponse: Web5Record | undefined = undefined + if (file) { + const { record } = await web5.dwn.records.create({ + data: new Blob([file], { type: file.type }), + }); + uploadedFileResponse = record + } + + if (file && !uploadedFileResponse) return false; + + const data = { + name: name ?? file?.name ?? document.data.name, + encodingFormat: file?.type, + size: file?.size.toString(), + url: uploadedFileResponse?.id, + condition, + dateModified: new Date().toISOString(), + } + + const responseStatus = await document.record.update({ + data + }); + + // await responseStatus.status + const updatedDoc = _.merge(document, { data }) + + setDocuments((prevDocs) => + prevDocs.map((doc) => + doc.id === document.id + ? updatedDoc + : doc + ) + ); + } + + async function deleteDocument(document: Document) { + await web5.dwn.records.delete({ + message: { + recordId: document.id, + }, + }); + setDocuments((prevDocs) => + prevDocs.filter((doc) => doc.id !== document.id) + ); + } + + async function getDocumentFile(document: Document) { + const { records } = await web5.dwn.records.query({ + message: { + filter: { + recordId: document.data.url, + } + } + }) + + if (!records) return false + + const firstRecord = records[0] + + if (!firstRecord) return false + + const file = new File([await firstRecord.data.blob()], document.data.name, { type: document.data.encodingFormat }); + + return file; + } + + return { documents, createDocument, updateDocument, deleteDocument, getDocumentFile, fetchDocuments, }; +} diff --git a/tauri-app/src/stores/useRemedy.ts b/tauri-app/src/stores/useRemedy.ts new file mode 100644 index 0000000..8e5199e --- /dev/null +++ b/tauri-app/src/stores/useRemedy.ts @@ -0,0 +1,152 @@ +import { Web5, Record as Web5Record } from '@web5/api'; +import { useState } from 'react'; +import { schemaOrgProtocolDefinition } from './useWeb5Store'; +import _ from "lodash" + +export type Remedy = { + "@context": "https://schema.org"; + "@type": "Collection"; + name: string; + description: string; + created_by: string; + useUrl: string; + encodingFormat: string; + size: string; + url: string; + identifier: string; + dateCreated?: string; + dateModified?: string; + datePublished: string; + thumbnail?: Blob; + thumbnailUrl?: string; + // Add more properties as needed +}; + +type RemedyDocument = { + record: Web5Record; + id: string; + data: Remedy; +}; + +export function useRemedies(web5: Web5) { + const [remedies, setRemedies] = useState<RemedyDocument[]>([]); + + async function fetchRemedies() { + const { records } = await web5.dwn.records.query({ + message: { + filter: { + schema: "https://schema.org/Collection", + }, + // @ts-ignore + dateSort: "createdAscending", + }, + }); + + if (!records) return false; + + const remedies = []; + for (const record of records) { + const data = await record.data.json(); + remedies.push({ + record, + data, + id: record.id, + }); + } + setRemedies(remedies); + } + + async function createRemedy({ name, description, file, created_by }: { name: string | undefined ; description: string | undefined; file: File; created_by: string | undefined}): Promise<false | RemedyDocument> { + + const { record: uploadedFileResponse } = await web5.dwn.records.create({ + data: new Blob([file], { type: file.type }), + }); + + if (!uploadedFileResponse) return false; + + const { record } = await web5.dwn.records.create({ + data: { + "@context": "https://schema.org", + "@type": "Collection", + name: name, + description: description, + created_by: created_by, + encodingFormat: file.type, + size: file.size.toString(), + url: uploadedFileResponse?.id, + identifier: "", + dateCreated: new Date().toISOString(), + dateModified: new Date().toISOString(), + datePublished: new Date().toISOString(), + // Add more properties as needed + }, + message: { + schema: "https://schema.org/Collection", + protocol: schemaOrgProtocolDefinition.protocol, + protocolPath: "collection", + dataFormat: "application/json", + published: true, + }, + }); + + if (!record) return false + + const data = await record.data.json(); + const remedy = { record, data, id: record.id }; + + setRemedies((prevRemedies) => [...prevRemedies, remedy]); + + return remedy; + } + + async function updateRemedy(remedy: RemedyDocument, { name, description, created_by}: { name?: string; description?: string, created_by?: string }) { + const data = { + name: name ?? remedy.data.name, + description: description ?? remedy.data.description, + created_by: created_by ?? remedy.data.created_by, + // Add more properties as needed + }; + + const responseStatus = await remedy.record.update({ + data, + }); + + const updatedRemedy = _.merge(remedy, { data }); + + setRemedies((prevRemedies) => + prevRemedies.map((r) => (r.id === remedy.id ? updatedRemedy : r)) + ); + } + + async function deleteRemedy(remedy: RemedyDocument) { + await web5.dwn.records.delete({ + message: { + recordId: remedy.id, + }, + }); + + setRemedies((prevRemedies) => prevRemedies.filter((r) => r.id !== remedy.id)); + } + + async function getDocumentFile(document: RemedyDocument) { + const { records } = await web5.dwn.records.query({ + message: { + filter: { + recordId: document.data.url, + } + } + }) + + if (!records) return false + + const firstRecord = records[0] + + if (!firstRecord) return false + + const file = new File([await firstRecord.data.blob()], document.data.name, { type: document.data.encodingFormat }); + + return file; + } + + return { remedies, createRemedy, updateRemedy, deleteRemedy, getDocumentFile, fetchRemedies }; +} diff --git a/tauri-app/src/stores/useWeb5Store.ts b/tauri-app/src/stores/useWeb5Store.ts index 637f0f3..2451557 100644 --- a/tauri-app/src/stores/useWeb5Store.ts +++ b/tauri-app/src/stores/useWeb5Store.ts @@ -1,5 +1,6 @@ import { Web5 } from "@web5/api/browser"; import { create } from "zustand"; +import { protocols as AllProtocols } from "@/utils/protocols"; interface Web5State { web5: Web5 | null; @@ -20,11 +21,13 @@ const useWeb5Store = create<Web5State>((set, get) => ({ try { // Connect to Web5 const { web5, did } = await Web5.connect({ - techPreview: { - dwnEndpoints: [], - }, + // techPreview: { + // dwnEndpoints: [], + // }, // sync: "1000", + sync: "5s", }); + console.log("did:", did) // Set the Web5 instance and DID set({ web5, did }); @@ -56,21 +59,30 @@ const useWeb5Store = create<Web5State>((set, get) => ({ return; } - // protocol already exists if (protocols.length > 0) { - // console.log("protocol already exists"); + console.log("protocol already exists:", p.protocol) + continue } + console.log("Configuring protocol:", p.protocol) // configure protocol on local DWN - const { protocol } = await web5.dwn.protocols.configure({ + const { protocol, status: protocolConfigurationStatus } = await web5.dwn.protocols.configure({ message: { - definition: p, + definition: Object.assign(p), }, }); - // console.log("configure protocol local status", configureStatus); + if (!protocol) { + console.log("Failed to configure protocol:", p.protocol) + console.log(protocolConfigurationStatus) + continue + } + + console.log("configured protocol:", protocol); // configure protocol on remote DWN, because sync may not have occured yet - await protocol!.send(did); + console.log("sending protocol to remote DWN...") + const protocolSendStatus = await protocol.send(did); + console.log("sent protocol to remote DWN:", protocolSendStatus); // console.log("configure protocol remote status", remoteConfigureStatus); } }, @@ -190,4 +202,4 @@ export const schemaOrgProtocolDefinition = { }, }; -const protocols = [schemaOrgProtocolDefinition]; +const protocols = [schemaOrgProtocolDefinition, ...AllProtocols] diff --git a/tauri-app/src/utils/blob.ts b/tauri-app/src/utils/blob.ts new file mode 100644 index 0000000..935c040 --- /dev/null +++ b/tauri-app/src/utils/blob.ts @@ -0,0 +1,181 @@ +import { Web5, Record as Web5Record } from "@web5/api/browser" +import BlobProtocol, { Record, did as BlobProtocolDID } from "./protocols/blob"; +import _ from "lodash"; + +type Agent = { + web5: Web5 + did: string +} + +type FilterObj = { + recordId: string, +} + +type Type = keyof typeof BlobProtocol["types"] +type Schema<T extends Type> = typeof BlobProtocol["types"][T]["schema"] +type DataFormat<T extends Type> = typeof BlobProtocol["types"][T]["dataFormats"][number] + +type FullFilterObj<T extends Type> = { + protocolPath: T + schema: Schema<T> +} + +type FullMessageObj<T extends Type> = { + schema: Schema<T> + protocolPath: T + dataFormat: DataFormat<T> + published: typeof BlobProtocol["published"] +} + +async function createRecord<T extends Type>(agent: Agent, data: Record.Blob, message: FullMessageObj<T>, remote?: boolean) { + const { record, status } = await agent.web5.dwn.records.create({ + data, + message: Object.assign({ + ...message, + protocol: BlobProtocol.protocol, + }) + }); + + if (!record) { + console.error("Failed to create record:", status) + return false + } + + if (remote) { + const { status: syncStatus } = await record.send(BlobProtocolDID) + + if (syncStatus.code !== 202) { + console.log("Failed to sync record protocol with remote DWN:", syncStatus) + return false + } + } + + const { status: syncStatus } = await record.send(agent.did) + + if (syncStatus.code !== 202) { + console.log("Failed to sync record with remote DWN:", syncStatus) + + if (remote) + return false + } + + return record +} + +async function fetchRecords<T extends Type>(agent: Agent, filter: FullFilterObj<T>, remote?: boolean) { + const { records, status } = await agent.web5.dwn.records.query({ + from: remote ? BlobProtocolDID : undefined, + message: { + filter: { + ...filter, + protocol: BlobProtocol.protocol, + }, + // @ts-ignore + dateSort: "createdAscending", + }, + }); + + if (!records) { + console.log("Failed to fetch records:", status) + return false + } + return records +} + +type CreatePayload = { + file: File +} +async function createBlobRecord(agent: Agent, payload: CreatePayload, remote?: boolean) { + const { file } = payload + + const record = await createRecord( + agent, + new Blob([file], { type: file.type }), + { + schema: BlobProtocol.types.blob.schema, + protocolPath: "blob", + dataFormat: file.type as DataFormat<"blob">, + published: BlobProtocol.published, + }, + remote + ) + + if (!record) { + console.error("Failed to create blob record") + return false + } + + return record +} + +async function fetchBlobRecord(agent: Agent, filter: FilterObj, remote?: boolean) { + const records = await fetchRecords(agent, { + ...filter, + protocolPath: "blob", + schema: BlobProtocol.types.blob.schema, + }, remote) + + if (!records || !records[0]) return false + + return records[0] +} + +async function fetchBlobRecords(agent: Agent) { + return fetchRecords(agent, { + protocolPath: "blob", + schema: BlobProtocol.types.blob.schema, + }) +} + +type UpdatePayload = CreatePayload + +async function updateBlobRecord(agent: Agent, id: string, payload: UpdatePayload): Promise<false | Web5Record>; +async function updateBlobRecord(agent: Agent, record: Web5Record, payload: UpdatePayload): Promise<false | Web5Record>; + +async function updateBlobRecord(agent: Agent, idOrRecord: string | Web5Record, payload: UpdatePayload): Promise<false | Web5Record> { + const { file } = payload + + const record = typeof idOrRecord === "string" ? await fetchBlobRecord(agent, { recordId: idOrRecord }) : idOrRecord + if (!record) return false + + const { status } = await record.update({ + data: new Blob([file], { type: file.type }) + }) + + if (status.code !== 202) { + console.log("Failed to sync blob record update with remote DWN:", status) + return false + } + + return record +} + +async function deleteBlobRecord(agent: Agent, id: string): Promise<boolean>; +async function deleteBlobRecord(agent: Agent, record: Web5Record): Promise<boolean>; + +async function deleteBlobRecord(agent: Agent, idOrRecord: string | Web5Record): Promise<boolean> { + const record = typeof idOrRecord === "string" ? await fetchBlobRecord(agent, { recordId: idOrRecord }) : idOrRecord + if (!record) return false + + const { status } = await agent.web5.dwn.records.delete({ + message: { + recordId: record.id + } + }) + if (status.code !== 202) { + console.log("Failed to delete blob record:", status) + return false + } + + return true +} + +const BlobUtils = { + createBlobRecord, + fetchBlobRecords, + fetchBlobRecord, + updateBlobRecord, + deleteBlobRecord +} + +export default BlobUtils diff --git a/tauri-app/src/utils/document.ts b/tauri-app/src/utils/document.ts new file mode 100644 index 0000000..47382b6 --- /dev/null +++ b/tauri-app/src/utils/document.ts @@ -0,0 +1,284 @@ +import { Web5, Record as Web5Record } from "@web5/api/browser" +import DocumentProtocol, { Record } from "./protocols/document"; +import BlobUtils from "./blob"; +import _ from "lodash"; + +type Agent = { + web5: Web5 + did: string +} + +type FilterObj = { + recordId: string, +} + +type Type = keyof typeof DocumentProtocol["types"] +type Schema<T extends Type> = typeof DocumentProtocol["types"][T]["schema"] +type DataFormat<T extends Type> = typeof DocumentProtocol["types"][T]["dataFormats"][number] + +type FullFilterObj<T extends Type> = { + protocolPath: T + schema: Schema<T> +} + +type FullMessageObj<T extends Type> = { + schema: Schema<T> + protocolPath: T + dataFormat: DataFormat<T> + published: typeof DocumentProtocol["published"] +} + +async function createRecord<T extends Type>(agent: Agent, data: Record.Document, message: FullMessageObj<T>) { + const { record, status } = await agent.web5.dwn.records.create({ + data, + message: Object.assign({ + ...message, + protocol: DocumentProtocol.protocol, + }) + }); + + if (!record) { + console.error("Failed to create record:", status) + return false + } + + // const { status: syncStatus } = await record.send(DocumentProtocolDID) + const { status: syncStatus } = await record.send(agent.did) + + if (syncStatus.code !== 202) { + console.log("Failed to sync record with remote DWN:", syncStatus) + } + + return record +} + +async function fetchRecords<T extends Type>(agent: Agent, filter: FullFilterObj<T>) { + const { records, status } = await agent.web5.dwn.records.query({ + // from: DocumentProtocolDID, + message: { + filter: { + ...filter, + protocol: DocumentProtocol.protocol, + }, + // @ts-ignore + dateSort: "createdAscending", + }, + }); + + if (!records) { + console.log("Failed to fetch records:", status) + return false + } + return records +} + +type CreatePayload = Omit<Record.Document, "title" | "file" | "otherFiles" | "dateCreated" | "dateModified"> & +{ + title?: string + file: File, + otherFiles: File[] +} + +async function createDocumentRecord(agent: Agent, payload: CreatePayload) { + const { file, otherFiles, ...restPayload } = payload + + const blobRecord = await BlobUtils.createBlobRecord(agent, { file }) + if (!blobRecord) return false + + const fileData = { + id: blobRecord.id, + size: file.size, + type: file.type, + name: file.name, + } + + const otherFilesData = [] + for (const file of otherFiles) { + const blobRecord = await BlobUtils.createBlobRecord(agent, { file }) + if (!blobRecord) return false + + otherFilesData.push({ + id: blobRecord.id, + size: file.size, + type: file.type, + name: file.name, + }) + } + + const record = await createRecord( + agent, + { + ..._.merge({ title: file.name }, restPayload), + file: fileData, + otherFiles: otherFilesData, + dateCreated: new Date().toISOString(), + dateModified: new Date().toISOString() + }, + { + schema: DocumentProtocol.types.document.schema, + protocolPath: "document", + dataFormat: DocumentProtocol.types.document.dataFormats[0], + published: DocumentProtocol.published, + }) + + if (!record) { + console.error("Failed to create document record") + return false + } + + return record +} + +async function fetchDocumentRecord(agent: Agent, filter: FilterObj) { + const records = await fetchRecords(agent, { + ...filter, + schema: DocumentProtocol.types.document.schema, + protocolPath: "document", + }) + + if (!records || !records[0]) return false + + return records[0] +} + +async function fetchDocumentRecords(agent: Agent) { + return fetchRecords(agent, { + protocolPath: "document", + schema: DocumentProtocol.types.document.schema, + }) +} + +type UpdatePayload = Partial< + Omit<Record.Document, "file" | "otherFiles" | "dateCreated" | "dateModified"> & + { + file: File, + otherFiles: File[] + } +> + +async function updateDocumentRecord(agent: Agent, id: string, payload: UpdatePayload): Promise<false | Web5Record>; +async function updateDocumentRecord(agent: Agent, record: Web5Record, payload: UpdatePayload): Promise<false | Web5Record>; + +async function updateDocumentRecord(agent: Agent, idOrRecord: string | Web5Record, payload: Partial<UpdatePayload>) { + let record: Web5Record + + if (typeof idOrRecord === "string") { + const fetchedRecord = await fetchDocumentRecord(agent, { recordId: idOrRecord }) + + if (!fetchedRecord) return false + + record = fetchedRecord + } + else { + record = idOrRecord + } + + const data: Record.Document = await record.data.json() + const { file, otherFiles, ...restPayload } = payload + + const fileData = data.file + if (file) { + const blobRecord = await BlobUtils.updateBlobRecord(agent, data.file.id, { file }) + if (!blobRecord) return false + + fileData.id = blobRecord.id + fileData.name = file.name + fileData.size = file.size + fileData.type = file.type + } + + const otherFilesData = data.otherFiles + if (otherFiles) { + for (let i = 0; i < otherFiles.length; i++) { + const file = otherFiles[i] + const otherFile = otherFilesData[i] + + const blobRecord = await BlobUtils.updateBlobRecord(agent, otherFile.id, { file }) + if (!blobRecord) return false + + otherFile.id = blobRecord.id + otherFile.name = file.name + otherFile.size = file.size + otherFile.type = file.type + } + + if (otherFiles.length < otherFilesData.length) { + otherFilesData.splice(otherFiles.length, otherFilesData.length - otherFiles.length) + } + else { + for (let i = otherFilesData.length; i < otherFiles.length; i++) { + const file = otherFiles[i] + + const blobRecord = await BlobUtils.createBlobRecord(agent, { file }) + if (!blobRecord) return false + + otherFilesData.push({ + id: blobRecord.id, + name: file.name, + size: file.size, + type: file.type, + }) + } + } + } + + const { status } = await record.update({ + data: _.merge(data, Object.assign(restPayload, { file: fileData, otherFiles: otherFilesData })) + }) + + if (status.code !== 202) { + console.log("Failed to sync document record update with remote DWN:", status) + return false + } + + return record +} + +async function deleteDocumentRecord(agent: Agent, id: string): Promise<boolean>; +async function deleteDocumentRecord(agent: Agent, record: Web5Record): Promise<boolean>; + +async function deleteDocumentRecord(agent: Agent, idOrRecord: string | Web5Record): Promise<boolean> { + let record: Web5Record + + if (typeof idOrRecord === "string") { + const fetchedRecord = await fetchDocumentRecord(agent, { recordId: idOrRecord }) + + if (!fetchedRecord) return false + + record = fetchedRecord + } + else { + record = idOrRecord + } + + const document: Record.Document = await record.data.json() + + const hasDeletedBlobRecord = await BlobUtils.deleteBlobRecord(agent, document.file.id) + if (!hasDeletedBlobRecord) return false + + for (const otherFile of document.otherFiles) { + await BlobUtils.deleteBlobRecord(agent, otherFile.id) + } + + const { status } = await agent.web5.dwn.records.delete({ + message: { + recordId: record.id + } + }) + if (status.code !== 202) { + console.log("Failed to delete record:", status) + return false + } + + return true +} + +const DocumentUtils = { + createDocumentRecord, + fetchDocumentRecord, + fetchDocumentRecords, + updateDocumentRecord, + deleteDocumentRecord, +} + +export default DocumentUtils diff --git a/tauri-app/src/utils/medical-document.ts b/tauri-app/src/utils/medical-document.ts deleted file mode 100644 index c3fc6d1..0000000 --- a/tauri-app/src/utils/medical-document.ts +++ /dev/null @@ -1,181 +0,0 @@ -import { Record as Web5Record, Web5 } from "@web5/api" - -export namespace MedicalRecord { - export type NullFlavor = "253|unknown|" | "271|no information|" | "272|masked|" | "273|not applicable|" - - export type Quantity = { - "@type": "DV_QUANTITY", - magnitude: number, - units: string, - comment?: string - } | { comment: string } - - export type Element = { - "@type": "ELEMENT", - name: string, - value: Quantity - } & ({ - null_flavor: NullFlavor, - null_reason?: string - } | { - null_flavor: NullFlavor, - null_reason: string - }) - - export type ItemSingle = { - "@type": "ITEM_SINGLE", - item: Element - } - - export type ItemList = { - "@type": "ITEM_LIST", - items: Item[] - } - - export type Item = ItemSingle | ItemList - - export type Event = { - "@type": "EVENT", - time: Date, - state: Item - } - - export type History = { - "@type": "HISTORY", - origin?: Date, - period?: Date, - duration?: Date, - events: Event[] - } - - export type Document = { - history?: History, - comment?: string - } -} - -export function createMedicalRecordItem(element: Omit<MedicalRecord.Element, "@type">): MedicalRecord.ItemSingle { - return { - "@type": "ITEM_SINGLE", - item: Object.assign(element, { - "@type": "ELEMENT" - } as const) - } -} - -export class MedicalDocument { - declare private _web5: Web5 - declare private _protocol: string - private _id: string | undefined = undefined - declare private _history: MedicalRecord.History - private _comment: string | undefined = "" - declare private _record: Web5Record - - constructor(web5: Web5, protocol: string, doc?: MedicalRecord.Document & { id: string }) { - this._web5 = web5 - this._protocol = protocol - - this._history = { - "@type": "HISTORY", - events: [] - } - - if (doc) { - if (doc.history) - this._history = doc.history - this._comment = doc.comment - this._id = doc.id - } - } - - setHistory(payload: { origin?: Date, period?: Date, duration?: Date }) { - this._history = { - '@type': 'HISTORY', - origin: payload.origin, - period: payload.period, - duration: payload.duration, - events: [] - } - } - - addHistoryEvent(payload: { time: Date, state: MedicalRecord.Item }) { - this._history.events.push({ - "@type": "EVENT", - time: payload.time, - state: payload.state - }) - - return this._history.events.length - 1 - } - - set comment(comment: string | undefined) { - this._comment = comment - } - - get comment() { - return this._comment - } - - static async getById(web5: Web5, protocol: string, id: string) { - const { records } = await web5.dwn.records.query({ - message: { - filter: { - recordId: id, - protocol - } - } - }) - - if (!records) - return null - - const firstRecordResponse = records[0] - if (!firstRecordResponse) - return null - - const medicalRecord: MedicalRecord.Document = await firstRecordResponse.data.json() - - return new MedicalDocument(web5, protocol, Object.assign(medicalRecord, { id })) - } - - async save(): Promise<false | string> { - let record: Web5Record | undefined = undefined - - if (this._id) { - const res = await this._record.update({ - data: { - history: this._history, - comment: this._comment - } - }) - - if (res.status.code === 200) - return this._id - - return false - } - - const { record: res } = await this._web5.dwn.records.create({ - data: { - "@context": "https://schema.org", - "@type": "MEDICAL_RECORD", - history: this._history, - comment: this._comment - }, - message: { - schema: "https://schema.org/OpenEHR", - dataFormat: "application/json", - protocol: this._protocol - }, - }) - - record = res?.record - - if (!record) - return false - - this._id = record.id - - return record.id - } -} diff --git a/tauri-app/src/utils/protocols/blob.ts b/tauri-app/src/utils/protocols/blob.ts new file mode 100644 index 0000000..f6d65a5 --- /dev/null +++ b/tauri-app/src/utils/protocols/blob.ts @@ -0,0 +1,42 @@ +import { url } from "./defns" +const protocol = `${url}/protocols/blob` as const + +const BlobProtocol = { + protocol, + published: true, + types: { + blob: { + schema: `${protocol}/schema/blob.json`, + dataFormats: [ + "image/png", + "image/jpeg", + "image/jpg", + "application/pdf" + ] + } + }, + structure: { + blob: { + $actions: [ + { + who: "anyone", + // of: "blob", + can: "read" + }, + { + who: "anyone", + // of: "blob", + can: "write" + } + ] + } + } +} as const + +export namespace Record { + export type Blob = globalThis.Blob +} + +export const did = "did:ion:EiAx_twrw3f0yLOv3Pe6pk4gWG4miV9SVXiHe_Q4lMn8Ow:eyJkZWx0YSI6eyJwYXRjaGVzIjpbeyJhY3Rpb24iOiJyZXBsYWNlIiwiZG9jdW1lbnQiOnsicHVibGljS2V5cyI6W3siaWQiOiJkd24tc2lnIiwicHVibGljS2V5SndrIjp7ImNydiI6IkVkMjU1MTkiLCJrdHkiOiJPS1AiLCJ4IjoiV1M1QXFqeDA1V2Z0YWMwYUhYRnpGNV9wZjM2eTVPQ0N0Qy1tM1lCTFo4WSJ9LCJwdXJwb3NlcyI6WyJhdXRoZW50aWNhdGlvbiJdLCJ0eXBlIjoiSnNvbldlYktleTIwMjAifSx7ImlkIjoiZHduLWVuYyIsInB1YmxpY0tleUp3ayI6eyJjcnYiOiJzZWNwMjU2azEiLCJrdHkiOiJFQyIsIngiOiJpSnpYYkljR0FHdm1QMzd2Z2VfTjB1M3FadllmLWpteGdyM2RTaDUtOE5vIiwieSI6InBBc1BuQ1hLcXlXRWhiS1ZDWjFJejhrWkljVVRXQXBNS2NOS3VtQ3R4T2cifSwicHVycG9zZXMiOlsia2V5QWdyZWVtZW50Il0sInR5cGUiOiJKc29uV2ViS2V5MjAyMCJ9XSwic2VydmljZXMiOlt7ImlkIjoiZHduIiwic2VydmljZUVuZHBvaW50Ijp7ImVuY3J5cHRpb25LZXlzIjpbIiNkd24tZW5jIl0sIm5vZGVzIjpbImh0dHBzOi8vZHduLnRiZGRldi5vcmcvZHduNSIsImh0dHBzOi8vZHduLnRiZGRldi5vcmcvZHduMyJdLCJzaWduaW5nS2V5cyI6WyIjZHduLXNpZyJdfSwidHlwZSI6IkRlY2VudHJhbGl6ZWRXZWJOb2RlIn1dfX1dLCJ1cGRhdGVDb21taXRtZW50IjoiRWlBSVIyQWFjQXZFVi16ODgwWHl2eHB4bWMzWDJkbDdYVmcwRHdWTGtfTms0QSJ9LCJzdWZmaXhEYXRhIjp7ImRlbHRhSGFzaCI6IkVpRGlvWktVc3cyZ0gzU29Nb0V5T0duVE9NQkZURFhZZ1hFX3Z6am5RU0M5aUEiLCJyZWNvdmVyeUNvbW1pdG1lbnQiOiJFaUQzU0JIaEtXXzduUF9QamV1WDcybDRjcXVTMWVPVTBCUk1EcW1vdnFpVGxnIn19" + +export default BlobProtocol diff --git a/tauri-app/src/utils/protocols/conditions.ts b/tauri-app/src/utils/protocols/conditions.ts new file mode 100644 index 0000000..aaf5811 --- /dev/null +++ b/tauri-app/src/utils/protocols/conditions.ts @@ -0,0 +1,37 @@ +const ConditionsProtocol = { + protocol: "https://dschema.org/protocols/condition", + published: true, + types: { + condition: { + schema: "https://dschema.org/protocols/condition/schemas/condition.json", + dataFormats: [ + "application/json" + ] + } + }, + structure: { + condition: { + $actions: [ + { + who: "anyone", + can: "read" + }, + { + who: "anyone", + can: "write" + } + ] + } + } +} + +export namespace Record { + export type Condition = { + did: string + condition: string + } +} + +export const did = "did:ion:EiAx_twrw3f0yLOv3Pe6pk4gWG4miV9SVXiHe_Q4lMn8Ow:eyJkZWx0YSI6eyJwYXRjaGVzIjpbeyJhY3Rpb24iOiJyZXBsYWNlIiwiZG9jdW1lbnQiOnsicHVibGljS2V5cyI6W3siaWQiOiJkd24tc2lnIiwicHVibGljS2V5SndrIjp7ImNydiI6IkVkMjU1MTkiLCJrdHkiOiJPS1AiLCJ4IjoiV1M1QXFqeDA1V2Z0YWMwYUhYRnpGNV9wZjM2eTVPQ0N0Qy1tM1lCTFo4WSJ9LCJwdXJwb3NlcyI6WyJhdXRoZW50aWNhdGlvbiJdLCJ0eXBlIjoiSnNvbldlYktleTIwMjAifSx7ImlkIjoiZHduLWVuYyIsInB1YmxpY0tleUp3ayI6eyJjcnYiOiJzZWNwMjU2azEiLCJrdHkiOiJFQyIsIngiOiJpSnpYYkljR0FHdm1QMzd2Z2VfTjB1M3FadllmLWpteGdyM2RTaDUtOE5vIiwieSI6InBBc1BuQ1hLcXlXRWhiS1ZDWjFJejhrWkljVVRXQXBNS2NOS3VtQ3R4T2cifSwicHVycG9zZXMiOlsia2V5QWdyZWVtZW50Il0sInR5cGUiOiJKc29uV2ViS2V5MjAyMCJ9XSwic2VydmljZXMiOlt7ImlkIjoiZHduIiwic2VydmljZUVuZHBvaW50Ijp7ImVuY3J5cHRpb25LZXlzIjpbIiNkd24tZW5jIl0sIm5vZGVzIjpbImh0dHBzOi8vZHduLnRiZGRldi5vcmcvZHduNSIsImh0dHBzOi8vZHduLnRiZGRldi5vcmcvZHduMyJdLCJzaWduaW5nS2V5cyI6WyIjZHduLXNpZyJdfSwidHlwZSI6IkRlY2VudHJhbGl6ZWRXZWJOb2RlIn1dfX1dLCJ1cGRhdGVDb21taXRtZW50IjoiRWlBSVIyQWFjQXZFVi16ODgwWHl2eHB4bWMzWDJkbDdYVmcwRHdWTGtfTms0QSJ9LCJzdWZmaXhEYXRhIjp7ImRlbHRhSGFzaCI6IkVpRGlvWktVc3cyZ0gzU29Nb0V5T0duVE9NQkZURFhZZ1hFX3Z6am5RU0M5aUEiLCJyZWNvdmVyeUNvbW1pdG1lbnQiOiJFaUQzU0JIaEtXXzduUF9QamV1WDcybDRjcXVTMWVPVTBCUk1EcW1vdnFpVGxnIn19" + +export default ConditionsProtocol diff --git a/tauri-app/src/utils/protocols/defns.ts b/tauri-app/src/utils/protocols/defns.ts new file mode 100644 index 0000000..0614789 --- /dev/null +++ b/tauri-app/src/utils/protocols/defns.ts @@ -0,0 +1 @@ +export const url = "https://dschema.org/v0.0.10b" as const diff --git a/tauri-app/src/utils/protocols/document.ts b/tauri-app/src/utils/protocols/document.ts new file mode 100644 index 0000000..a13f7e6 --- /dev/null +++ b/tauri-app/src/utils/protocols/document.ts @@ -0,0 +1,53 @@ +import { url } from "./defns" +const protocol = `${url}/protocols/document` as const + +const DocumentProtocol = { + protocol, + published: true, + types: { + document: { + schema: `${protocol}/schema/document.json`, + dataFormats: [ + "application/json" + ] + } + }, + structure: { + document: { + $actions: [ + { + who: "anyone", + can: "read" + }, + { + who: "anyone", + can: "write" + } + ] + } + } +} as const + +export namespace Record { + type FileMeta = { + id: string + size: number + type: string + name: string + } + + export type Document = { + title: string + file: FileMeta, + description: string + otherFiles: FileMeta[], + profileId: string + condition: string + dateCreated: string + dateModified: string + }; +} + +export const did = "did:ion:EiAx_twrw3f0yLOv3Pe6pk4gWG4miV9SVXiHe_Q4lMn8Ow:eyJkZWx0YSI6eyJwYXRjaGVzIjpbeyJhY3Rpb24iOiJyZXBsYWNlIiwiZG9jdW1lbnQiOnsicHVibGljS2V5cyI6W3siaWQiOiJkd24tc2lnIiwicHVibGljS2V5SndrIjp7ImNydiI6IkVkMjU1MTkiLCJrdHkiOiJPS1AiLCJ4IjoiV1M1QXFqeDA1V2Z0YWMwYUhYRnpGNV9wZjM2eTVPQ0N0Qy1tM1lCTFo4WSJ9LCJwdXJwb3NlcyI6WyJhdXRoZW50aWNhdGlvbiJdLCJ0eXBlIjoiSnNvbldlYktleTIwMjAifSx7ImlkIjoiZHduLWVuYyIsInB1YmxpY0tleUp3ayI6eyJjcnYiOiJzZWNwMjU2azEiLCJrdHkiOiJFQyIsIngiOiJpSnpYYkljR0FHdm1QMzd2Z2VfTjB1M3FadllmLWpteGdyM2RTaDUtOE5vIiwieSI6InBBc1BuQ1hLcXlXRWhiS1ZDWjFJejhrWkljVVRXQXBNS2NOS3VtQ3R4T2cifSwicHVycG9zZXMiOlsia2V5QWdyZWVtZW50Il0sInR5cGUiOiJKc29uV2ViS2V5MjAyMCJ9XSwic2VydmljZXMiOlt7ImlkIjoiZHduIiwic2VydmljZUVuZHBvaW50Ijp7ImVuY3J5cHRpb25LZXlzIjpbIiNkd24tZW5jIl0sIm5vZGVzIjpbImh0dHBzOi8vZHduLnRiZGRldi5vcmcvZHduNSIsImh0dHBzOi8vZHduLnRiZGRldi5vcmcvZHduMyJdLCJzaWduaW5nS2V5cyI6WyIjZHduLXNpZyJdfSwidHlwZSI6IkRlY2VudHJhbGl6ZWRXZWJOb2RlIn1dfX1dLCJ1cGRhdGVDb21taXRtZW50IjoiRWlBSVIyQWFjQXZFVi16ODgwWHl2eHB4bWMzWDJkbDdYVmcwRHdWTGtfTms0QSJ9LCJzdWZmaXhEYXRhIjp7ImRlbHRhSGFzaCI6IkVpRGlvWktVc3cyZ0gzU29Nb0V5T0duVE9NQkZURFhZZ1hFX3Z6am5RU0M5aUEiLCJyZWNvdmVyeUNvbW1pdG1lbnQiOiJFaUQzU0JIaEtXXzduUF9QamV1WDcybDRjcXVTMWVPVTBCUk1EcW1vdnFpVGxnIn19" + +export default DocumentProtocol diff --git a/tauri-app/src/utils/protocols/index.ts b/tauri-app/src/utils/protocols/index.ts new file mode 100644 index 0000000..e6a7e25 --- /dev/null +++ b/tauri-app/src/utils/protocols/index.ts @@ -0,0 +1,11 @@ +import DocumentProtocol from "./document" +import ConditionsProtocol from "./conditions" +import UserDetailsProtocol from "./user" +import BlobProtocol from "./blob" + +export const protocols = [ + DocumentProtocol, + BlobProtocol, + UserDetailsProtocol, + ConditionsProtocol, +] diff --git a/tauri-app/src/utils/protocols/user.ts b/tauri-app/src/utils/protocols/user.ts new file mode 100644 index 0000000..0fd726f --- /dev/null +++ b/tauri-app/src/utils/protocols/user.ts @@ -0,0 +1,45 @@ +import { url } from "./defns" +const protocol = `${url}/protocols/user` as const + +const UserDetailsProtocol = { + protocol: protocol, + published: true, + types: { + details: { + schema: `${protocol}/schemas/details.json`, + dataFormats: [ + "application/json" + ] + } + }, + structure: { + details: { + $actions: [ + { + who: "anyone", + can: "read" + }, + { + who: "anyone", + can: "write" + } + ] + } + } +} + +export namespace Record { + export type Details = { + did: string + firstName: string + lastName: string + profilePictureId: string + conditions: string[] + description: string + dateCreated: string + } +} + +export const did = "did:ion:EiAx_twrw3f0yLOv3Pe6pk4gWG4miV9SVXiHe_Q4lMn8Ow:eyJkZWx0YSI6eyJwYXRjaGVzIjpbeyJhY3Rpb24iOiJyZXBsYWNlIiwiZG9jdW1lbnQiOnsicHVibGljS2V5cyI6W3siaWQiOiJkd24tc2lnIiwicHVibGljS2V5SndrIjp7ImNydiI6IkVkMjU1MTkiLCJrdHkiOiJPS1AiLCJ4IjoiV1M1QXFqeDA1V2Z0YWMwYUhYRnpGNV9wZjM2eTVPQ0N0Qy1tM1lCTFo4WSJ9LCJwdXJwb3NlcyI6WyJhdXRoZW50aWNhdGlvbiJdLCJ0eXBlIjoiSnNvbldlYktleTIwMjAifSx7ImlkIjoiZHduLWVuYyIsInB1YmxpY0tleUp3ayI6eyJjcnYiOiJzZWNwMjU2azEiLCJrdHkiOiJFQyIsIngiOiJpSnpYYkljR0FHdm1QMzd2Z2VfTjB1M3FadllmLWpteGdyM2RTaDUtOE5vIiwieSI6InBBc1BuQ1hLcXlXRWhiS1ZDWjFJejhrWkljVVRXQXBNS2NOS3VtQ3R4T2cifSwicHVycG9zZXMiOlsia2V5QWdyZWVtZW50Il0sInR5cGUiOiJKc29uV2ViS2V5MjAyMCJ9XSwic2VydmljZXMiOlt7ImlkIjoiZHduIiwic2VydmljZUVuZHBvaW50Ijp7ImVuY3J5cHRpb25LZXlzIjpbIiNkd24tZW5jIl0sIm5vZGVzIjpbImh0dHBzOi8vZHduLnRiZGRldi5vcmcvZHduNSIsImh0dHBzOi8vZHduLnRiZGRldi5vcmcvZHduMyJdLCJzaWduaW5nS2V5cyI6WyIjZHduLXNpZyJdfSwidHlwZSI6IkRlY2VudHJhbGl6ZWRXZWJOb2RlIn1dfX1dLCJ1cGRhdGVDb21taXRtZW50IjoiRWlBSVIyQWFjQXZFVi16ODgwWHl2eHB4bWMzWDJkbDdYVmcwRHdWTGtfTms0QSJ9LCJzdWZmaXhEYXRhIjp7ImRlbHRhSGFzaCI6IkVpRGlvWktVc3cyZ0gzU29Nb0V5T0duVE9NQkZURFhZZ1hFX3Z6am5RU0M5aUEiLCJyZWNvdmVyeUNvbW1pdG1lbnQiOiJFaUQzU0JIaEtXXzduUF9QamV1WDcybDRjcXVTMWVPVTBCUk1EcW1vdnFpVGxnIn19" + +export default UserDetailsProtocol diff --git a/tauri-app/src/utils/user.ts b/tauri-app/src/utils/user.ts new file mode 100644 index 0000000..4c0c46c --- /dev/null +++ b/tauri-app/src/utils/user.ts @@ -0,0 +1,214 @@ +import { Web5, Record as Web5Record } from "@web5/api/browser" +import UserDetailsProtocol, { Record as UserDetailsProtocolRecord, did as UserDetailsProtocolDID } from "./protocols/user"; +import _ from "lodash"; +import BlobUtils from "./blob"; + +type Agent = { + web5: Web5 + did: string +} + +type FilterObj = { + recordId: string, +} + +type Type = keyof typeof UserDetailsProtocol["types"] +type Schema<T extends Type> = typeof UserDetailsProtocol["types"][T]["schema"] +type DataFormat<T extends Type> = typeof UserDetailsProtocol["types"][T]["dataFormats"][number] + +type FullFilterObj<T extends Type> = { + protocolPath: T + schema: Schema<T> +} + +type FullMessageObj<T extends Type> = { + schema: Schema<T> + protocolPath: T + dataFormat: DataFormat<T> + published: typeof UserDetailsProtocol["published"] +} + +async function createRecord<T extends Type>(agent: Agent, data: UserDetailsProtocolRecord.Details, message: FullMessageObj<T>) { + const { record, status } = await agent.web5.dwn.records.create({ + data, + message: Object.assign({ + ...message, + protocol: UserDetailsProtocol.protocol, + }) + }); + + if (!record) { + console.error("Failed to create record:", status) + return false + } + + const { status: protocolDwnSyncStatus } = await record.send(UserDetailsProtocolDID) + if (protocolDwnSyncStatus.code !== 202) { + console.log("Failed to sync record with protocol remote DWN:", protocolDwnSyncStatus) + } + + const { status: remoteDwnSyncStatus } = await record.send(agent.did) + if (remoteDwnSyncStatus.code !== 202) { + console.log("Failed to sync record with remote DWN:", remoteDwnSyncStatus) + } + + return record +} + +async function fetchRecords<T extends Type>(agent: Agent, filter: FullFilterObj<T>, remote?: boolean) { + const { records, status } = await agent.web5.dwn.records.query({ + from: remote ? UserDetailsProtocolDID : undefined, + message: { + filter: { + ...filter, + protocol: UserDetailsProtocol.protocol, + }, + // @ts-ignore + dateSort: "createdAscending", + }, + }); + + if (!records) { + console.log("Failed to fetch records:", status) + return false + } + return records +} + +export type CreatePayload = Omit<UserDetailsProtocolRecord.Details, "profilePictureId" | "dateCreated"> & { + profilePicture: File, +} + +async function createUserDetailsRecord(agent: Agent, payload: CreatePayload) { + const existingRecord = await fetchUserDetailsRecord(agent) + if (existingRecord) { + console.error("User details record already exists") + return false + } + + const blobRecord = await BlobUtils.createBlobRecord(agent, { file: payload.profilePicture }, true) + if (!blobRecord) return false + + const { profilePicture, ...restPayload } = payload + + const record = await createRecord( + agent, + { + ...restPayload, + profilePictureId: blobRecord.id, + dateCreated: new Date().toISOString() + }, + { + schema: UserDetailsProtocol.types.details.schema, + protocolPath: "details", + dataFormat: UserDetailsProtocol.types.details.dataFormats[0], + published: UserDetailsProtocol.published, + }) + + if (!record) { + console.error("Failed to create document record") + return false + } + + return record +} + +async function fetchUserDetailsRecord(agent: Agent, remote?: boolean) { + const records = await fetchRecords(agent, { + schema: UserDetailsProtocol.types.details.schema, + protocolPath: "details", + }, remote) + + if (!records) return false + + return records[0] +} + +async function fetchUserDetailsRecords(agent: Agent) { + return fetchRecords(agent, { + protocolPath: "details", + schema: UserDetailsProtocol.types.details.schema, + }, true) +} + +type UpdatePayload = Partial< + Omit<UserDetailsProtocolRecord.Details, "profilePictureId"> & + { + profilePicture: File, + } +> + +async function updateUserDetailsRecord(agent: Agent, idOrRecord: string | Web5Record, payload: Partial<UpdatePayload>) { + let record: Web5Record + + if (typeof idOrRecord === "string") { + const fetchedRecord = await fetchUserDetailsRecord(agent) + + if (!fetchedRecord) return false + + record = fetchedRecord + } + else { + record = idOrRecord + } + + const data: UserDetailsProtocolRecord.Details = await record.data.json() + const { profilePicture, ...restPayload } = payload + + let profilePictureId = data.profilePictureId + if (profilePicture) { + const blobRecord = await BlobUtils.updateBlobRecord(agent, profilePictureId, { file: profilePicture }) + if (!blobRecord) return false + + profilePictureId = blobRecord.id + } + + const { status } = await record.update({ + data: _.merge(data, Object.assign(restPayload, { profilePictureId })) + }) + + if (status.code !== 202) { + console.log("Failed to sync document record update with remote DWN:", status) + return false + } + + const { status: protocolDwnSyncStatus } = await record.send(UserDetailsProtocolDID) + if (protocolDwnSyncStatus.code !== 202) { + console.log("Failed to sync document record update with protocol remote DWN:", protocolDwnSyncStatus) + } + + return record +} + +async function deleteUserDetailsRecord(agent: Agent) { + const record = await fetchUserDetailsRecord(agent) + if (!record) return false + + const profile: UserDetailsProtocolRecord.Details = await record.data.json() + + const hasDeletedProfilePictureRecord = await BlobUtils.deleteBlobRecord(agent, profile.profilePictureId) + if (!hasDeletedProfilePictureRecord) return false + + const { status } = await agent.web5.dwn.records.delete({ + message: { + recordId: record.id + } + }) + + if (status.code !== 202) { + console.log("Failed to delete profile record:", status) + return false + } + + return true +} + +const UserDetailsUtils = { + fetchUserDetailsRecord, + fetchUserDetailsRecords, + updateUserDetailsRecord, + createUserDetailsRecord, + deleteUserDetailsRecord +} + +export default UserDetailsUtils diff --git a/tauri-app/tsconfig.json b/tauri-app/tsconfig.json index 4a83aa7..0a1cb27 100644 --- a/tauri-app/tsconfig.json +++ b/tauri-app/tsconfig.json @@ -5,6 +5,7 @@ "lib": ["ES2020", "DOM", "DOM.Iterable"], "module": "ESNext", "skipLibCheck": true, + "esModuleInterop": true, /* Bundler mode */ "moduleResolution": "bundler", @@ -16,13 +17,15 @@ /* Linting */ "strict": true, - "noUnusedLocals": true, - "noUnusedParameters": true, + // "noUnusedLocals": true, + // "noUnusedParameters": true, "noFallthroughCasesInSwitch": true, "baseUrl": ".", "paths": { - "@/*": ["./src/*"] + "@/*": ["./src/*"], + "@backend/*": ["../server/src/*"], + "@frontend/*": ["./src/*"] } }, "include": ["src"], diff --git a/tauri-app/vite.config.ts b/tauri-app/vite.config.ts index d54908f..4cb61b7 100644 --- a/tauri-app/vite.config.ts +++ b/tauri-app/vite.config.ts @@ -19,6 +19,9 @@ export default defineConfig(async () => ({ server: { port: 1420, strictPort: true, + proxy: { + "/api": "http://127.0.0.1:5000/" + }, watch: { // 3. tell vite to ignore watching `src-tauri` ignored: ["**/src-tauri/**"],