♻️ Review code

cloud-walker · Jun 25, 2023 · 571589b · 571589b
1 parent dbd17ac
commit 571589b
Show file tree

Hide file tree

Showing 13 changed files with 71 additions and 64 deletions.
diff --git a/apps/demo/src/App.tsx b/apps/demo/src/App.tsx
@@ -1,21 +1,22 @@
-import {useId, useState} from 'react'
-import {makeTask, Task, TaskFilter} from './task'
+import {useState} from 'react'
+import {TaskPreview} from './TaskPreview'
+import {Task, TaskFilter, makeTask} from './task'
 
 const initialTasks = Array.from({length: 50}, makeTask)
 const initialState: {tasks: Task[]; filters: readonly TaskFilter[]} = {
   tasks: initialTasks,
   filters: [{field: 'content', operator: 'like', value: 'male'}],
 }
 
-function makeTaskPredicate(filters: readonly TaskFilter[]) {
+const makeTaskPredicate = (filters: readonly TaskFilter[]) => {
   const taskPredicate = (task: Task) => {
-    const matches = filters.map(filter => {
+    const matches = filters.map((filter) => {
       if (filter.operator == 'any_of') {
-        return filter.value.some(match => task[filter.field].includes(match))
+        return filter.value.some((match) => task[filter.field].includes(match))
       }
 
       if (filter.operator == 'none_of') {
-        return !filter.value.some(match => task[filter.field].includes(match))
+        return !filter.value.some((match) => task[filter.field].includes(match))
       }
 
       if (filter.operator == 'like') {
@@ -34,7 +35,7 @@ function makeTaskPredicate(filters: readonly TaskFilter[]) {
   return taskPredicate
 }
 
-export function App() {
+export const App = () => {
   const [state, setState] = useState(initialState)
   const tasks = state.tasks.filter(makeTaskPredicate(state.filters))
   return (
@@ -62,20 +63,20 @@ export function App() {
         </ul>
       </div>
       <ul style={{display: 'flex', flexDirection: 'column', gap: '0.25em'}}>
-        {tasks.map(task => (
+        {tasks.map((task) => (
           <li key={task.id}>
             <TaskPreview
               task={task}
-              onChange={task => {
+              onChange={(task) => {
                 setState({
                   ...state,
-                  tasks: state.tasks.map(t => (t.id == task.id ? task : t)),
+                  tasks: state.tasks.map((t) => (t.id == task.id ? task : t)),
                 })
               }}
               onRemove={() => {
                 setState({
                   ...state,
-                  tasks: state.tasks.filter(t => t.id != task.id),
+                  tasks: state.tasks.filter((t) => t.id != task.id),
                 })
               }}
             />
@@ -85,32 +86,3 @@ export function App() {
     </div>
   )
 }
-
-function TaskPreview({
-  task,
-  onChange,
-  onRemove,
-}: {
-  task: Task
-  onChange: (task: Task) => void
-  onRemove: () => void
-}) {
-  const checkboxId = useId()
-  return (
-    <div style={{display: 'flex', gap: '0.5em'}}>
-      <input
-        type="checkbox"
-        id={checkboxId}
-        checked={task.isCompleted}
-        onChange={e => {
-          onChange({...task, isCompleted: e.currentTarget.checked})
-        }}
-      />
-      <label htmlFor={checkboxId} style={{flexGrow: 1}}>
-        {task.content}
-      </label>
-      <div>{task.categories.toString()}</div>
-      <button onClick={onRemove}>Remove</button>
-    </div>
-  )
-}
diff --git a/apps/demo/src/TaskPreview.tsx b/apps/demo/src/TaskPreview.tsx
@@ -0,0 +1,31 @@
+import {useId} from 'react'
+import {Task} from './task'
+
+export const TaskPreview = ({
+  task,
+  onChange,
+  onRemove,
+}: {
+  task: Task
+  onChange: (task: Task) => void
+  onRemove: () => void
+}) => {
+  const checkboxId = useId()
+  return (
+    <div style={{display: 'flex', gap: '0.5em'}}>
+      <input
+        type="checkbox"
+        id={checkboxId}
+        checked={task.isCompleted}
+        onChange={(e) => {
+          onChange({...task, isCompleted: e.currentTarget.checked})
+        }}
+      />
+      <label htmlFor={checkboxId} style={{flexGrow: 1}}>
+        {task.content}
+      </label>
+      <div>{task.categories.toString()}</div>
+      <button onClick={onRemove}>Remove</button>
+    </div>
+  )
+}
diff --git a/apps/demo/src/task.ts b/apps/demo/src/task.ts
@@ -31,7 +31,7 @@ export type TaskFilter = {
   }
 }[keyof typeof task2FiltersOperators]
 
-export function makeTask(): Task {
+export const makeTask = (): Task => {
   const updatedAt = faker.date.recent()
   const createdAt = faker.date.recent({days: 5, refDate: updatedAt})
   return {
@@ -40,7 +40,7 @@ export function makeTask(): Task {
     content: faker.lorem.words(),
     createdAt,
     updatedAt,
-    estimate: faker.datatype.number({min: 1}),
+    estimate: faker.number.int({min: 1}),
     isCompleted: faker.datatype.boolean(),
   }
 }
diff --git a/packages/dom-utils/src/main.ts b/packages/dom-utils/src/main.ts
@@ -1,9 +1,9 @@
 /**
  * A strictier version of "document.querySelector".
  */
-export function getBySelector(
+export const getBySelector = (
   ...args: Parameters<typeof document.querySelector>
-) {
+) => {
   const el = document.querySelector(...args)
 
   if (el == null) {

diff --git a/packages/react-inspect/src/modules/CollapseHandler.tsx b/packages/react-inspect/src/modules/CollapseHandler.tsx
@@ -1,7 +1,11 @@
 import {RenderProp} from '@cloudwalker/react-utils'
 import {useState} from 'react'
 
-export function CollapseHandler({children}: {children: RenderProp<boolean>}) {
+export const CollapseHandler = ({
+  children,
+}: {
+  children: RenderProp<boolean>
+}) => {
   const [show, setShow] = useState(false)
 
   return (

diff --git a/packages/react-inspect/src/modules/DataHandler/DataHandler.tsx b/packages/react-inspect/src/modules/DataHandler/DataHandler.tsx
@@ -4,15 +4,19 @@ import {Level} from '../Level'
 import {Punctuation} from '../Punctuation'
 import {Value} from '../Value'
 
-export function DataHandler({
+const isRecord = (data: unknown): data is Record<string, unknown> => {
+  return data != null && typeof data == 'object'
+}
+
+export const DataHandler = ({
   data,
   outer = false,
   theme = 'default',
 }: {
   data: unknown
   outer?: boolean
   theme?: 'gloom' | 'default'
-}) {
+}) => {
   if (typeof data == 'string') {
     return <Value type="string" theme={theme}>{`"${data}"`}</Value>
   }
@@ -95,7 +99,3 @@ export function DataHandler({
 }
 
 DataHandler.displayName = 'ReactInspectDataHandler'
-
-function isRecord(data: unknown): data is Record<string, unknown> {
-  return data != null && typeof data == 'object'
-}
diff --git a/packages/react-inspect/src/modules/Inspect/Inspect.tsx b/packages/react-inspect/src/modules/Inspect/Inspect.tsx
@@ -4,13 +4,13 @@ import {PropsWithoutRef} from 'react'
 import {DataHandler} from '../DataHandler'
 import {Layout} from '../Layout'
 
-export function Inspect({
+export const Inspect = ({
   data,
   theme = 'default',
 }: PropsWithoutRef<{
   theme?: 'gloom' | 'default'
   data: unknown
-}>) {
+}>) => {
   if (data != null && typeof data == 'object' && isCircular(data)) {
     throw new Error(
       'ReactInspect Error: circular data inspection not supported',

diff --git a/packages/react-inspect/src/modules/Key.tsx b/packages/react-inspect/src/modules/Key.tsx
@@ -1,9 +1,9 @@
 import {PropsWithChildren} from 'react'
 
-export function Key({
+export const Key = ({
   children,
   theme,
-}: PropsWithChildren<{theme: 'gloom' | 'default'}>) {
+}: PropsWithChildren<{theme: 'gloom' | 'default'}>) => {
   return (
     <span
       style={{

diff --git a/packages/react-inspect/src/modules/Layout.tsx b/packages/react-inspect/src/modules/Layout.tsx
@@ -1,9 +1,9 @@
 import {PropsWithChildren} from 'react'
 
-export function Layout({
+export const Layout = ({
   children,
   theme,
-}: PropsWithChildren<{theme: 'gloom' | 'default'}>) {
+}: PropsWithChildren<{theme: 'gloom' | 'default'}>) => {
   return (
     <pre
       style={{

diff --git a/packages/react-inspect/src/modules/Level.tsx b/packages/react-inspect/src/modules/Level.tsx
@@ -1,5 +1,5 @@
 import {PropsWithChildren} from 'react'
 
-export function Level({children}: PropsWithChildren<unknown>) {
+export const Level = ({children}: PropsWithChildren<unknown>) => {
   return <div style={{paddingLeft: '1rem'}}>{children}</div>
 }
diff --git a/packages/react-inspect/src/modules/Punctuation.tsx b/packages/react-inspect/src/modules/Punctuation.tsx
@@ -1,9 +1,9 @@
 import {PropsWithChildren} from 'react'
 
-export function Punctuation({
+export const Punctuation = ({
   children,
   theme,
-}: PropsWithChildren<{theme: 'gloom' | 'default'}>) {
+}: PropsWithChildren<{theme: 'gloom' | 'default'}>) => {
   return (
     <span
       style={{

diff --git a/packages/react-inspect/src/modules/Value.tsx b/packages/react-inspect/src/modules/Value.tsx
@@ -1,13 +1,13 @@
 import {PropsWithChildren} from 'react'
 
-export function Value({
+export const Value = ({
   children,
   type,
   theme,
 }: PropsWithChildren<{
   type: string
   theme: 'gloom' | 'default'
-}>) {
+}>) => {
   return (
     <span
       style={{
@@ -20,7 +20,7 @@ export function Value({
   )
 }
 
-function getColor(theme: 'gloom' | 'default', type: string) {
+const getColor = (theme: 'gloom' | 'default', type: string) => {
   switch (theme) {
     case 'gloom': {
       switch (type) {

diff --git a/packages/react-utils/src/usePreviousValue.ts b/packages/react-utils/src/usePreviousValue.ts
@@ -4,7 +4,7 @@ import {useState} from 'react'
  * React hook that holds the previous value passed in the previous
  * render phase.
  */
-export function usePreviousValue<T>(value: T): T {
+export const usePreviousValue = <T>(value: T): T => {
   const [prevValue, setPrevValue] = useState(value)
   if (value !== prevValue) {
     setPrevValue(value)