feat: Init Project

Author: fturkyilmaz

App.tsx

@@ -1,118 +1,24 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- */
-
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import React from 'react';
-import type {PropsWithChildren} from 'react';
-import {
-  SafeAreaView,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  useColorScheme,
-  View,
-} from 'react-native';
-
-import {
-  Colors,
-  DebugInstructions,
-  Header,
-  LearnMoreLinks,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-
-type SectionProps = PropsWithChildren<{
-  title: string;
-}>;
-
-function Section({children, title}: SectionProps): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-  return (
-    <View style={styles.sectionContainer}>
-      <Text
-        style={[
-          styles.sectionTitle,
-          {
-            color: isDarkMode ? Colors.white : Colors.black,
-          },
-        ]}>
-        {title}
-      </Text>
-      <Text
-        style={[
-          styles.sectionDescription,
-          {
-            color: isDarkMode ? Colors.light : Colors.dark,
-          },
-        ]}>
-        {children}
-      </Text>
-    </View>
-  );
-}
-
-function App(): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
+import UserScreen from './src/presentation/pages/UserScreen';
+import {NavigationContainer} from '@react-navigation/native';
+import UserDetailScreen from './src/presentation/pages/UserDetailScreen';
+import CharacterScreen from './src/presentation/pages/CharacterScreen';
+import {QueryClient, QueryClientProvider} from 'react-query';
 
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
+const Stack = createNativeStackNavigator();
+const queryClient = new QueryClient();
 
+export default function MyStack() {
   return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar
-        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-        backgroundColor={backgroundStyle.backgroundColor}
-      />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
-        <View
-          style={{
-            backgroundColor: isDarkMode ? Colors.black : Colors.white,
-          }}>
-          <Section title="Step One">
-            Edit <Text style={styles.highlight}>App.tsx</Text> to change this
-            screen and then come back to see your edits.
-          </Section>
-          <Section title="See Your Changes">
-            <ReloadInstructions />
-          </Section>
-          <Section title="Debug">
-            <DebugInstructions />
-          </Section>
-          <Section title="Learn More">
-            Read the docs to discover what to do next:
-          </Section>
-          <LearnMoreLinks />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
+    <QueryClientProvider client={queryClient}>
+      <NavigationContainer>
+        <Stack.Navigator initialRouteName="Characters">
+          <Stack.Screen name="Characters" component={CharacterScreen} />
+          <Stack.Screen name="User" component={UserScreen} />
+          <Stack.Screen name="UserDetail" component={UserDetailScreen} />
+        </Stack.Navigator>
+      </NavigationContainer>
+    </QueryClientProvider>
   );
 }
-
-const styles = StyleSheet.create({
-  sectionContainer: {
-    marginTop: 32,
-    paddingHorizontal: 24,
-  },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-  },
-  sectionDescription: {
-    marginTop: 8,
-    fontSize: 18,
-    fontWeight: '400',
-  },
-  highlight: {
-    fontWeight: '700',
-  },
-});
-
-export default App;

ios/Podfile.lock

@@ -935,6 +935,8 @@ PODS:
   - React-Mapbuffer (0.74.3):
     - glog
     - React-debug
+  - react-native-safe-area-context (4.10.8):
+    - React-Core
   - React-nativeconfig (0.74.3)
   - React-NativeModulesApple (0.74.3):
     - glog
@@ -1164,6 +1166,28 @@ PODS:
     - React-logger (= 0.74.3)
     - React-perflogger (= 0.74.3)
     - React-utils (= 0.74.3)
+  - RNScreens (3.32.0):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Codegen
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-RCTImage
+    - React-rendererdebug
+    - React-utils
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - SocketRocket (0.7.0)
   - Yoga (0.0.0)
 
@@ -1200,6 +1224,7 @@ DEPENDENCIES:
   - React-jsitracing (from `../node_modules/react-native/ReactCommon/hermes/executor/`)
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
   - React-Mapbuffer (from `../node_modules/react-native/ReactCommon`)
+  - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - React-nativeconfig (from `../node_modules/react-native/ReactCommon`)
   - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
   - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
