From 9d77519d8233456adb4f378e354ebe17a37b02db Mon Sep 17 00:00:00 2001
From: Paulo Pinto <paulo.pinto@automattic.com>
Date: Mon, 9 Sep 2024 17:31:05 +0100
Subject: [PATCH] Bootstrap flow for importing blog post

---
 src/ui/App.tsx                         |  8 +++++++-
 src/ui/flow/blog-post/BlogPostFlow.tsx |  3 +++
 src/ui/session/ViewSession.tsx         | 17 ++++++++++-------
 3 files changed, 20 insertions(+), 8 deletions(-)
 create mode 100644 src/ui/flow/blog-post/BlogPostFlow.tsx

diff --git a/src/ui/App.tsx b/src/ui/App.tsx
index 6cf4322c..a7ba0697 100644
--- a/src/ui/App.tsx
+++ b/src/ui/App.tsx
@@ -20,11 +20,14 @@ import { getSession, listSessions, Session } from '@/storage/session';
 import { PlaceholderPreview } from '@/ui/preview/PlaceholderPreview';
 import { SessionContext, SessionProvider } from '@/ui/session/SessionProvider';
 import { ApiClient } from '@/api/ApiClient';
+import { BlogPostFlow } from '@/ui/flow/blog-post/BlogPostFlow';
 
 export const Screens = {
 	home: () => '/start/home',
 	newSession: () => '/start/new-session',
-	viewSession: ( id: string ) => `/session/${ id }`,
+	viewSession: ( sessionId: string ) => `/session/${ sessionId }`,
+	flowBlogPost: ( sessionId: string ) =>
+		`/session/${ sessionId }/flow/blog-post`,
 };
 
 const homeLoader: LoaderFunction = async () => {
@@ -63,6 +66,9 @@ function Routes( props: { initialScreen: string } ) {
 				loader={ sessionLoader }
 			>
 				<Route path="" element={ <ViewSession /> } />
+				<Route path="flow">
+					<Route path="blog-post" element={ <BlogPostFlow /> } />
+				</Route>
 			</Route>
 		</Route>
 	);
diff --git a/src/ui/flow/blog-post/BlogPostFlow.tsx b/src/ui/flow/blog-post/BlogPostFlow.tsx
new file mode 100644
index 00000000..16424fee
--- /dev/null
+++ b/src/ui/flow/blog-post/BlogPostFlow.tsx
@@ -0,0 +1,3 @@
+export function BlogPostFlow() {
+	return <>hello</>;
+}
diff --git a/src/ui/session/ViewSession.tsx b/src/ui/session/ViewSession.tsx
index 4f6a1597..4bfef26f 100644
--- a/src/ui/session/ViewSession.tsx
+++ b/src/ui/session/ViewSession.tsx
@@ -1,6 +1,8 @@
 import { useSessionContext } from '@/ui/session/SessionProvider';
 import { Post } from '@/api/ApiClient';
 import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { Screens } from '@/ui/App';
 
 export function ViewSession() {
 	const { session, apiClient } = useSessionContext();
@@ -18,14 +20,15 @@ export function ViewSession() {
 
 	return (
 		<>
-			<div>view session: { session.id }</div>
-			{ apiClient?.siteUrl ? (
-				<div>url: { apiClient.siteUrl }</div>
-			) : null }
+			<h1>
+				{ session.title } ({ session.url })
+			</h1>
 			<ul>
-				{ posts.map( ( post ) => {
-					return <li key={ post.id }>{ post.title }</li>;
-				} ) }
+				<li>
+					<Link to={ Screens.flowBlogPost( session.id ) }>
+						Import Blog Post
+					</Link>
+				</li>
 			</ul>
 		</>
 	);