fix "Cannot read properties of undefined"

Author: maslianok

app/components/insights-carousel.tsx

@@ -57,7 +57,8 @@ const InsightsCarousel = () => {
       return;
     }
 
-    setCount(api.scrollSnapList().length);
+    const scrollSnapList = api.scrollSnapList();
+    setCount(scrollSnapList?.length ?? 0);
     setCurrent(api.selectedScrollSnap() + 1);
 
     api.on('select', () => {

app/profile/[login]/repositories/components/user-contributions-list.tsx

@@ -67,10 +67,10 @@ export const UserContributionsList: FC<UserContributionsListProps> = ({
           <TimelineItem key={contribution.year}>
             <TimelineTime>
               {contribution.year}
-              {contributionCount ? ` • ${contribution.data.length} repositories` : ''}
+              {contributionCount ? ` • ${contribution.data?.length ?? 0} repositories` : ''}
             </TimelineTime>
             <TimelineDescription>
-              {contribution.data.map((item) => (
+              {contribution.data?.map((item) => (
                 <ContributionRepositoryCard
                   key={item.repository?.name}
                   repository={item.repository}

app/profile/[login]/seo.ts

@@ -8,7 +8,7 @@ type DataType = NonNullable<PageProfileOverviewQuery['user']>;
 type LanguagesType = NonNullable<PageProfileLanguagesQuery['user']>['languages'];
 
 const clip = (t: string, max = 158) => {
-  if (t.length <= max) return t;
+  if (!t || t.length <= max) return t;
   const cut = t.slice(0, max - 1);
   const i = cut.lastIndexOf(' ');
   return `${i > 80 ? cut.slice(0, i) : cut}…`;

badge/templates/inline/inline.styles.tsx

@@ -32,18 +32,18 @@ const getCommonStyles = (backgroundColor: string) => ({
   textShadow: getTextShadow(backgroundColor),
 });
 
-export const getLabelStyles = (backgroundColor = LABEL_BG) => ({
-  ...getCommonStyles(backgroundColor),
+export const getLabelStyles = (backgroundColor?: string) => ({
+  ...getCommonStyles(backgroundColor ?? LABEL_BG),
   fontSize: `${FONT_SCALE}em`,
 });
 
-export const getValueStyles = (backgroundColor = VALUE_BG) => ({
-  ...getCommonStyles(backgroundColor),
+export const getValueStyles = (backgroundColor?: string) => ({
+  ...getCommonStyles(backgroundColor ?? VALUE_BG),
   fontSize: `${FONT_SCALE}em`,
 });
 
-export const getMetaStyles = (backgroundColor = VALUE_BG) => ({
-  ...getCommonStyles(backgroundColor),
+export const getMetaStyles = (backgroundColor?: string) => ({
+  ...getCommonStyles(backgroundColor ?? VALUE_BG),
   opacity: 0.9,
   fontSize: `${META_SCALE}em`,
   borderLeft: '1px solid rgba(255, 255, 255, 0.3)',

badge/utils/get-contrast-text-color.ts

@@ -1,4 +1,9 @@
 export function getContrastTextColor(bgColor: string): 'black' | 'white' {
+  // Handle undefined/null/empty values
+  if (!bgColor || typeof bgColor !== 'string') {
+    return 'black'; // Default to black text on white background
+  }
+
   // Remove '#' if present
   let hex = bgColor.replace('#', '');
 

badge/utils/get-latest-snapshot.ts

@@ -1,15 +1,18 @@
 import type { User } from '@/types/generated/graphql';
 
 export const getLatestSnapshot = (snapshots: User['snapshots']): User['snapshots'][string] | null => {
+  if (!snapshots || typeof snapshots !== 'object') {
+    return null;
+  }
+
   const dates = Object.keys(snapshots);
   if (!dates.length) {
     return null;
   }
 
   // Sort date strings ascending
-  const sortedDates = dates.sort((a, b) => new Date(a).getTime() - new Date(b).getTime());
-
-  const latestDate = sortedDates[sortedDates.length - 1];
+  const sortedDates = dates.toSorted((a, b) => new Date(a).getTime() - new Date(b).getTime());
 
-  return snapshots[latestDate];
+  const latestDate = sortedDates.at(-1);
+  return latestDate ? snapshots[latestDate] : null;
 };