modularize renderer (#552)

src/components/markdown-renderer/utils/use-post-meta-data-on-change.ts

@@ -0,0 +1,29 @@
+import equal from 'fast-deep-equal'
+import { useEffect, useRef } from 'react'
+import { RawYAMLMetadata, YAMLMetaData } from '../../editor/yaml-metadata/yaml-metadata'
+
+export const usePostMetaDataOnChange = (
+  rawMetaRef: RawYAMLMetadata|undefined,
+  firstHeadingRef: string|undefined,
+  onMetaDataChange?: (yamlMetaData: YAMLMetaData | undefined) => void,
+  onFirstHeadingChange?: (firstHeading: string | undefined) => void
+): void => {
+  const oldMetaRef = useRef<RawYAMLMetadata>()
+  const oldFirstHeadingRef = useRef<string>()
+
+  useEffect(() => {
+    if (onMetaDataChange && !equal(oldMetaRef.current, rawMetaRef)) {
+      if (rawMetaRef) {
+        const newMetaData = new YAMLMetaData(rawMetaRef)
+        onMetaDataChange(newMetaData)
+      } else {
+        onMetaDataChange(undefined)
+      }
+      oldMetaRef.current = rawMetaRef
+    }
+    if (onFirstHeadingChange && !equal(firstHeadingRef, oldFirstHeadingRef.current)) {
+      onFirstHeadingChange(firstHeadingRef || undefined)
+      oldFirstHeadingRef.current = firstHeadingRef
+    }
+  })
+}