add small groups

src/components/TopicSelector/components/TopicList/index.tsx

@@ -18,11 +18,11 @@ function TopicList({ onSelectTopic }: Readonly<TProps>) {
       display: "grid",
       margin: 0,
       padding: 0,
-      gridTemplateColumns: "repeat(1, 1fr)",
+      gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
       gridGap: "10px",
     }}
     >
-      {TOPICS.map((topic) => (
+      {TOPICS.map((topic, index) => (
         <li key={`${topic.id}_${topic.name}`}>
           <button
             type="button"
@@ -32,7 +32,11 @@ function TopicList({ onSelectTopic }: Readonly<TProps>) {
             }}
             onClick={() => handleOnClick(topic.id)}
           >
-            <span>{topic.name}</span>
+            <span>
+              {index}
+              -
+              {topic.name}
+            </span>
             <span
               style={{
                 marginLeft: "8px",

src/constants/topics.ts

@@ -1,4 +1,7 @@
 import { TQuestions } from "../types/question";
+import { createTopicsMap } from "../utils/create-topics-map";
+import { mergeTopicMaps } from "../utils/merge-topic-maps";
+import { splitQuestions } from "../utils/split-questions";
 import {
   questions1,
   questions2,
@@ -18,17 +21,19 @@ export type TTopic = {
   questions: TQuestions[];
 };
 
-export const TOPICS_MAP: Map<number, TTopic> = new Map([
-  [1, { id: 1, name: "Группа-1", questions: questions1 }],
-  [2, { id: 2, name: "Группа-2", questions: questions2 }],
-  [3, { id: 3, name: "Группа-3", questions: questions3 }],
-  [4, { id: 4, name: "Группа-4", questions: questions4 }],
-  [5, { id: 5, name: "Группа-5", questions: questions5 }],
-  [6, { id: 6, name: "Группа-6", questions: questions6 }],
-  [7, { id: 7, name: "Группа-7", questions: questions7 }],
-  [8, { id: 8, name: "Группа-8", questions: questions8 }],
-  [9, { id: 9, name: "Группа-9", questions: questions9 }],
-  [10, { id: 10, name: "Группа-10", questions: questions10 }],
-]);
+const topicsMaps = [
+  questions1,
+  questions2,
+  questions3,
+  questions4,
+  questions5,
+  questions6,
+  questions7,
+  questions8,
+  questions9,
+  questions10,
+].map((questions, index) => createTopicsMap(splitQuestions(questions), index + 1));
+
+export const TOPICS_MAP = mergeTopicMaps(...topicsMaps);
 
 export const TOPICS = Array.from(TOPICS_MAP.values());

src/utils/create-topics-map.ts

@@ -0,0 +1,22 @@
+import { TTopic } from "../constants/topics";
+import { TQuestions } from "../types/question";
+
+export const createTopicsMap = (groupedQuestions: Array<Array<TQuestions>>, group: number)
+: Map<number, TTopic> => {
+  const topicsMap = new Map<number, TTopic>();
+
+  groupedQuestions.forEach((questionsGroup, index) => {
+    const topicId = index + 1;
+    // Формирование уникального ключа с учетом group
+    const topicKey = group * 100 + topicId;
+    const topicName = `Группа-${group}-${topicId}`;
+
+    topicsMap.set(topicKey, {
+      id: topicKey,
+      name: topicName,
+      questions: questionsGroup,
+    });
+  });
+
+  return topicsMap;
+};

src/utils/merge-topic-maps.ts

@@ -0,0 +1,15 @@
+import { TTopic } from "../constants/topics";
+
+export const mergeTopicMaps = (
+  ...maps: Array<Map<number, TTopic>>
+): Map<number, TTopic> => {
+  const mergedMap = new Map<number, TTopic>();
+
+  maps.forEach((map) => {
+    map.forEach((value, key) => {
+      mergedMap.set(key, value);
+    });
+  });
+
+  return mergedMap;
+};

src/utils/split-questions.ts

@@ -0,0 +1,12 @@
+import { TQuestions } from "../types/question";
+
+const CHUNK_SIZE = 20;
+
+export const splitQuestions = (questions: Array<TQuestions>): Array<Array<TQuestions>> => {
+  const result: Array<Array<TQuestions>> = [];
+  for (let i = 0; i < questions.length; i += CHUNK_SIZE) {
+    const chunk = questions.slice(i, i + CHUNK_SIZE);
+    result.push(chunk);
+  }
+  return result;
+};