Fix warnings and deprecated menu

Author: bensohh

apps/question-service/src/app/page.tsx

@@ -180,7 +180,7 @@ export default function Home() {
       dataIndex: "categories",
       key: "categories",
       render: (categories: string[]) =>
-        categories.map((category) => <Tag>{category}</Tag>),
+        categories.map((category) => <Tag key={category}>{category}</Tag>),
     },
     {
       title: "Difficulty",
@@ -363,6 +363,7 @@ export default function Home() {
             </div>
             <div className="content-table">
               <Table
+                rowKey="id"
                 dataSource={questions}
                 columns={columns}
                 loading={isLoading}

apps/question-service/src/app/question/[id]/page.tsx

@@ -10,6 +10,7 @@ import {
   Row,
   TableProps,
   Tag,
+  Select,
 } from "antd";
 import { Content } from "antd/es/layout/layout";
 import {
@@ -55,7 +56,7 @@ export default function Home() {
   const [complexity, setComplexity] = useState<string | undefined>(undefined);
   const [categories, setCategories] = useState<string[]>([]); // Store the selected filter categories
   const [description, setDescription] = useState<string | undefined>(undefined);
-  const [selectedItem, setSelectedItem] = useState("Python"); // State to hold the selected menu item
+  const [selectedItem, setSelectedItem] = useState("python"); // State to hold the selected language item
 
   // When code editor page is initialised, fetch the particular question, and display in code editor
   useEffect(() => {
@@ -71,25 +72,6 @@ export default function Home() {
     });
   }, [docRefId]);
 
-  // Function to handle the item selection
-  const handleMenuClick = (e: any) => {
-    const selected = ProgrammingLanguageOptions.find(
-      (item) => item.key === e.key
-    );
-    if (selected) {
-      setSelectedItem(selected.label);
-    }
-  };
-
-  // Menu component
-  const menu = (
-    <Menu onClick={handleMenuClick}>
-      {ProgrammingLanguageOptions.map((item) => (
-        <Menu.Item key={item.key}>{item.label}</Menu.Item>
-      ))}
-    </Menu>
-  );
-
   return (
     <div>
       {contextHolder}
@@ -179,13 +161,12 @@ export default function Home() {
                       <text className="language-text">
                         Select Language:&nbsp;
                       </text>
-                      <Dropdown
+                      <Select
                         className="select-language-button"
-                        overlay={menu}
-                        trigger={["click"]}
-                      >
-                        <Button>{selectedItem}</Button>
-                      </Dropdown>
+                        defaultValue={selectedItem}
+                        onSelect={(val) => setSelectedItem(val)}
+                        options={ProgrammingLanguageOptions}
+                      />
                     </div>
                   </div>
                   <div className="code-editor-code-div">

apps/question-service/src/app/question/[id]/styles.scss

@@ -164,7 +164,7 @@
 }
 
 .select-language-button {
-  // margin-left: 10px;
+  width: max-content;
 }
 
 .session-details-title {

apps/question-service/src/utils/SelectOptions.ts

@@ -127,15 +127,15 @@ export const OrderOption = [
 
 export const ProgrammingLanguageOptions = [
   {
-    key: "1",
+    value: "python",
     label: "Python",
   },
   {
-    key: "2",
+    value: "java",
     label: "Java",
   },
   {
-    key: "3",
+    value: "c++",
     label: "C++",
   },
 ];