🐛 fix readonly in Topic.tsx and Topics.tsx component (#412)

Zenika · Dec 14, 2022 · 0558fd4 · 0558fd4
1 parent bd7b435
commit 0558fd4
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 33 deletions.
diff --git a/src/components/atoms/Topic.tsx b/src/components/atoms/Topic.tsx
@@ -2,24 +2,14 @@ import { TopicItem } from "../../utils/types";
 
 type TopicType = "common" | "selected";
 
-type TopicRequiredProps = {
+type TopicProps = {
   type: TopicType;
   topic: TopicItem;
   key: string | number;
+  readOnly?: boolean;
+  callback?: (topic: TopicItem) => void;
 };
 
-type TopicOptionalProps =
-  | {
-      readOnly?: false;
-      callback: (topic: TopicItem) => void;
-    }
-  | {
-      readOnly: true;
-      callback?: never;
-    };
-
-export type TopicProps = TopicRequiredProps & TopicOptionalProps;
-
 const topicTypeClasses: Record<TopicType, string> = {
   common:
     "font-bold gradient-red-faded text-light-ultrawhite hover:shadow-xl hover:shadow-light-graybutton hover:dark:shadow-lg hover:dark:shadow-dark-radargrid",
@@ -33,7 +23,13 @@ const classes = {
   variant: topicTypeClasses,
 };
 
-const Topic = ({ type, topic, key, readOnly, callback }: TopicProps) => {
+const Topic = ({
+  type,
+  topic,
+  key,
+  callback,
+  readOnly = false,
+}: TopicProps) => {
   return (
     <div className="flex-inital py-2" key={`topic-${key}`}>
       <button

diff --git a/src/components/molecules/Topics.tsx b/src/components/molecules/Topics.tsx
@@ -4,35 +4,24 @@ import { i18nContext } from "../../utils/i18nContext";
 import { TopicItem } from "../../utils/types";
 import Topic from "../atoms/Topic";
 
-type TopicsRequiredProps = {
+type TopicsProps = {
   topics: TopicItem[];
   selectedTopics: string[];
   title: string;
   error?: boolean;
+  readOnly?: boolean;
+  addCallback?: (topic: TopicItem) => void;
+  removeCallback?: (topic: TopicItem) => void;
 };
 
-type TopicsOptionalProps =
-  | {
-      readOnly?: false;
-      addCallback: (topic: TopicItem) => void;
-      removeCallback: (topic: TopicItem) => void;
-    }
-  | {
-      readOnly: true;
-      addCallback?: never;
-      removeCallback?: never;
-    };
-
-export type TopicsProps = TopicsRequiredProps & TopicsOptionalProps;
-
 const Topics = ({
   topics,
   selectedTopics,
   error,
   title,
   addCallback,
   removeCallback,
-  readOnly,
+  readOnly = false,
 }: TopicsProps) => {
   const { t } = useContext(i18nContext);
 
@@ -62,9 +51,7 @@ const Topics = ({
                   ? () => removeCallback(topic)
                   : () => addCallback(topic)
               }
-              {...(readOnly && {
-                readonly: true,
-              })}
+              readOnly={readOnly}
             />
           );
         })}