using React.js from my indexedDb and using Dexie.js as a helper to pass the entries from the _app.js to my details page.
import { v4 as uuidv4 } from "uuid";
import { useLiveQuery } from "dexie-react-hooks";
import { db } from "@/components/Dexie";
const { eventDetails } = db;
export default function App({ Component, pageProps }) {
const allItems = useLiveQuery(() => eventDetails.toArray(), []);
async function handleEntryData(data) {
try {
await db.eventDetails.add({
eventId: uuidv4(),
title: data.title,
startTime: data.startTime,
endTime: data.endTime,
location: data.location,
introduce: data.introduce,
creator: data.creator,
});
} catch (error) {
alert(`Error: ${error}`);
}
}
return (
<>
<GlobalStyle />
<Head>
</Head>
<main>
<Component
{...pageProps}
allItems={allItems}
onHandleEntryData={handleEntryData}
/>
</main>
</>
);
}
Details page: This is where the prop is received and passed to a component
import { useRouter } from "next/router";
import DetailsEventData from "@/components/DetailsEventData";
import { optionIcons } from "@/Icons/optionIcon";
function DetailsPage({ allItems }) {
const router = useRouter();
const { id } = router.query;
const currentEvent = allItems?.find(
(detailsItem) => detailsItem.eventId === id
);
function handelEdit() {
router.push(`/editpage/${currentEvent.eventId}`);
}
return (
<StyledMain>
<StyledBackLink href={`/`}>
<Image
src={optionIcons[3].imageSrc}
alt={optionIcons[3].description}
width={40}
height={50}
/>
</StyledBackLink>
<StyledTitle>Event Details</StyledTitle>
<DetailsEventData currentEvent={currentEvent} />
<StyledEditImage
onClick={handelEdit}
src={optionIcons[5].imageSrc}
alt={optionIcons[5].description}
width={55}
height={55}
/>
</StyledMain>
);
}
export default DetailsPage;
Component for displaying the data from the database:
import { voteIcons } from "@/Icons/dataIcons";
export default function DetailsEventData({ currentEvent }) {
return (
<StyledDetailsCard>
<StyledListItem>
{!currentEvent?.voteResult ? (
"Are You there?"
) : (
<Image
src={voteIcons[currentEvent.voteResult].imageSrc}
alt={voteIcons[currentEvent.voteResult].description}
width={30}
height={30}
/>
)}
</StyledListItem>
<StyledListItem>{currentEvent?.title}</StyledListItem>
<StyledListItem>{currentEvent?.startTime}</StyledListItem>
<StyledListItem>{currentEvent?.endTime}</StyledListItem>
<StyledListItem>{currentEvent?.location}</StyledListItem>
<StyledListItem>{currentEvent?.introduce}</StyledListItem>
<StyledListItem>{currentEvent?.creator}</StyledListItem>
</StyledDetailsCard>
);
}
on vercel the same behavior as here on the voting page
import { useRouter } from "next/router";
import { useState } from "react";
import VoteDetails from "@/components/VoteDetails";
import { voteIcons } from "@/Icons/dataIcons/";
import { db } from "@/components/Dexie";
import { optionIcons } from "@/Icons/optionIcon";
const { eventDetails } = db;
function Votepage({ allItems }) {
const [voteCheckmarkImage, setVoteCheckmarkImage] = useState();
const router = useRouter();
const { id } = router.query;
const currentEvent = allItems?.find((voteEvent) => voteEvent.eventId === id);
function handleVoteResult() {
const currentVoteIcon = voteIcons.find(
(voteIcon) => voteIcon.description === voteCheckmarkImage?.props.alt
);
eventDetails
.where("eventId")
.equals(currentEvent.eventId)
.modify((voteEvent) => {
voteEvent.voteResult = currentVoteIcon.id;
});
}
return (
<>
<StyledMain>
<StyledBackLink href="/">
<Image
src={optionIcons[3].imageSrc}
alt={optionIcons[3].description}
height={55}
width={55}
/>
</StyledBackLink>
<StyledVoteTitle>Voting</StyledVoteTitle>
<StyledVoteEventCard>
<VoteDetails currentEvent={currentEvent} />
<StyledEmojiCheckmark>{voteCheckmarkImage}</StyledEmojiCheckmark>
</StyledVoteEventCard>
<StyledVoteButtonContainer>
{voteIcons.map((voteIcon) => (
<StyledVoteButtons
key={voteIcon.id}
onClick={() =>
setVoteCheckmarkImage(
<Image
width={50}
height={50}
src={voteIcon.imageSrc}
alt={voteIcon.description}
/>
)
}
>
<Image
width={80}
height={80}
src={voteIcon.imageSrc}
alt={voteIcon.description}
/>
</StyledVoteButtons>
))}
</StyledVoteButtonContainer>
<StyledLogInVoteImage
src={optionIcons[2].imageSrc}
alt={optionIcons[2].description}
width={45}
height={45}
onClick={handleVoteResult}
/>
</StyledMain>
</>
);
}
export default Votepage;
Here the component gets the same prop as above only that the content on this page is displayed on vercel but not on the other.:
import { Stack } from "@mui/material";
import styled from "styled-components";
export default function VoteDetails({ currentEvent }) {
return (
<Stack>
<StyledVoteCardDetails>
<StyledListItem>{currentEvent?.title}</StyledListItem>
<StyledListItem>{currentEvent?.startTime}</StyledListItem>
<StyledListItem>{currentEvent?.endTime}</StyledListItem>
<StyledListItem>{currentEvent?.location}</StyledListItem>
<StyledListItem>{currentEvent?.intoduce}</StyledListItem>
<StyledListItem>{currentEvent?.creator}</StyledListItem>
</StyledVoteCardDetails>
</Stack>
);
}
while everything works fine on my localhost, i don't get the content about vercel from the database on the details page of my application and it does on the vote page. Although both pages and components draw from the same prop.
Unfortunately there is no error message. Thank you very much in advance for the help
Does it work after deleting database in devtools on the vercel site? If so, maybe the db existed at an earlier version on that origin and you forgot to increment the version number (db.version(n)) when modifying schema?
Any error can be caught using an ErrorBoundrary in react.