Feat/user stories #131

jpcmf · 2025-12-07T02:03:25Z

No description provided.

…eval

…dal handling

…lity

Copilot

Pull request overview

This PR implements a user stories feature similar to Instagram/WhatsApp stories, allowing users to view story content in a modal with swipeable navigation. The implementation integrates the react-insta-stories library and uses React Query for data fetching, with modal state managed through Next.js router query parameters.

Key Changes:

Adds stories API integration with two endpoints: fetch all stories and fetch stories by user ID
Implements story viewing in a full-screen modal with the react-insta-stories library
Updates Next.js from 16.0.1 to 16.0.7 and adds @chakra-ui/anatomy dependency

Reviewed changes

Copilot reviewed 9 out of 10 changed files in this pull request and generated 14 comments.

Show a summary per file

File	Description
src/services/getStories.ts	New service module with API functions to fetch all stories and stories filtered by user ID
src/hooks/useStories.ts	React Query hook for fetching all stories with 5-minute cache
src/hooks/useStoriesByUserId.ts	React Query hook for fetching user-specific stories with userId validation
src/features/stories/modal/index.tsx	Modal component that renders stories using react-insta-stories library with error/loading states
src/features/stories/home/index.tsx	Integrates story data fetching and passes formatted data to StoriesSwiper
src/components/StoriesSwiper/index.tsx	Refactored to accept dynamic story data, adds modal integration via URL query params, includes deduplication logic
src/lib/theme.ts	New Chakra UI modal theme configuration with transparent background and custom styling
src/styles/theme.ts	Updates modal theme import to use new centralized theme configuration
package.json	Adds react-insta-stories and @chakra-ui/anatomy dependencies, updates Next.js to 16.0.7
pnpm-lock.yaml	Lock file updates for new dependencies and Next.js version

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/features/stories/modal/index.tsx

src/components/StoriesSwiper/index.tsx

src/features/stories/home/index.tsx

Copilot · 2025-12-07T02:07:41Z

src/services/getStories.ts

+  const res = await axios.get(
+    `${API}/api/stories?populate[author][fields][0]=username&populate[author][fields][1]=avatar`
+  );
+  console.log("res...", res);
+
+  return res.data;
+}
+
+export async function getStoriesByUserId(userId: string) {
+  const res = await axios.get(
+    `${API}/api/stories?filters[author][id][$eq]=${userId}&populate[author][fields][0]=username&populate[author][fields][1]=avatar`
+  );
+
+  return res.data;


Missing error handling for the API request. Consider wrapping the axios call in a try-catch block or implementing proper error handling to provide meaningful error messages to users when the API call fails.

Suggested change

const res = await axios.get(

`${API}/api/stories?populate[author][fields][0]=username&populate[author][fields][1]=avatar`

);

console.log("res...", res);

return res.data;

}

export async function getStoriesByUserId(userId: string) {

const res = await axios.get(

`${API}/api/stories?filters[author][id][$eq]=${userId}&populate[author][fields][0]=username&populate[author][fields][1]=avatar`

);

return res.data;

try {

const res = await axios.get(

`${API}/api/stories?populate[author][fields][0]=username&populate[author][fields][1]=avatar`

);

console.log("res...", res);

return res.data;

} catch (error) {

console.error("Failed to fetch stories:", error);

throw new Error("Unable to fetch stories at this time. Please try again later.");

}

}

