كيف أقوم باختصار هذا الكود مع انه 89 سطر لكنى متاكد من انه يمكنن تقليله .. React Native

وعليكم السلام ورحمة الله وبركاته
مرحباً أحمد:
من الممتاز أنك تبحث عن طريقة لكتابة كود جيد وإليك بعض التحسينات

1. إذا لاحظت ستجد أن الجزء الذي يغير النتائج مكرر أربع مرات متشابهين حتى في التنسيقات وطريقة جلب النتائج لما لا تجرب أن تجعلهم داخل array وتقوم بعمل loop عليهم ثم تعرضهم.
2. أيضاً الجزء الخاص بالألوان لا يجب أن تفعله هكذا فماذا لو لديك ٤ خصائص تريد تغييرهم هل ستعمل ٤ اوبجيكت ؟ 

   import React, { useState, useEffect } from "react";
   import { FlatList, StyleSheet, View, Text } from "react-native";
   import axios from "axios";
   
   function App() {
     const [data, setData] = useState([]);
     useEffect(() => {
       getPhotos();
     }, []);
   
     function getPhotos() {
       axios
         .get("https://jsonplaceholder.typicode.com/photos")
         .then(async function (response) {
           setData(response.data);
         })
         .catch((err) => console.error(err));
     }
   
     const [user, setUser] = useState(1);
     const newData = data.filter((e) => e.albumId === user);
     // فقط نقوم بإرجاع اللون بناءً علي الشرط
     const getBackgroundColor = (number) => {
       return user === number ?  "red" : 'aqua';
     }
     // نقوم بجمع المستخدمين الذين سيقومون بنفس الوظيفة
     const specialUsers = [
       {id: 1, name: 'user one'},
       {id: 2, name: 'user Two'},
       {id: 3, name: 'user Three'},
       {id: 4, name: 'user Four'},
     ];
   
     return (
       <View style={styles.con}>
   	  // هنا نقوم بعمل دوران علي المستخدمين
         {specialUsers.map(user => (
           <Text
             key={user.name}
             // هذا جزء تحسين التنسيقات 
             style={{
               backgroundColor : getBackgroundColor(user.id)
             }}
             onPress={() => setUser(user.id)}
           >
             {user.name}
           </Text>
         ))}
   
         <FlatList
           data={newData}
           keyExtractor={(item) => item.id.toString()}
           renderItem={({ item }) => (
             <View>
               <Text>{item.albumId}</Text>
               <Text>{item.title}</Text>
             </View>
           )}
         />
       </View>
     );
   }
   
   const styles = StyleSheet.create({
     con: {},
   });
   export default App;

    

بتاريخ 2 ساعات قال Mohammed Saber:

وعليكم السلام ورحمة الله وبركاته
مرحباً أحمد:
من الممتاز أنك تبحث عن طريقة لكتابة كود جيد وإليك بعض التحسينات

1. إذا لاحظت ستجد أن الجزء الذي يغير النتائج مكرر أربع مرات متشابهين حتى في التنسيقات وطريقة جلب النتائج لما لا تجرب أن تجعلهم داخل array وتقوم بعمل loop عليهم ثم تعرضهم.
2. أيضاً الجزء الخاص بالألوان لا يجب أن تفعله هكذا فماذا لو لديك ٤ خصائص تريد تغييرهم هل ستعمل ٤ اوبجيكت ؟ 

   
   import React, { useState, useEffect } from "react";
   import { FlatList, StyleSheet, View, Text } from "react-native";
   import axios from "axios";
   
   function App() {
     const [data, setData] = useState([]);
     useEffect(() => {
       getPhotos();
     }, []);
   
     function getPhotos() {
       axios
         .get("https://jsonplaceholder.typicode.com/photos")
         .then(async function (response) {
           setData(response.data);
         })
         .catch((err) => console.error(err));
     }
   
     const [user, setUser] = useState(1);
     const newData = data.filter((e) => e.albumId === user);
     // فقط نقوم بإرجاع اللون بناءً علي الشرط
     const getBackgroundColor = (number) => {
       return user === number ?  "red" : 'aqua';
     }
     // نقوم بجمع المستخدمين الذين سيقومون بنفس الوظيفة
     const specialUsers = [
       {id: 1, name: 'user one'},
       {id: 2, name: 'user Two'},
       {id: 3, name: 'user Three'},
       {id: 4, name: 'user Four'},
     ];
   
     return (
       <View style={styles.con}>
   	  // هنا نقوم بعمل دوران علي المستخدمين
         {specialUsers.map(user => (
           <Text
             key={user.name}
             // هذا جزء تحسين التنسيقات 
             style={{
               backgroundColor : getBackgroundColor(user.id)
             }}
             onPress={() => setUser(user.id)}
           >
             {user.name}
           </Text>
         ))}
   
         <FlatList
           data={newData}
           keyExtractor={(item) => item.id.toString()}
           renderItem={({ item }) => (
             <View>
               <Text>{item.albumId}</Text>
               <Text>{item.title}</Text>
             </View>
           )}
         />
       </View>
     );
   }
   
   const styles = StyleSheet.create({
     con: {},
   });
   export default App;

    

شكرا جزيلا أخى .. الكود صار اجمل بكثير