make it right

doordesk/src/components/Blog.tsx

@@ -1,15 +1,21 @@
 import { Component }  from 'react'
-import BlogPost from './BlogPost.tsx'
+import BlogPost from './BlogPost.js'
 
-class Blog extends Component {
-    constructor(props) {
+interface IBlogProps {
+}
+
+interface IBlogState {
+}
+
+class Blog extends Component<IBlogProps, IBlogState> {
+    constructor(props: IBlogProps) {
         super(props)
     }
     render() {
         return (
             <>
-                <BlogPost post='blog/20220506-change.html' />
-                <BlogPost post='blog/000000000-swim.html' />
+                <BlogPost postURL='blog/20220506-change.html' />
+                <BlogPost postURL='blog/000000000-swim.html' />
             </>
         )
     }

doordesk/src/components/BlogPost.tsx

@@ -1,28 +1,38 @@
-import { Component }  from 'react'
+import { Component } from 'react'
 import ReactMarkdown from 'react-markdown'
 import rehypeRaw from 'rehype-raw'
 
-class BlogPost extends Component {
-    constructor(props) {
+interface IBlogPostProps {
+    postURL: string;
+}
+
+interface IBlogPostState {
+    postHTML: string;
+}
+
+class BlogPost extends Component<IBlogPostProps, IBlogPostState> {
+    constructor(props: IBlogPostProps) {
         super(props)
         this.state = {
-            'post': ''
+            'postHTML': ''
         }
     }
-    async getPost(post) {
+    async getPost(post: string) {
         return fetch(post)
             .then((res) => res.text())
     }
-    componentDidMount(props) {
-        this.getPost(this.props.post)
-            .then((text) => this.setState({ post: text }))
+    componentDidMount() {
+        this.getPost(this.props.postURL)
+            .then((text) => this.setState({ postHTML: text }))
 
     }
     render() {
         return (
             <div className="content-container">
                 <div className="content">
-                    <ReactMarkdown rehypePlugins={[rehypeRaw]} children={this.state.post} />
+                    <ReactMarkdown
+                        rehypePlugins={[rehypeRaw]}
+                        children={this.state.postHTML} />
                 </div>
             </div>
         )