From 9824d2ba31dc0cb0e3789e0f4269d58e602e0a1c Mon Sep 17 00:00:00 2001 From: ransurf Date: Sun, 10 Oct 2021 21:08:13 -0700 Subject: [PATCH] Attempt to implement settings syncing --- ReactView.tsx | 8 +++++--- main.ts | 6 +++++- view.ts => old_view.ts | 4 +++- package.json | 3 +++ settings.ts | 26 ++++++++++++++++++++++++++ styles.css | 23 ++++++++++++++++++++++- tsconfig.json | 2 +- view.tsx | 34 ++++++++++++++++++++++++++++++++++ view/App.tsx | 10 +++++++--- view/TodoItem.tsx | 12 ++++++++++++ 10 files changed, 118 insertions(+), 10 deletions(-) rename view.ts => old_view.ts (86%) create mode 100644 view.tsx create mode 100644 view/TodoItem.tsx diff --git a/ReactView.tsx b/ReactView.tsx index e924dac..9f1a877 100644 --- a/ReactView.tsx +++ b/ReactView.tsx @@ -1,6 +1,8 @@ import * as React from "react"; import App from "./view/App"; -export const ReactView = () => { - return ; -}; \ No newline at end of file +export default function ReactView(props: any){ + return( + + ) +} \ No newline at end of file diff --git a/main.ts b/main.ts index f701dd2..41dd419 100644 --- a/main.ts +++ b/main.ts @@ -4,9 +4,13 @@ import { ExampleView, VIEW_TYPE_EXAMPLE} from "./view" interface ExamplePluginSettings { dateFormat: string + userID: string + apiToken: string } const DEFAULT_SETTINGS: Partial = { - dateFormat: "YYYY-MM-DD" + dateFormat: "YYYY-MM-DD", + userID: "", + apiToken: "" } export default class ExamplePlugin extends Plugin { settings: ExamplePluginSettings; diff --git a/view.ts b/old_view.ts similarity index 86% rename from view.ts rename to old_view.ts index d54ef70..40e34a4 100644 --- a/view.ts +++ b/old_view.ts @@ -1,12 +1,14 @@ import { ItemView,WorkspaceLeaf } from "obsidian"; import * as React from "react"; import * as ReactDOM from "react-dom"; -import { ReactView } from "./ReactView"; +import ReactView from "./ReactView"; +import ExamplePlugin from "main"; export const VIEW_TYPE_EXAMPLE = "example-view" export class ExampleView extends ItemView { + plugin: ExamplePlugin; constructor(leaf: WorkspaceLeaf) { super(leaf) } diff --git a/package.json b/package.json index 69984fe..27eb3d7 100644 --- a/package.json +++ b/package.json @@ -17,8 +17,11 @@ "@types/node": "^14.14.37", "@types/react": "^17.0.27", "@types/react-dom": "^17.0.9", + "css-loader": "^6.4.0", + "extract-text-webpack-plugin": "^2.1.2", "obsidian": "^0.12.0", "rollup": "^2.32.1", + "style-loader": "^3.3.0", "tslib": "^2.2.0", "typescript": "^4.2.4" }, diff --git a/settings.ts b/settings.ts index 8d40205..7142164 100644 --- a/settings.ts +++ b/settings.ts @@ -26,5 +26,31 @@ export class ExampleSettingsTab extends PluginSettingTab { await this.plugin.saveSettings(); }) ); + + new Setting(containerEl) + .setName("Habitica User ID") + .setDesc("Can be found in Settings > API") + .addText((text) => + text + .setPlaceholder("User ID") + .setValue(this.plugin.settings.userID) + .onChange(async (value) => { + this.plugin.settings.userID = value; + await this.plugin.saveSettings(); + }) + ); + + new Setting(containerEl) + .setName("Habitica API Token") + .setDesc("Can be found in Settings > API") + .addText((text) => + text + .setPlaceholder("API Token") + .setValue(this.plugin.settings.apiToken) + .onChange(async (value) => { + this.plugin.settings.apiToken = value; + await this.plugin.saveSettings(); + }) + ); } } \ No newline at end of file diff --git a/styles.css b/styles.css index 39694e4..5428488 100644 --- a/styles.css +++ b/styles.css @@ -11,4 +11,25 @@ .book__author { color: var(--text-muted); - } \ No newline at end of file + } + +.todo-item { + display: flex; + justify-content: flex-start; + align-items: center; + padding: 0px 0px 0; + width: 80%; + border-bottom: 1px solid #cecece; + font-family: Roboto, sans-serif; + font-weight: normal; + font-size: 16px; + color: #ffffff; +} + +input[type=checkbox] { + margin-right: 10px; +} + +input[type=checkbox]:focus { + outline: 0; +} \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 4968d9a..3846256 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -19,5 +19,5 @@ }, "include": [ "**/*.ts" - ] +, "view/TodoItem.tsx" ] } diff --git a/view.tsx b/view.tsx new file mode 100644 index 0000000..fd9ae59 --- /dev/null +++ b/view.tsx @@ -0,0 +1,34 @@ +import { ItemView,WorkspaceLeaf } from "obsidian"; +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import ReactView from "./ReactView"; +import ExamplePlugin from "main"; + + +export const VIEW_TYPE_EXAMPLE = "example-view" + +export class ExampleView extends ItemView { + plugin: ExamplePlugin; + constructor(leaf: WorkspaceLeaf) { + super(leaf) + console.log(this.plugin.settings) } + + getViewType() { + return VIEW_TYPE_EXAMPLE + } + + getDisplayText() { + return "Example View" + } + + async onOpen() { + ReactDOM.render( + , + this.containerEl.children[1] + ) + } + + async onClose(){ + ReactDOM.unmountComponentAtNode(this.containerEl.children[1]); + } +} \ No newline at end of file diff --git a/view/App.tsx b/view/App.tsx index 6eb0814..0bf80f9 100644 --- a/view/App.tsx +++ b/view/App.tsx @@ -1,12 +1,15 @@ import * as React from "react"; import { getTasks } from "./habiticaAPI" +import TodoItem from "./TodoItem" -const username = "" -const credentials = "" +let username = "" +let credentials = "" class App extends React.Component { constructor(props: any) { super(props) + username = this.props.username + credentials = this.props.apiToken this.state = { isLoaded: false, tasks: "" @@ -40,7 +43,8 @@ class App extends React.Component { return
Loading...
; } else { const listItems = tasks.map((tasks: any) => -
  • {tasks.text}
    • + + ); return (
      {listItems}
    diff --git a/view/TodoItem.tsx b/view/TodoItem.tsx new file mode 100644 index 0000000..84a5415 --- /dev/null +++ b/view/TodoItem.tsx @@ -0,0 +1,12 @@ + import * as React from "react"; + +function TodoItem(props: any) { + return ( +
    + +

    {props.task.text}

    +
    + ) +} + +export default TodoItem \ No newline at end of file