Improve typings and simplify API

Author: timolins

example/pages/index.tsx

@@ -1,12 +1,13 @@
-import { NotionRenderer } from "react-notion";
+import { NotionRenderer, LoadPageChunkData } from "react-notion";
 import pageData from "../mock/page.json";
+
+const {
+  recordMap: { block: blockMap }
+} = pageData as LoadPageChunkData;
+
 const Home = () => (
-  <div style={{ maxWidth: 760, marginLeft: "auto", marginRight: "auto" }}>
-    <NotionRenderer
-      level={0}
-      blockMap={(pageData.recordMap.block as any) || []}
-      currentID={"79c956db-2466-4214-8f15-fcfbf12b14d3"}
-    />
+  <div style={{ maxWidth: 760, margin: "0 auto" }}>
+    <NotionRenderer blockMap={blockMap} />
   </div>
 );
 

src/block.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { LoadPageChunkData, DecorationType } from "./types";
+import { DecorationType, BlockMapType, BlockType } from "./types";
 import Asset from "./components/asset";
 import Code from "./components/code";
 
@@ -43,7 +43,7 @@ export const renderChildText = (properties: DecorationType[]) => {
 };
 
 interface Block {
-  block: LoadPageChunkData["recordMap"]["block"][""];
+  block: BlockType;
   level: number;
 }
 
@@ -130,7 +130,7 @@ export const Block: React.FC<Block> = props => {
 };
 
 interface ChildProps {
-  blockMap: LoadPageChunkData["recordMap"]["block"];
+  blockMap: BlockMapType;
   level: number;
   ids: string[];
 }
@@ -235,26 +235,29 @@ export const Child: React.FC<ChildProps> = props => {
 };
 
 interface NotionProps {
-  blockMap: LoadPageChunkData["recordMap"]["block"];
-  currentID: string;
-  level: number;
+  blockMap: BlockMapType;
+  currentID?: string;
+  level?: number;
 }
 
-export const NotionRenderer: React.FC<NotionProps> = props => {
-  const currentBlock = props.blockMap[props.currentID];
+export const NotionRenderer: React.FC<NotionProps> = ({
+  level = 0,
+  currentID,
+  blockMap
+}) => {
+  const id = currentID || Object.keys(blockMap)[0];
+  const currentBlock = blockMap[id];
 
-  const renderChildren = !(
-    currentBlock?.value?.type === "page" && props.level > 0
-  );
+  const renderChildren = !(currentBlock?.value?.type === "page" && level > 0);
 
   return (
     <>
-      <Block level={props.level} block={currentBlock} />
+      <Block level={level} block={currentBlock} />
       {currentBlock?.value?.content && renderChildren && (
         <Child
-          level={props.level}
+          level={level}
           ids={currentBlock?.value?.content}
-          blockMap={props.blockMap}
+          blockMap={blockMap}
         />
       )}
     </>

src/index.tsx

@@ -1 +1,2 @@
 export { NotionRenderer } from "./block";
+export * from "./types";

src/types.ts

@@ -160,7 +160,7 @@ export interface ContentValueType extends BaseValueType {
     block_aspect_ratio: number;
     block_preserve_scale: boolean;
   };
-  file_ids: string[];
+  file_ids?: string[];
 }
 
 interface ImageValueType extends ContentValueType {
@@ -216,9 +216,8 @@ export interface NotionUserType {
     given_name: string;
     family_name: string;
     profile_photo: string;
-    onboarding_complete: boolean;
-    mobile_onboarding_complete: boolean;
-    clipper_onboarding_complete: boolean;
+    onboarding_completed: boolean;
+    mobile_onboarding_completed: boolean;
   };
 }
 
@@ -231,6 +230,8 @@ export interface RecordMapType {
   };
 }
 
+export type BlockMapType = LoadPageChunkData["recordMap"]["block"];
+
 export interface LoadPageChunkData {
   recordMap: RecordMapType;
   cursor: {