From 94e34eda3a5123894f26ab2d5dd095b1d77d2995 Mon Sep 17 00:00:00 2001
From: Ozan Tellioglu <me@ozan.pl>
Date: Sun, 26 Nov 2023 21:21:31 +0100
Subject: [PATCH] React Upgrade

---
 package.json                | 9 ++++-----
 src/components/calendar.tsx | 2 +-
 src/components/noteList.tsx | 1 +
 src/view.tsx                | 8 +++++---
 4 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index f8e636c..d17c73c 100644
--- a/package.json
+++ b/package.json
@@ -14,9 +14,9 @@
 	"devDependencies": {
 		"@types/common-tags": "^1.8.1",
 		"@types/node": "^16.11.6",
-		"@types/react": "17.0.2",
+		"@types/react": "18.2.38",
 		"@types/react-calendar": "^3.9.0",
-		"@types/react-dom": "17.0.2",
+		"@types/react-dom": "18.2.17",
 		"@typescript-eslint/eslint-plugin": "5.29.0",
 		"@typescript-eslint/parser": "5.29.0",
 		"builtin-modules": "3.3.0",
@@ -30,10 +30,9 @@
 		"@popperjs/core": "^2.11.6",
 		"common-tags": "^1.8.2",
 		"dayjs": "1.11.7",
-		"preact": "10",
-		"react": "npm:@preact/compat@17.0.2",
+		"react": "18.2.0",
 		"react-calendar": "4.0.0",
-		"react-dom": "npm:@preact/compat@17.0.2",
+		"react-dom": "18.2.0",
 		"react-icons": "4.8.0"
 	}
 }
diff --git a/src/components/calendar.tsx b/src/components/calendar.tsx
index 695219f..dc953c3 100644
--- a/src/components/calendar.tsx
+++ b/src/components/calendar.tsx
@@ -78,7 +78,7 @@ export default function MyCalendar(params: { plugin: OZCalendarPlugin }) {
 			return (
 				<div className="dots-wrapper">
 					{[...Array(Math.min(dotsCount, 2))].map((_, index) => (
-						<RxDotFilled viewBox="0 0 15 15" />
+						<RxDotFilled key={index} viewBox="0 0 15 15" />
 					))}
 					{dotsCount > 2 && <span>+{dotsCount - 2}</span>}
 				</div>
diff --git a/src/components/noteList.tsx b/src/components/noteList.tsx
index eb7ee11..4f12b8c 100644
--- a/src/components/noteList.tsx
+++ b/src/components/noteList.tsx
@@ -132,6 +132,7 @@ export default function NoteListComponent(params: NoteListComponentParams) {
 									: '')
 							}
 							id={notePath}
+							key={notePath}
 							onClick={(e) => openFilePath(e, notePath)}
 							onContextMenu={(e) => triggerFileContextMenu(e, notePath)}>
 							<HiOutlineDocumentText className="oz-calendar-note-line-icon" />
diff --git a/src/view.tsx b/src/view.tsx
index 0172a64..ce5b122 100644
--- a/src/view.tsx
+++ b/src/view.tsx
@@ -1,8 +1,8 @@
 import { ItemView, WorkspaceLeaf } from 'obsidian';
 import React from 'react';
-import ReactDOM from 'react-dom';
 import OZCalendarPlugin from './main';
 import MyCalendar from './components/calendar';
+import { createRoot, Root } from 'react-dom/client'; 
 
 export const VIEW_TYPE = 'oz-calendar';
 export const VIEW_DISPLAY_TEXT = 'OZ Calendar';
@@ -10,6 +10,7 @@ export const ICON = 'OZCAL_ICON';
 
 export class OZCalendarView extends ItemView {
 	plugin: OZCalendarPlugin;
+	root: Root;
 
 	constructor(leaf: WorkspaceLeaf, plugin: OZCalendarPlugin) {
 		super(leaf);
@@ -33,11 +34,12 @@ export class OZCalendarView extends ItemView {
 	}
 
 	destroy() {
-		ReactDOM.unmountComponentAtNode(this.contentEl);
+		if (this.root) this.root.unmount();
 	}
 
 	async onOpen() {
 		this.destroy();
-		ReactDOM.render(<MyCalendar plugin={this.plugin} />, this.contentEl);
+		this.root = createRoot(this.contentEl)
+		this.root.render(<MyCalendar plugin={this.plugin} />);
 	}
 }