feat: welcome screen

.eslintrc.js

@@ -38,6 +38,7 @@ module.exports = {
     },
   },
   rules: {
+    '@typescript-eslint/no-empty-function': 'off',
     ...importRules,
   },
 }

src/icons/index.ts

@@ -1,2 +1,3 @@
 export { default as Plus } from './plus.svg'
 export { default as Clear } from './clear.svg'
+export { default as LevelCrossing } from './level-crossing.svg'

src/intercept/__tests__/index.ts → src/interceptor/__tests__/index.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
 import { chrome } from 'jest-chrome'
 
 import { RequestPausedEvent, listen, subscribe, unlisten } from '../debugger'

src/interceptor/react/index.ts

@@ -0,0 +1 @@
+export { Provider as InterceptProvider, useIntercepts } from './intercept'

src/interceptor/react/intercept.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react'
+import { createContext, useContext, useState } from 'react'
+
+import * as intercept from '../intercept'
+
+interface InterceptContextType {
+  intercepts: intercept.Intercept[]
+  addIntercept: (pattern: string) => void
+  removeIntercept: (inter: intercept.Intercept) => void
+}
+
+const InterceptContext = createContext<InterceptContextType>({
+  intercepts: [],
+  addIntercept: () => {},
+  removeIntercept: () => {},
+})
+
+interface Props {
+  children: React.ReactNode
+}
+
+export const Provider = ({ children }: Props) => {
+  const [intercepts, setIntercepts] = useState([...intercept.intercepts])
+
+  const addIntercept = (pattern: string) => {
+    intercept.addIntercept({ pattern, enabled: true })
+    setIntercepts([...intercept.intercepts])
+  }
+  const removeIntercept = (inter: intercept.Intercept) => {
+    intercept.removeIntercept(inter)
+    setIntercepts([...intercept.intercepts])
+  }
+
+  return (
+    <InterceptContext.Provider
+      value={{ intercepts, addIntercept, removeIntercept }}
+    >
+      {children}
+    </InterceptContext.Provider>
+  )
+}
+
+export const useIntercepts = () => useContext(InterceptContext)

src/panel/App.tsx

@@ -1,40 +1,43 @@
 import * as React from 'react'
 import { useLayoutEffect, useReducer } from 'react'
 