@@ -1223,6 +1248,7 @@ DEPENDENCIES:
   - React-runtimescheduler (from `../node_modules/react-native/ReactCommon/react/renderer/runtimescheduler`)
   - React-utils (from `../node_modules/react-native/ReactCommon/react/utils`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - RNScreens (from `../node_modules/react-native-screens`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -1291,6 +1317,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/logger"
   React-Mapbuffer:
     :path: "../node_modules/react-native/ReactCommon"
+  react-native-safe-area-context:
+    :path: "../node_modules/react-native-safe-area-context"
   React-nativeconfig:
     :path: "../node_modules/react-native/ReactCommon"
   React-NativeModulesApple:
@@ -1337,6 +1365,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/react/utils"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  RNScreens:
+    :path: "../node_modules/react-native-screens"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -1371,6 +1401,7 @@ SPEC CHECKSUMS:
   React-jsitracing: 6b3c8c98313642140530f93c46f5a6ca4530b446
   React-logger: fa92ba4d3a5d39ac450f59be2a3cec7b099f0304
   React-Mapbuffer: 9f68550e7c6839d01411ac8896aea5c868eff63a
+  react-native-safe-area-context: b7daa1a8df36095a032dff095a1ea8963cb48371
   React-nativeconfig: fa5de9d8f4dbd5917358f8ad3ad1e08762f01dcb
   React-NativeModulesApple: 585d1b78e0597de364d259cb56007052d0bda5e5
   React-perflogger: 7bb9ba49435ff66b666e7966ee10082508a203e8
@@ -1394,9 +1425,10 @@ SPEC CHECKSUMS:
   React-runtimescheduler: 0c80752bceb80924cb8a4babc2a8e3ed70d41e87
   React-utils: a06061b3887c702235d2dac92dacbd93e1ea079e
   ReactCommon: f00e436b3925a7ae44dfa294b43ef360fbd8ccc4
+  RNScreens: 5aeecbb09aa7285379b6e9f3c8a3c859bb16401c
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
   Yoga: 88480008ccacea6301ff7bf58726e27a72931c8d
 
 PODFILE CHECKSUM: baf45152e05de6e137288a2c7e40b5979da97295
 
-COCOAPODS: 1.14.3
+COCOAPODS: 1.15.2

package.json

@@ -10,8 +10,14 @@
     "test": "jest"
   },
   "dependencies": {
+    "@react-navigation/native": "^6.1.17",
+    "@react-navigation/native-stack": "^6.10.0",
+    "axios": "^1.7.2",
     "react": "18.2.0",
-    "react-native": "0.74.3"
+    "react-native": "0.74.3",
+    "react-native-safe-area-context": "^4.10.8",
+    "react-native-screens": "^3.32.0",
+    "react-query": "^3.39.3"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

src/application/models/ICharacterRepository.ts

@@ -0,0 +1,5 @@
+import {Character} from '../../domain/entities/Character';
+
+export interface ICharacterRepository {
+  getAllCharacters(page: number): Promise<Character[]>;
+}

src/application/models/IUserRepository.ts

@@ -0,0 +1,7 @@
+import User from '../../domain/entities/User';
+
+export interface IUserRepository {
+  getUsers(): Promise<User[]>;
+  getByUserId(userId: number): Promise<User>;
+  // N data logically
+}

src/application/repositories/CharRepository.ts

@@ -0,0 +1,22 @@
+import {Character} from '../../domain/entities/Character';
+import {ICharacterRepository} from '../models/ICharacterRepository';
+
+export class CharacterRepository implements ICharacterRepository {
+  async getAllCharacters(page: number): Promise<Character[]> {
+    const response = await fetch(
+      `https://rickandmortyapi.com/api/character?page=${page}`,
+    );
+    const data = await response.json();
+    return data.results.map(
+      (char: any) =>
+        new Character(
+          char.id,
+          char.name,
+          char.status,
+          char.species,
+          char.gender,
+          char.image,
+        ),
+    );
+  }
+}

src/application/repositories/UserRepository.ts

@@ -0,0 +1,24 @@
+import {User} from '../../domain/entities/User';
+import {UserEntity} from '../../domain/entities/UserEntity';
+import {IUserRepository} from '../models/IUserRepository';
+
+export class UserRepository implements IUserRepository {
+  async getUsers(): Promise<User[]> {
+    const response = await fetch('https://jsonplaceholder.typicode.com/users');
+
+    const data = await response.json();
+
+    return data.map(
+      (user: UserEntity) => new User(user.id, user.name, user.email),
+    );
+  }
+  async getByUserId(userId: number): Promise<User> {
+    const response = await fetch(
+      `https://jsonplaceholder.typicode.com/users/${userId}`,
+    );
+
+    const data = await response.json();
+
+    return new User(data.id, data.name, data.email);
+  }
+}

src/domain/entities/Character.ts

@@ -0,0 +1,10 @@
+export class Character {
+  constructor(
+    public id: number,
+    public name: string,
+    public status: string,
+    public species: string,
+    public gender: string,
+    public image: string,
+  ) {}
+}

src/domain/entities/User.ts

@@ -0,0 +1,21 @@
+// import {useState} from 'react';
+
+export class User {
+  constructor(public id: number, public name: string, public email: string) {}
+}
+
+// interface UserProps {
+//   initialId: string;
+//   initialName: string;
+//   initialEmail: string;
+// }
+
+// const UserFunc = ({initialId, initialName, initialEmail}: UserProps): any => {
+//   const [id, setId] = useState<string>(initialId);
+//   const [name, setName] = useState<string>(initialName);
+//   const [email, setEmail] = useState<string>(initialEmail);
+
+//   return {id, setId, name, setName, email, setEmail};
+// };
+
+export default User;

src/domain/entities/UserEntity.ts

@@ -0,0 +1,29 @@
+export interface UserEntity {
+  id: number;
+  name: string;
+  username: string;
+  email: string;
+  address: Address;
+  phone: string;
+  website: string;
+  company: Company;
+}
+
+export interface Address {
+  street: string;
+  suite: string;
+  city: string;
+  zipcode: string;
+  geo: Geo;
+}
+
+export interface Geo {
+  lat: string;
+  lng: string;
+}
+
+export interface Company {
+  name: string;
+  catchPhrase: string;
+  bs: string;
+}

src/domain/usecases/GetCharactersUseCase.ts

@@ -0,0 +1,10 @@
+import {ICharacterRepository} from '../../application/models/ICharacterRepository';
+import {Character} from '../entities/Character';
+
+export class GetCharactersUseCase {
+  constructor(private characterRepository: ICharacterRepository) {}
+
+  async execute(page: number): Promise<Character[]> {
+    return await this.characterRepository.getAllCharacters(page);
+  }
+}

src/domain/usecases/GetUserUseCase.ts

@@ -0,0 +1,14 @@
+import {IUserRepository} from '../../application/models/IUserRepository';
+import {User} from '../entities/User';
+
+export class GetUserUseCase {
+  constructor(private userRepository: IUserRepository) {}
+
+  async execute(): Promise<User[]> {
+    return await this.userRepository.getUsers();
+  }
+
+  async executeById(id: number): Promise<User> {
+    return await this.userRepository.getByUserId(id);
+  }
+}