Update after review

Author: vladaskorohodova

Angular/src/app/app.component.html

@@ -18,7 +18,7 @@
   </dx-pagination>
   <div id="cards">
     <ng-container *ngFor="let color of visibleCards">
-      <img [src]="color.image" [alt]="color.name" />
+      <img [src]="color.image.bare" [alt]="color.name.value" />
     </ng-container>
   </div>
 </div>

Angular/src/app/app.component.scss

@@ -1,3 +1,8 @@
+#container {
+  margin: 50px;
+  width: 90vh;
+}
+
 #cards {
   display: flex;
   justify-content: center;

Angular/src/app/app.component.ts

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import { Component } from '@angular/core';
 import { firstValueFrom } from 'rxjs';
 import { ColorService, Color } from './app.service';
@@ -14,7 +13,9 @@ export class AppComponent {
 
   total = 100;
 
-  colors: Color[] = [];
+  colors: Map<string, Color> = new Map();
+
+  hexCodes: string[] = [];
 
   visibleCards: Color[] = [];
 
@@ -25,44 +26,55 @@ export class AppComponent {
   constructor(private readonly colorService: ColorService) {}
 
   ngOnInit(): void {
-    // eslint-disable-next-line no-void
-    void this.generateColors();
+    this.generateHexCodes();
+    this.updateVisibleCards();
   }
 
-  async generateColors(): Promise<void> {
-    this.loadPanelVisible = true;
-    const promises: Promise<any>[] = [];
-
+  generateHexCodes(): void {
     for (let i = 0; i < this.total; i++) {
-      const hex = this.colorService.getRandomPastelColor();
-      const promise = firstValueFrom(
-        this.colorService.fetchColorData(hex),
-      ).then((data) => ({ name: data.name.value, image: data.image.bare }));
-
-      promises.push(promise);
+      this.hexCodes.push(this.colorService.getRandomPastelColor());
     }
+  }
+
+  async fetchColorsForPage(): Promise<void> {
+    const startIndex = (this.pageIndex - 1) * this.pageSize;
+    const endIndex = this.pageIndex * this.pageSize;
+    const hexSubset = this.hexCodes.slice(startIndex, endIndex);
 
+    const promises: Promise<Color>[] = hexSubset.map((hex) => {
+      if (this.colors.has(hex)) {
+        return Promise.resolve(this.colors.get(hex)!);
+      } else {
+        return firstValueFrom(this.colorService.fetchColorData(hex)).then((data) => {
+          const colorData: Color = data;
+          this.colors.set(hex, colorData);
+          return colorData;
+        });
+      }
+    });
+
+    this.loadPanelVisible = true;
     try {
-      this.colors = await Promise.all(promises);
+      const fetchedColors = await Promise.all(promises);
+      this.visibleCards = fetchedColors;
     } catch (error) {
-      console.error('Error generating colors:', error);
+      console.error('Error fetching colors:', error);
     } finally {
-      this.setVisibleCards();
       this.loadPanelVisible = false;
     }
   }
 
   onPageIndexChange(val: number): void {
     this.pageIndex = val;
-    this.setVisibleCards();
+    void this.fetchColorsForPage();
   }
 
   onPageSizeChange(val: number): void {
     this.pageSize = val;
-    this.setVisibleCards();
+    void this.fetchColorsForPage();
   }
 
-  setVisibleCards(): void {
-    this.visibleCards = this.colors.slice((this.pageIndex - 1) * this.pageSize, this.pageIndex * this.pageSize);
+  updateVisibleCards(): void {
+    void this.fetchColorsForPage();
   }
 }

React/src/App.tsx

@@ -17,62 +17,62 @@ interface Color {
 }
 
 function App(): JSX.Element {
-  const isMounted = useRef(false);
   const [loadPanelVisible, setLoadPanelVisible] = useState<boolean>(false);
   const [pageSize, setPageSize] = useState<number>(5);
   const [pageIndex, setPageIndex] = useState<number>(3);
-  const [colors, setColors] = useState<Color[]>([]);
   const [visibleCards, setVisibleCards] = useState<Color[]>([]);
 
-  const getVisibleCards = useCallback((currentPageIndex: number, currentPageSize: number): void => {
-    const startIndex = (currentPageIndex - 1) * currentPageSize;
-    const endIndex = startIndex + currentPageSize;
-    const pageColors = colors.slice(startIndex, endIndex);
-    setVisibleCards(pageColors);
-    setLoadPanelVisible(false);
-  }, [colors, visibleCards]);
+  const hexCodes = useRef<string[]>([]);
+  const colorsCache = useRef<Map<string, Color>>(new Map());
 
-  const generateColors = useCallback(async (total: number): Promise<void> => {
-    setLoadPanelVisible(true);
-    const promises: Promise<Color | null>[] = [];
+  useEffect(() => {
     for (let i = 0; i < total; i++) {
-      const hex = getRandomPastelColor();
-      promises.push(fetchColorData(hex));
+      hexCodes.current.push(getRandomPastelColor());
     }
+  }, []);
+
+  const fetchColorsForPage = useCallback(async (): Promise<void> => {
+    setLoadPanelVisible(true);
+    const startIndex = (pageIndex - 1) * pageSize;
+    const endIndex = startIndex + pageSize;
+    const hexSubset = hexCodes.current.slice(startIndex, endIndex);
+
+    const promises = hexSubset.map((hex) => {
+      if (colorsCache.current.has(hex)) {
+        return Promise.resolve(colorsCache.current.get(hex));
+      }
+      return fetchColorData(hex).then((color) => {
+        if (color) {
+          colorsCache.current.set(hex, color);
+        }
+        return color;
+      });
+    });
 
     try {
       const results = await Promise.all(promises);
       const filteredColors = results.filter((color): color is Color => color !== null);
-      setColors(filteredColors);
+      setVisibleCards(filteredColors);
     } catch (error) {
-      console.error('Error generating colors:', error);
+      console.error('Error fetching colors:', error);
+    } finally {
+      setLoadPanelVisible(false);
     }
-  }, [total]);
+  }, [pageIndex, pageSize]);
 
   const onPageIndexChange = useCallback((value: number) => {
     setPageIndex(value);
-    getVisibleCards(value, pageSize);
-  }, [pageSize, getVisibleCards]);
+  }, []);
 
   const onPageSizeChange = useCallback((value: number) => {
     setPageSize(value);
-    getVisibleCards(pageIndex, value);
-  }, [pageIndex, getVisibleCards]);
-
-  useEffect(() => {
-    if (!isMounted.current) {
-      isMounted.current = true; // Mark as mounted
-      generateColors(total).catch((error) => {
-        console.error('Error initializing colors:', error);
-      });
-    }
   }, []);
 
   useEffect(() => {
-    if (colors.length > 0) {
-      getVisibleCards(pageIndex, pageSize);
-    }
-  }, [colors]);
+    fetchColorsForPage().catch((error) => {
+      console.error('Error updating visible cards:', error);
+    });
+  }, [fetchColorsForPage]);
 
   return (
     <div className="main">
@@ -94,8 +94,8 @@ function App(): JSX.Element {
         onPageSizeChange={onPageSizeChange}
       />
       <div id="cards">
-        {visibleCards.map((color) => (
-          <div key={color.name}>
+        {visibleCards.map((color, index) => (
+          <div key={index}>
             <img src={color.image} alt={color.name} />
           </div>
         ))}

Vue/src/components/HomeContent.vue

@@ -1,24 +1,22 @@
 <template>
   <div class="container">
     <DxLoadPanel
-    v-model:visible="loadPanelVisible"
-    :show-indicator="true"
-    :show-pane="true"
-    :hide-on-outside-click="false"
+      v-model:visible="loadPanelVisible"
+      :show-indicator="true"
+      :show-pane="true"
+      :hide-on-outside-click="false"
     >
-    <DxPosition 
-      my="top" at="top" of="#cards"
-    />
+      <DxPosition my="top" at="top" of="#cards" />
     </DxLoadPanel>
     <DxPagination
-    :show-info="true"
-    :show-navigation-buttons="true"
-    v-model:page-index="pageIndex"
-    v-model:page-size="pageSize"
-    :item-count="total"
-    @update:page-index="onPageIndexChange"
-    @update:page-size="onPageSizeChange"
-  />
+      :show-info="true"
+      :show-navigation-buttons="true"
+      v-model:page-index="pageIndex"
+      v-model:page-size="pageSize"
+      :item-count="total"
+      @update:page-index="onPageIndexChange"
+      @update:page-size="onPageSizeChange"
+    />
     <div id="cards">
       <div v-for="color in visibleCards" :key="color.name">
         <img :src="color.image" :alt="color.name" />
@@ -42,39 +40,59 @@ interface Color {
 const total = 100;
 const pageSize = ref(5);
 const pageIndex = ref(3);
-const colors = ref([] as Color[]);
 const loadPanelVisible = ref(false);
 const visibleCards = ref([] as Color[]);
 
-const generateColors = async () => {
-  loadPanelVisible.value = true;
-  const promises = [];
+const hexCodes = ref<string[]>([]);
+const colorCache = new Map<string, Color>();
+
+const generateHexCodes = () => {
   for (let i = 0; i < total; i++) {
-    const hex = getRandomPastelColor();
-    promises.push(fetchColorData(hex));
+    hexCodes.value.push(getRandomPastelColor());
   }
-  const results = await Promise.all(promises);
-  colors.value = results.filter((color): color is Color => color !== null);
-  loadPanelVisible.value = false;
-  getVisibleCards(pageIndex.value, pageSize.value);
 };
 
-const getVisibleCards = (pageIndex: number, pageSize: number) => {
-  visibleCards.value = colors.value.slice((pageIndex - 1) * pageSize, pageIndex * pageSize);
-}
+const fetchColorsForPage = async () => {
+  loadPanelVisible.value = true;
+  const startIndex = (pageIndex.value - 1) * pageSize.value;
+  const endIndex = startIndex + pageSize.value;
+  const hexSubset = hexCodes.value.slice(startIndex, endIndex);
+
+  const promises = hexSubset.map((hex) => {
+    if (colorCache.has(hex)) {
+      return Promise.resolve(colorCache.get(hex));
+    }
+    return fetchColorData(hex).then((color) => {
+      if (color) {
+        colorCache.set(hex, color);
+      }
+      return color;
+    });
+  });
+
+  try {
+    const results = await Promise.all(promises);
+    visibleCards.value = results.filter((color): color is Color => color !== null);
+  } catch (error) {
+    console.error('Error fetching colors:', error);
+  } finally {
+    loadPanelVisible.value = false;
+  }
+};
 
 const onPageIndexChange = (value: number) => {
   pageIndex.value = value;
-  getVisibleCards(pageIndex.value, pageSize.value);
-}
+  fetchColorsForPage();
+};
 
 const onPageSizeChange = (value: number) => {
   pageSize.value = value;
-  getVisibleCards(pageIndex.value, pageSize.value);
-}
+  fetchColorsForPage();
+};
 
 onMounted(() => {
-  generateColors();
+  generateHexCodes();
+  fetchColorsForPage();
 });
 </script>
 
@@ -84,4 +102,4 @@ onMounted(() => {
   justify-content: center;
   flex-wrap: wrap;
 }
-</style>
+</style>

jQuery/src/index.css

@@ -1,3 +1,8 @@
+#container {
+    margin: 50px;
+    width: 90vh;
+}
+
 #cards {
     display: flex;
     justify-content: center;