-import * as Intercept from '@/intercept'
+import * as Interceptor from '@/interceptor'
+import { InterceptProvider } from '@/interceptor/react'
 
 import Main from './Main'
 import Sidebar from './Sidebar'
 
 const App = () => {
   const [requests, pushRequest] = useReducer(
-    (requests: Intercept.Request[], req: Intercept.Request) => [
+    (requests: Interceptor.Request[], req: Interceptor.Request) => [
       ...requests,
       req,
     ],
     []
   )
 
   useLayoutEffect(() => {
-    Intercept.listen()
-    const unsubscribe = Intercept.subscribe((req) => {
+    Interceptor.listen()
+    const unsubscribe = Interceptor.subscribe((req) => {
       pushRequest(req)
     })
 
     return () => {
       unsubscribe()
-      Intercept.unlisten()
+      Interceptor.unlisten()
     }
   }, [])
 
   return (
-    <div id="App" className="h-screen">
-      <Sidebar
-        className="fixed top-0 left-0 bottom-0 w-64"
-        requests={requests}
-      />
-      <Main className="ml-64" />
-    </div>
+    <InterceptProvider>
+      <div id="App" className="h-screen">
+        <Sidebar
+          className="fixed top-0 left-0 bottom-0 w-64"
+          requests={requests}
+        />
+        <Main className="ml-64" />
+      </div>
+    </InterceptProvider>
   )
 }
 

src/panel/InterceptList.tsx

@@ -2,13 +2,14 @@ import * as React from 'react'
 import { useMemo, useState } from 'react'
 
 import { Clear as ClearIcon, Plus as PlusIcon } from '@/icons'
-import * as intercept from '@/intercept'
+import * as Interceptor from '@/interceptor'
+import { useIntercepts } from '@/interceptor/react'
 
 import List from './components/List'
 
 interface ItemProps {
-  inter: intercept.Intercept
-  onDelete: (inter: intercept.Intercept) => void
+  inter: Interceptor.Intercept
+  onDelete: (inter: Interceptor.Intercept) => void
 }
 
 const Item = ({ inter, onDelete }: ItemProps) => {
@@ -41,15 +42,7 @@ interface Props {
 }
 
 const InterceptList = ({ className }: Props) => {
-  const [intercepts, setIntercepts] = useState([...intercept.intercepts])
-  const addIntercept = (pattern: string) => {
-    intercept.addIntercept({ pattern, enabled: true })
-    setIntercepts([...intercept.intercepts])
-  }
-  const removeIntercept = (inter: intercept.Intercept) => {
-    intercept.removeIntercept(inter)
-    setIntercepts([...intercept.intercepts])
-  }
+  const { intercepts, addIntercept, removeIntercept } = useIntercepts()
 
   const items = useMemo(
     () =>

src/panel/Main.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react'
 
+import Welcome from './Welcome'
+
 interface Props {
   className?: string
 }
 
 const Main = ({ className }: Props) => (
-  <main id="Main" className={className}>
-    Hello World!
+  <main id="main" className={`min-h-screen ${className}`}>
+    <Welcome />
   </main>
 )
 

src/panel/RequestList.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react'
 import { useMemo } from 'react'
 
-import * as Intercept from '@/intercept'
+import * as Interceptor from '@/interceptor'
 
 import List from './components/List'
 
 interface ItemProps {
-  request: Intercept.Request
+  request: Interceptor.Request
 }
 
 const Item = ({ request }: ItemProps) => (
@@ -17,7 +17,7 @@ const Item = ({ request }: ItemProps) => (
 
 interface Props {
   className?: string
-  requests: Intercept.Request[]
+  requests: Interceptor.Request[]
 }
 
 const RequestList = ({ className, requests }: Props) => {

src/panel/Sidebar.tsx

@@ -1,21 +1,22 @@
 import * as React from 'react'
 
-import * as Intercept from '@/intercept'
+import * as Interceptor from '@/interceptor'
 
 import InterceptList from './InterceptList'
 import RequestList from './RequestList'
 
 interface Props {
   className?: string
-  requests: Intercept.Request[]
+  requests: Interceptor.Request[]
 }
 
-const Sidebar = ({ className, requests }: Props) => (
+const Sidebar = ({ className = '', requests }: Props) => (
   <aside
     id="sidebar"
     className={`flex flex-col justify-between border-r border-slate-300 ${className}`}
   >
     <RequestList className="flex-initial overflow-y-auto" requests={requests} />
+
     <InterceptList className="flex-none overflow-y-auto" />
   </aside>
 )

src/panel/Welcome.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react'
+
+import { LevelCrossing } from '@/icons'
+import { useIntercepts } from '@/interceptor/react'
+
+interface Props {
+  className?: string
+}
+
+const Welcome = ({ className = '' }: Props) => {
+  const { addIntercept } = useIntercepts()
+
+  return (
+    <div
+      id="welcome"
+      className={`container min-h-screen flex flex-col justify-center items-center bg-slate-50 ${className}`}
+    >
+      <div className="container max-w-xs">
+        <LevelCrossing className="w-full h-auto fill-indigo-700" />
+      </div>
+      <div className="font-bold text-4xl">Welcome to Interceptor</div>
+      <button
+        className="px-9 py-3 my-6 rounded font-semibold bg-indigo-700 text-sm text-white hover:opacity-75 active:opacity-100"
+        title="Add intercept"
+        onClick={() => addIntercept('')}
+      >
+        Add Intercept
+      </button>
+    </div>
+  )
+}
+
+export default Welcome

src/panel/__tests__/App.tsx

@@ -3,12 +3,12 @@ import { cleanup, render, waitFor } from '@testing-library/react'
 import * as React from 'react'
 import '@testing-library/jest-dom'
 
-import * as Intercept from '@/intercept'
+import * as Interceptor from '@/interceptor'
 
 import App from '../App'
 
-jest.mock('@/intercept')
-const mockedIntercept = Intercept as jest.Mocked<typeof Intercept>
+jest.mock('@/interceptor')
+const mockedIntercept = Interceptor as jest.Mocked<typeof Interceptor>
 
 describe('[App]', () => {
   const unsubscribe = jest.fn()
@@ -38,7 +38,7 @@ describe('[App]', () => {
   })
 
   it('should update after callback', async () => {
-    let listener: Intercept.RequestEventListener = () => {
+    let listener: Interceptor.RequestEventListener = () => {
       throw new Error('listener called before subscribe')
     }
     mockedIntercept.subscribe.mockImplementation((l) => {
@@ -53,7 +53,7 @@ describe('[App]', () => {
     const req = {
       method: 'GET',
       url: 'https://example.com',
-    } as Intercept.Request
+    } as Interceptor.Request
     await waitFor(() => listener(req))
 
     expect(container).not.toEqual(snapshot)

src/panel/__tests__/InterceptList.tsx

@@ -3,6 +3,8 @@ import { cleanup, fireEvent, render } from '@testing-library/react'
 import * as React from 'react'
 import '@testing-library/jest-dom'
 
+import { InterceptProvider } from '@/interceptor/react'
+
 import InterceptList from '../InterceptList'
 
 describe('[InterceptList]', () => {
@@ -17,7 +19,11 @@ describe('[InterceptList]', () => {
   })
 
   it('should match snapshots after clicking buttons', () => {
-    const { container, getByRole } = render(<InterceptList />)
+    const { container, getByRole } = render(
+      <InterceptProvider>
+        <InterceptList />
+      </InterceptProvider>
+    )
 
     const addButton = getByRole('button', { name: 'Add intercept' })
     fireEvent.click(addButton)

src/panel/__tests__/RequestList.tsx

@@ -3,12 +3,12 @@ import { cleanup, render } from '@testing-library/react'
 import * as React from 'react'
 import '@testing-library/jest-dom'
 
-import * as Intercept from '@/intercept'
+import * as Interceptor from '@/interceptor'
 
 import RequestList from '../RequestList'
 
 // mock request
-const request: Intercept.Request = {
+const request: Interceptor.Request = {
   headers: {},
   initialPriority: 'Medium',
   method: 'GET',

src/panel/__tests__/Sidebar.tsx

@@ -3,12 +3,12 @@ import { cleanup, render } from '@testing-library/react'
 import * as React from 'react'
 import '@testing-library/jest-dom'
 
-import * as Intercept from '@/intercept'
+import * as Interceptor from '@/interceptor'
 
 import Sidebar from '../Sidebar'
 
 // mock request
-const request: Intercept.Request = {
+const request: Interceptor.Request = {
   headers: {},
   initialPriority: 'Medium',
   method: 'GET',

src/panel/__tests__/Welcome.tsx

@@ -0,0 +1,25 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { cleanup, fireEvent, render } from '@testing-library/react'
+import * as React from 'react'
+import '@testing-library/jest-dom'
+
+import Welcome from '../Welcome'
+
+describe('[Welcome]', () => {
+  afterEach(() => {
+    cleanup()
+  })
+
+  it('should match empty snapshot', () => {
+    const { container } = render(<Welcome />)
+    expect(container).toMatchSnapshot()
+  })
+
+  it('should click button', () => {
+    const { container, getByRole } = render(<Welcome />)
+    const button = getByRole('button', { name: 'Add intercept' })
+    fireEvent.click(button)
+
+    expect(container).toMatchSnapshot()
+  })
+})