refactor: move files around

Author: mdjastrzebski

examples/cookbook/app/_layout.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { Stack } from 'expo-router';
 import theme from '../theme';
 

examples/cookbook/app/custom-render/index.tsx renamed to examples/cookbook/app/custom-render/WelcomeScreen.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Text, View } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 import { useUser } from './providers/user-provider';
 import { useTheme } from './providers/theme-provider';
 
@@ -8,9 +8,17 @@ export default function WelcomeScreen() {
   const user = useUser();
 
   return (
-    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+    <View style={styles.container}>
       <Text>Hello {user ? user.name : 'Stranger'}</Text>
       <Text>Theme: {theme}</Text>
     </View>
   );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

examples/cookbook/__tests__/app/custom-render/index.test.tsx renamed to examples/cookbook/app/custom-render/__tests__/index.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { screen } from '@testing-library/react-native';
 import { renderWithProviders } from './test-utils';
-import WelcomeScreen from "../../../app/custom-render";
+import WelcomeScreen from '../WelcomeScreen';
 
 test('renders WelcomeScreen in light theme', () => {
   renderWithProviders(<WelcomeScreen />, { theme: 'light' });

examples/cookbook/__tests__/app/custom-render/test-utils.tsx renamed to examples/cookbook/app/custom-render/__tests__/test-utils.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { Slot } from 'expo-router';
 import { UserProvider } from './providers/user-provider';
 import { ThemeProvider } from './providers/theme-provider';

examples/cookbook/app/custom-render/_layout.tsx

@@ -1,8 +1,9 @@
-import React, {useCallback, useEffect} from 'react';
+/* eslint-disable react-native-a11y/has-valid-accessibility-ignores-invert-colors */
+import React, { useEffect } from 'react';
 import { FlatList, Image, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useFonts } from 'expo-font';
 import { useRouter } from 'expo-router';
 import * as SplashScreen from 'expo-splash-screen';
-import { useFonts } from 'expo-font';
 import theme from '../theme';
 
 void SplashScreen.preventAutoHideAsync();
@@ -23,11 +24,12 @@ export default function Home() {
   if (!loaded && !error) {
     return null;
   }
-  const renderItem = useCallback(({ item }: {item: Recipe}) => (
-    <Pressable style={styles.pressable} onPress={() => router.push(item.path)}>
+
+  const renderItem = ({ item }: { item: Recipe }) => (
+    <Pressable role="listitem" style={styles.pressable} onPress={() => router.push(item.path)}>
       <Text style={styles.pressableText}>{item.title}</Text>
     </Pressable>
-  ),[]);
+  );
 
   return (
     <View style={styles.container}>
@@ -41,6 +43,7 @@ export default function Home() {
         <Text style={styles.title}>Testing Library</Text>
         <Text style={styles.subTitle}>Cookbook App</Text>
       </View>
+
       <FlatList<Recipe>
         data={recipes}
         renderItem={renderItem}
@@ -50,6 +53,7 @@ export default function Home() {
   );
 }
 
+/* eslint-disable react-native/no-color-literals */
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -99,6 +103,7 @@ type Recipe = {
   title: string;
   path: string;
 };
+
 const recipes: Recipe[] = [
   { id: 2, title: 'Welcome Screen with Custom Render', path: 'custom-render/' },
   { id: 1, title: 'Task List with Jotai', path: 'jotai/' },

examples/cookbook/app/index.tsx

@@ -0,0 +1,53 @@
+import 'react-native-get-random-values';
+import { nanoid } from 'nanoid';
+import * as React from 'react';
+import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import { useAtom } from 'jotai';
+import { newTaskTitleAtom, tasksAtom } from './state';
+
+export function TaskList() {
+  const [tasks, setTasks] = useAtom(tasksAtom);
+  const [newTaskTitle, setNewTaskTitle] = useAtom(newTaskTitleAtom);
+
+  const handleAddTask = () => {
+    setTasks((tasks) => [
+      ...tasks,
+      {
+        id: nanoid(),
+        title: newTaskTitle,
+      },
+    ]);
+    setNewTaskTitle('');
+  };
+
+  return (
+    <View style={styles.container}>
+      {tasks.map((task) => (
+        <Text key={task.id} testID="task-item">
+          {task.title}
+        </Text>
+      ))}
+
+      {!tasks.length ? <Text>No tasks, start by adding one...</Text> : null}
+
+      <TextInput
+        accessibilityLabel="New Task"
+        placeholder="New Task..."
+        value={newTaskTitle}
+        onChangeText={(text) => setNewTaskTitle(text)}
+      />
+
+      <Pressable accessibilityRole="button" onPress={handleAddTask}>
+        <Text>Add Task</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

examples/cookbook/app/jotai/TaskList.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { render, screen, userEvent } from '@testing-library/react-native';
-import TaskList from '../../../app/jotai';
+import { TaskList } from '../TaskList';
+import { Task } from '../types';
+import { addTask, getAllTasks, newTaskTitleAtom, store, tasksAtom } from '../state';
 import { renderWithAtoms } from './test-utils';
-import { Task } from '../../../app/jotai/types';
-import { addTask, getAllTasks, newTaskTitleAtom, store, tasksAtom } from '../../../app/jotai/state';
 
 jest.useFakeTimers();
 

examples/cookbook/__tests__/app/jotai/index.test.tsx renamed to examples/cookbook/app/jotai/__tests__/TaskList.test.tsx

@@ -1,45 +1,6 @@
-import 'react-native-get-random-values';
-import { nanoid } from 'nanoid';
 import * as React from 'react';
-import { Pressable, Text, TextInput, View } from 'react-native';
-import { useAtom } from 'jotai';
-import { newTaskTitleAtom, tasksAtom } from './state';
+import { TaskList } from './TaskList';
 
-export default function TaskList() {
-  const [tasks, setTasks] = useAtom(tasksAtom);
-  const [newTaskTitle, setNewTaskTitle] = useAtom(newTaskTitleAtom);
-
-  const handleAddTask = () => {
-    setTasks((tasks) => [
-      ...tasks,
-      {
-        id: nanoid(),
-        title: newTaskTitle,
-      },
-    ]);
-    setNewTaskTitle('');
-  };
-
-  return (
-    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      {tasks.map((task) => (
-        <Text key={task.id} testID="task-item">
-          {task.title}
-        </Text>
-      ))}
-
-      {!tasks.length ? <Text>No tasks, start by adding one...</Text> : null}
-
-      <TextInput
-        accessibilityLabel="New Task"
-        placeholder="New Task..."
-        value={newTaskTitle}
-        onChangeText={(text) => setNewTaskTitle(text)}
-      />
-
-      <Pressable accessibilityRole="button" onPress={handleAddTask}>
-        <Text>Add Task</Text>
-      </Pressable>
-    </View>
-  );
+export default function Example() {
+  return <TaskList />;
 }