export async function getStoriesByUserId(userId: string) {

try {

const res = await axios.get(

`${API}/api/stories?filters[author][id][$eq]=${userId}&populate[author][fields][0]=username&populate[author][fields][1]=avatar`

);

return res.data;

} catch (error) {

console.error(`Failed to fetch stories for user ${userId}:`, error);

throw new Error("Unable to fetch stories for this user at this time. Please try again later.");

}

Copilot · 2025-12-07T02:07:42Z

src/features/stories/modal/index.tsx

+        duration: story.attributes.duration || 5000,
+        ...(story.attributes.see_more_enabled && {
+          seeMore: ({ close }: { close: () => void }) => {
+            return <div onClick={close}>Hello, click to close this.</div>;


The see_more functionality is partially implemented but the actual implementation just displays a placeholder message. Consider adding a TODO comment or implementing the actual functionality using story.attributes.see_more_text and story.attributes.see_more_link from the API.

Suggested change

return <div onClick={close}>Hello, click to close this.</div>;

const text = story.attributes.see_more_text || "See more";

const link = story.attributes.see_more_link;

return (

<Center h="100%" w="100%">

<Box

as="button"

px={6}

py={3}

bg="green.400"

color="white"

borderRadius="md"

fontWeight="semibold"

_hover={{ bg: "green.500" }}

onClick={() => {

if (link) {

window.open(link, "_blank", "noopener,noreferrer");

}

close();

}}

>

{text}

</Box>

</Center>

);

Copilot · 2025-12-07T02:07:43Z

src/features/stories/home/index.tsx

 import { Box, Divider, Flex, Heading, useColorModeValue } from "@chakra-ui/react";

 import { StoriesSwiper } from "@/components/StoriesSwiper";
+import { useStories } from "@/hooks/useStories";

 export function StoriesHome() {
  const titleBgColor = useColorModeValue("white", "gray.900");
+  const { data } = useStories();
+


The useStories hook is called but no error or loading states are handled. If the API call fails or is still loading, this could cause issues. Consider destructuring isLoading and isError from the hook and handling these states appropriately.

Suggested change

import { Box, Divider, Flex, Heading, useColorModeValue } from "@chakra-ui/react";

import { StoriesSwiper } from "@/components/StoriesSwiper";

import { useStories } from "@/hooks/useStories";

export function StoriesHome() {

const titleBgColor = useColorModeValue("white", "gray.900");

const { data } = useStories();

import { Box, Divider, Flex, Heading, useColorModeValue, Spinner, Text } from "@chakra-ui/react";

import { StoriesSwiper } from "@/components/StoriesSwiper";

import { useStories } from "@/hooks/useStories";

export function StoriesHome() {

const titleBgColor = useColorModeValue("white", "gray.900");

const { data, isLoading, isError } = useStories();

if (isLoading) {

return (

<Flex justify="center" align="center" minH="200px">

<Spinner size="lg" />

</Flex>

);

}

if (isError) {

return (

<Flex justify="center" align="center" minH="200px">

<Text color="red.500">Erro ao carregar histórias.</Text>

</Flex>

);

}

src/features/stories/home/index.tsx

Copilot · 2025-12-07T02:07:43Z

src/components/StoriesSwiper/index.tsx

+                  >
+                    <ChakraAvatar
+                      w="66px"
+                      h="66px"
+                      bgColor={story.isUserOffline ? bgUserAvatar : "green.300"}
+                      src={story?.image ? story.image : "https://robohash.org/" + story?.name}
+                      style={{ filter: story.isUserOffline ? `grayscale(100%)` : "none" }}
+                    />


Using grayscale filter to indicate offline users may not be accessible to all users, particularly those with certain types of color blindness. Consider adding additional visual indicators (e.g., an icon overlay) or using aria-label attributes to communicate the offline state to screen reader users.

Suggested change

>

<ChakraAvatar

w="66px"

h="66px"

bgColor={story.isUserOffline ? bgUserAvatar : "green.300"}

src={story?.image ? story.image : "https://robohash.org/" + story?.name}

style={{ filter: story.isUserOffline ? `grayscale(100%)` : "none" }}

/>

aria-label={`${story.name} (${story.isUserOffline ? "offline" : "online"})`}

>

<Box position="relative" display="inline-block">

<ChakraAvatar

w="66px"

h="66px"

bgColor={story.isUserOffline ? bgUserAvatar : "green.300"}

src={story?.image ? story.image : "https://robohash.org/" + story?.name}

style={{ filter: story.isUserOffline ? `grayscale(100%)` : "none" }}

aria-label={`${story.name} (${story.isUserOffline ? "offline" : "online"})`}

/>

{story.isUserOffline && (

<Box

position="absolute"

bottom="4px"

right="4px"

boxSize="16px"

bg="gray.500"

borderRadius="full"

border="2px solid"

borderColor={bgColor}

display="flex"

alignItems="center"

justifyContent="center"

zIndex={1}

>

<Box

as="span"

width="8px"

height="8px"

borderRadius="full"

bg="gray.300"

display="block"

/>

</Box>

)}

</Box>

src/services/getStories.ts

Copilot

Pull request overview

Copilot reviewed 15 out of 17 changed files in this pull request and generated 6 comments.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-11T01:51:28Z

src/services/getStories.ts

+export async function getStories() {
+  const res = await axios.get(
+    `${API}/api/stories?populate[author][fields][0]=username&populate[author][fields][1]=avatar`
+  );
+
+  return res.data;
+}


Missing return type annotations. Add explicit return type annotations for these functions to improve type safety and code documentation. For example: 'export async function getStories(): Promise'

Copilot · 2025-12-11T01:51:28Z

src/hooks/useStories.ts

+type StoryAttributes = {
+  url: string;
+  duration: number;
+  see_more_enabled: boolean;
+  see_more_text: string | null;
+  see_more_link: string | null;
+  createdAt: string;
+  updatedAt: string;
+  author: {
+    data: {
+      id: number;
+      attributes: {
+        username: string;
+      };
+    };
+  };
+};


Duplicate type definitions. The StoryAttributes type is duplicated between useStories.ts and useStoriesByUserId.ts. Consider extracting shared types into a separate types file (e.g., src/types/stories.ts) to maintain a single source of truth and improve maintainability.

Suggested change

type StoryAttributes = {

url: string;

duration: number;

see_more_enabled: boolean;

see_more_text: string | null;

see_more_link: string | null;

createdAt: string;

updatedAt: string;

author: {

data: {

id: number;

attributes: {

username: string;

};

};

};

};

import type { StoryAttributes } from "@/types/stories";

Copilot · 2025-12-11T01:51:29Z

src/components/LogoSkateHub/index.tsx

+    // </svg>
+


Large blocks of commented-out code should be removed. If this code might be needed in the future, rely on version control history instead of leaving commented code in the codebase.

Suggested change

// </svg>

Copilot · 2025-12-11T01:51:29Z

src/features/stories/modal/index.tsx

+        <Text fontSize="2xl" fontWeight="bold">
+          Erro ao carregar stories
+        </Text>
+        <Text color="text.secondary">{error?.message || "Tente novamente mais tarde"}</Text>


Hardcoded error messages in Portuguese. Consider extracting error messages to a localization/i18n system for better maintainability and internationalization support.

Copilot · 2025-12-11T01:51:29Z

src/features/stories/home/index.tsx

+  if (isError) {
+    return (
+      <Flex justify="center" align="center" minH="139px">
+        <Text color="red.500">Erro ao carregar stories.</Text>


Hardcoded error message in Portuguese. Consider extracting error messages to a localization/i18n system for better maintainability and internationalization support.

Copilot · 2025-12-11T01:51:30Z

src/components/StoriesSwiper/index.tsx

+                  <Link
+                    onClick={() => handleViewStory(story)}
+                    display="block"
+                    bg={bgColor}
+                    borderRadius="full"
+                    p={1}
+                    transition="transform 0.2s"
+                    _hover={{
+                      transform: story?.isUserOffline ? "inherit" : "rotate(-6deg)"
+                    }}
+                  >


Accessibility issue: Using a Link component with an onClick handler as a button. Consider using a proper button element or adding role="button" and keyboard event handlers (onKeyDown/onKeyPress) to support keyboard navigation for accessibility.

Copilot

Pull request overview

Copilot reviewed 16 out of 18 changed files in this pull request and generated 7 comments.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/components/LogoSkateHub/index.tsx

src/services/getStories.ts

Copilot · 2025-12-11T02:24:07Z

src/features/stories/modal/index.tsx

+  console.warn("useStoriesByUserId", data);
+


Console.warn statements should be removed before merging to production. These debug statements were likely left from development and should be cleaned up.

Suggested change

console.warn("useStoriesByUserId", data);

Copilot · 2025-12-11T02:24:07Z

src/features/stories/modal/index.tsx

+        onClose();
+      }}
+      onStoryEnd={(storyIndex: number) => {
+        console.warn("Story ended:", storyIndex);


Console.warn statements should be removed before merging to production. These debug statements were likely left from development and should be cleaned up.

Suggested change

console.warn("Story ended:", storyIndex);

// Story ended handler

Copilot · 2025-12-11T02:24:08Z

src/components/LogoSkateHub/index.tsx

+    //   <path d="M40.0862 33.9472C34.2509 33.9472 31.0466 30.887 30.743 25.8704H35.9712C36.0724 27.7205 37.0844 29.5706 40.2214 29.5706C42.8521 29.5706 44.2012 28.4677 44.2012 26.9374C44.2012 25.0518 41.9413 24.5535 39.3107 23.9489C35.634 23.0237 31.1478 21.8849 31.1478 16.0857C31.1478 11.8158 34.2849 8.64936 39.8167 8.64936C45.4496 8.64936 48.5527 11.8872 48.8899 16.6553H43.6281C43.5269 14.698 42.5149 13.1327 39.6814 13.1327C37.5903 13.1327 36.2072 14.0221 36.2072 15.6233C36.2072 17.6868 38.5011 18.256 41.1322 18.8965C44.9096 19.7859 49.4294 20.782 49.4294 26.2615C49.4294 30.7089 46.124 33.9467 40.0862 33.9467V33.9472ZM55.7712 23.4152L61.5049 15.2317H66.8343L60.1894 24.3046L67.1038 33.4843H61.2685L55.7708 25.9771V33.4843H51.0481V9.11224H55.7708L55.7712 23.4152ZM76.8523 19.537C74.2888 19.537 72.2989 21.7427 72.2989 24.4468C72.2989 27.1863 74.2888 29.3571 76.8527 29.3571C79.551 29.3571 81.5749 27.1867 81.5749 24.4468C81.5749 21.7427 79.4834 19.537 76.8523 19.537ZM81.5073 33.4843V32.1325C80.293 33.1286 78.4043 33.7337 76.4475 33.7337C71.7253 33.7337 67.7115 29.7127 67.7115 24.4468C67.7115 19.1808 71.7253 15.0536 76.4475 15.0536C78.4043 15.0536 80.293 15.6941 81.5073 16.6902V15.2317H86.1955V33.4843H81.5073ZM99.2494 15.2317V19.6432H94.9996V26.9733C94.9996 28.6099 95.7079 29.2499 97.293 29.2499H99.2498V33.4843H96.9559C92.3685 33.4843 90.3109 31.3139 90.3109 27.2222V19.6437H87.8151V15.2317H90.3109V10.5349H94.9991V15.2317H99.2494ZM118.004 29.5706C116.317 32.2392 113.652 33.9113 109.807 33.9113C104.275 33.9113 100.7 29.8195 100.7 24.4114C100.7 19.1454 104.41 14.876 109.841 14.876C115.305 14.876 118.611 18.8611 118.611 24.162C118.611 24.8738 118.543 25.7991 118.543 25.9058H105.321C105.827 28.2183 107.48 29.7127 109.908 29.7127C111.999 29.7127 113.517 28.752 114.496 27.2935L118.004 29.5706ZM109.807 18.9319C107.615 18.9319 106.097 20.1774 105.489 22.241H113.888C113.382 20.0353 111.696 18.9319 109.807 18.9319ZM135.712 33.4843V23.9489H125.93V33.4843H120.702V9.11224H125.93V18.8965H135.712V9.11177H140.94V33.4843H135.712ZM159.627 33.4843H155.006V31.6696C153.826 32.986 152.071 33.8045 149.98 33.8045C145.932 33.8045 143.302 30.8515 143.302 26.4395V15.2317H147.956V25.5851C147.956 27.7559 149.137 29.2503 151.161 29.2503C153.421 29.2503 154.972 27.72 154.972 25.194V15.2317H159.627V33.4843ZM171.264 33.7332C169.307 33.7332 167.419 33.1286 166.204 32.132V33.4843H161.516V9.11224H166.204V16.6902C167.419 15.6941 169.307 15.0536 171.264 15.0536C175.986 15.0536 180 19.1813 180 24.4468C180 29.7123 175.986 33.7332 171.264 33.7332ZM170.859 29.3571C173.423 29.3571 175.413 27.1867 175.413 24.4468C175.413 21.7427 173.423 19.537 170.859 19.537C168.228 19.537 166.137 21.7427 166.137 24.4468C166.137 27.1863 168.161 29.3571 170.859 29.3571Z" fill={bgColor} />
+    //   <path d="M12.4762 24.9524C19.3666 24.9524 24.9524 19.3666 24.9524 12.4762C24.9524 5.58578 19.3666 0 12.4762 0C5.58578 0 0 5.58578 0 12.4762C0 19.3666 5.58578 24.9524 12.4762 24.9524Z" fill={bgColor} />
+    //   <path d="M9.24136 13.9395H8.27869C7.92124 13.9395 7.57844 14.0815 7.32569 14.3343C7.07293 14.587 6.93094 14.9298 6.93094 15.2873V17.2126C6.93094 17.5701 7.07293 17.9129 7.32569 18.1656C7.57844 18.4184 7.92124 18.5604 8.27869 18.5604H9.24136C9.59881 18.5604 9.94161 18.4184 10.1944 18.1656C10.4471 17.9129 10.5891 17.5701 10.5891 17.2126V16.635H14.8249V17.2126C14.8249 17.5701 14.9669 17.9129 15.2196 18.1656C15.4724 18.4184 15.8152 18.5604 16.1726 18.5604H17.1353C17.4928 18.5604 17.8356 18.4184 18.0883 18.1656C18.3411 17.9129 18.4831 17.5701 18.4831 17.2126V15.2873C18.4831 14.9298 18.3411 14.587 18.0883 14.3343C17.8356 14.0815 17.4928 13.9395 17.1353 13.9395H16.1726C15.8152 13.9395 15.4724 14.0815 15.2196 14.3343C14.9669 14.587 14.8249 14.9298 14.8249 15.2873V15.4798H13.2846V9.31869H14.8249V9.51122C14.8249 9.86867 14.9669 10.2115 15.2196 10.4642C15.4724 10.717 15.8152 10.859 16.1726 10.859H17.1353C17.4928 10.859 17.8356 10.717 18.0883 10.4642C18.3411 10.2115 18.4831 9.86867 18.4831 9.51122V7.58587C18.4831 7.22843 18.3411 6.88562 18.0883 6.63287C17.8356 6.38012 17.4928 6.23812 17.1353 6.23812H16.1726C15.8152 6.23812 15.4724 6.38012 15.2196 6.63287C14.9669 6.88562 14.8249 7.22843 14.8249 7.58587V8.16348H10.5891V7.58587C10.5891 7.22843 10.4471 6.88562 10.1944 6.63287C9.94161 6.38012 9.59881 6.23812 9.24136 6.23812H8.27869C7.92124 6.23812 7.57844 6.38012 7.32569 6.63287C7.07293 6.88562 6.93094 7.22843 6.93094 7.58587V9.51122C6.93094 9.86867 7.07293 10.2115 7.32569 10.4642C7.57844 10.717 7.92124 10.859 8.27869 10.859H9.24136C9.59881 10.859 9.94161 10.717 10.1944 10.4642C10.4471 10.2115 10.5891 9.86867 10.5891 9.51122V9.31869H12.1294V15.4798H10.5891V15.2873C10.5891 14.9298 10.4471 14.587 10.1944 14.3343C9.94161 14.0815 9.59881 13.9395 9.24136 13.9395ZM9.4339 17.2126C9.4339 17.2637 9.41361 17.3127 9.37751 17.3488C9.3414 17.3849 9.29243 17.4052 9.24136 17.4052H8.27869C8.22762 17.4052 8.17865 17.3849 8.14254 17.3488C8.10644 17.3127 8.08615 17.2637 8.08615 17.2126V15.2873C8.08615 15.2362 8.10644 15.1872 8.14254 15.1511C8.17865 15.115 8.22762 15.0947 8.27869 15.0947H9.24136C9.29243 15.0947 9.3414 15.115 9.37751 15.1511C9.41361 15.1872 9.4339 15.2362 9.4339 15.2873V17.2126ZM15.9801 15.2873C15.9801 15.2362 16.0004 15.1872 16.0365 15.1511C16.0726 15.115 16.1216 15.0947 16.1726 15.0947H17.1353C17.1864 15.0947 17.2353 15.115 17.2715 15.1511C17.3076 15.1872 17.3278 15.2362 17.3278 15.2873V17.2126C17.3278 17.2637 17.3076 17.3127 17.2715 17.3488C17.2353 17.3849 17.1864 17.4052 17.1353 17.4052H16.1726C16.1216 17.4052 16.0726 17.3849 16.0365 17.3488C16.0004 17.3127 15.9801 17.2637 15.9801 17.2126V15.2873ZM15.9801 7.58587C15.9801 7.53481 16.0004 7.48583 16.0365 7.44973C16.0726 7.41362 16.1216 7.39333 16.1726 7.39333H17.1353C17.1864 7.39333 17.2353 7.41362 17.2715 7.44973C17.3076 7.48583 17.3278 7.53481 17.3278 7.58587V9.51122C17.3278 9.56229 17.3076 9.61126 17.2715 9.64737C17.2353 9.68347 17.1864 9.70376 17.1353 9.70376H16.1726C16.1216 9.70376 16.0726 9.68347 16.0365 9.64737C16.0004 9.61126 15.9801 9.56229 15.9801 9.51122V7.58587ZM9.4339 9.51122C9.4339 9.56229 9.41361 9.61126 9.37751 9.64737C9.3414 9.68347 9.29243 9.70376 9.24136 9.70376H8.27869C8.22762 9.70376 8.17865 9.68347 8.14254 9.64737C8.10644 9.61126 8.08615 9.56229 8.08615 9.51122V7.58587C8.08615 7.53481 8.10644 7.48583 8.14254 7.44973C8.17865 7.41362 8.22762 7.39333 8.27869 7.39333H9.24136C9.29243 7.39333 9.3414 7.41362 9.37751 7.44973C9.41361 7.48583 9.4339 7.53481 9.4339 7.58587V9.51122Z" fill={borderColor} />
+    // </svg>


Large blocks of commented-out code should be removed rather than kept in the codebase. If this old SVG implementation might be needed later, it should be kept in version control history instead. Keeping commented code reduces readability and maintainability.

Suggested change

// </svg>

Copilot · 2025-12-11T02:24:08Z

src/features/stories/modal/index.tsx

+          Erro ao carregar stories
+        </Text>
+        <Text color="text.secondary">{error?.message || "Tente novamente mais tarde"}</Text>
+        <Box
+          as="button"
+          px={6}
+          py={3}
+          bg="green.400"
+          color="white"
+          borderRadius="md"
+          fontWeight="semibold"
+          onClick={onClose}
+          _hover={{ bg: "green.500" }}
+        >
+          Fechar


Error messages are in Portuguese ("Erro ao carregar stories", "Tente novamente mais tarde", "Fechar"). For consistency with the rest of the codebase, verify that Portuguese is the intended language for user-facing messages, or consider internationalization if the application should support multiple languages.

src/services/getStories.ts

jpcmf · 2025-12-12T02:35:18Z

This pull request has been deployed to Vercel.

Latest commit:	`be36ce9`
✅ Preview:	https://skatehub-frontend-ldagtgrr7-joo-paulo-fricks-projects.vercel.app
🔍 Inspect:	https://vercel.com/joo-paulo-fricks-projects/skatehub-frontend/63pb9ELVKDZihXd5r1eYpxFiqpT5

View Workflow Logs

Copilot

Pull request overview

Copilot reviewed 16 out of 18 changed files in this pull request and generated 1 comment.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-12T02:37:37Z

src/features/stories/modal/index.tsx

+        console.warn("All stories ended");
+        onClose();
+      }}
+      onStoryEnd={(storyIndex: number) => {
+        console.warn("Story ended:", storyIndex);
+      }}


Console.warn statements should be removed before merging to production. These debugging statements can expose unnecessary information and clutter the console in production environments.

jpcmf added 12 commits December 6, 2025 22:44

feat: add getStories and getStoriesByUserId functions for story retri…

5d996bc

…eval

feat: add modal theme configuration for Chakra UI

d759211

feat: update Modal component to use modalTheme from lib/theme

ec41e86

feat: add hooks for story retrieval by user ID and general stories

0c2a968

feat: implement StoriesModal component for user story display

8910d52

feat: integrate story data retrieval in StoriesHome component

6c1e938

feat: refactor StoriesSwiper to utilize unique stories and improve mo…

587d231

…dal handling

fix: correct onClose prop usage in StoriesModal component

d0c77fb

feat: add react-insta-stories dependency for enhanced story functiona…

816b30f

…lity

feat: add @chakra-ui/anatomy dependency for improved component styling

e4836ed

fix: update next dependency to version 16.0.7 for improved stability

21ec9c2

feat: add lock file

caf3e6f

jpcmf self-assigned this Dec 7, 2025

jpcmf temporarily deployed to Preview December 7, 2025 02:03 Inactive

jpcmf requested a review from Copilot December 7, 2025 02:03

Copilot started reviewing on behalf of jpcmf December 7, 2025 02:04 View session

jpcmf added the deployed label Dec 7, 2025

Copilot AI reviewed Dec 7, 2025

View reviewed changes

jpcmf added 8 commits December 9, 2025 23:59

feat: add width to logo component

f8f474b

fix: remove unused React import from Footer component

d8a856a

fix: adjust margin in component

6fe0cb5

fix: enhance loading spinner

c2bdd78

fix: adjust margin in component

48c470b

feat: update logo

c462fe5

feat: add .zed to .gitignore

79ffb11

fix: change endPage variable to const

d3c9bec

jpcmf temporarily deployed to Preview December 10, 2025 03:04 Inactive

jpcmf added 3 commits December 10, 2025 00:06

fix: rename stories2 to stories for consistency

1bd3d72

fix: add optional chaining to prevent runtime errors

6b0ed86

feat: add loading and error handling to the component

b1092f6

jpcmf temporarily deployed to Preview December 10, 2025 03:18 Inactive

jpcmf added 2 commits December 10, 2025 22:39

fix: replace console.log with console.warn

c4fb935

fix: remove console.log

38461b6

jpcmf requested a review from Copilot December 11, 2025 01:46

jpcmf temporarily deployed to Preview December 11, 2025 01:46 Inactive

Copilot started reviewing on behalf of jpcmf December 11, 2025 01:47 View session

Copilot AI reviewed Dec 11, 2025

View reviewed changes

jpcmf added 5 commits December 10, 2025 23:11

refactor: simplify story types and centralize StoriesResponse definition

0fb163e

fix: add newline

7613bac

fix: replace console.log with console.warn

53cb116

fix: add error handling to getStories and getStoriesByUserId functions

9dff9f6

fix: remove unnecessary whitespace

4037efc

jpcmf temporarily deployed to Preview December 11, 2025 02:19 Inactive

jpcmf requested a review from Copilot December 11, 2025 02:19

Copilot started reviewing on behalf of jpcmf December 11, 2025 02:20 View session

Copilot AI reviewed Dec 11, 2025

View reviewed changes

jpcmf added 2 commits December 10, 2025 23:26

fix: update return type

e3af696

fix: standardize import statement quotes

be36ce9

jpcmf temporarily deployed to Preview December 12, 2025 02:34 Inactive

jpcmf requested a review from Copilot December 12, 2025 02:34

Copilot started reviewing on behalf of jpcmf December 12, 2025 02:35 View session

Copilot AI reviewed Dec 12, 2025

View reviewed changes

jpcmf merged commit 103ea5f into develop Dec 12, 2025
7 checks passed

jpcmf deleted the feat/user-stories branch December 12, 2025 03:19

-                  >
-                    <ChakraAvatar
-                      w="66px"
-                      h="66px"
-                      bgColor={story.isUserOffline ? bgUserAvatar : "green.300"}
-                      src={story?.image ? story.image : "https://robohash.org/" + story?.name}
-                      style={{ filter: story.isUserOffline ? `grayscale(100%)` : "none" }}
-                    />
+                    aria-label={`${story.name} (${story.isUserOffline ? "offline" : "online"})`}
+                  >
+                    <Box position="relative" display="inline-block">
+                      <ChakraAvatar
+                        w="66px"
+                        h="66px"
+                        bgColor={story.isUserOffline ? bgUserAvatar : "green.300"}
+                        src={story?.image ? story.image : "https://robohash.org/" + story?.name}
+                        style={{ filter: story.isUserOffline ? `grayscale(100%)` : "none" }}
+                        aria-label={`${story.name} (${story.isUserOffline ? "offline" : "online"})`}
+                      />
+                      {story.isUserOffline && (
+                        <Box
+                          position="absolute"
+                          bottom="4px"
+                          right="4px"
+                          boxSize="16px"
+                          bg="gray.500"
+                          borderRadius="full"
+                          border="2px solid"
+                          borderColor={bgColor}
+                          display="flex"
+                          alignItems="center"
+                          justifyContent="center"
+                          zIndex={1}
+                        >
+                          <Box
+                            as="span"
+                            width="8px"
+                            height="8px"
+                            borderRadius="full"
+                            bg="gray.300"
+                            display="block"
+                          />
+                        </Box>
+                      )}
+                    </Box>

	console.warn("Story ended:", storyIndex);
	// Story ended handler

Feat/user stories #131

Feat/user stories #131

Uh oh!

Conversation

jpcmf commented Dec 7, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Dec 7, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 7, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 7, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Dec 7, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jpcmf commented Dec 12, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Dec 12, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!