import React, { useState, useEffect } from "react";
import {
View,
Text,
TextInput,
Button,
FlatList,
TouchableOpacity,
Alert,
} from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import {
FAB,
Card,
Title,
Paragraph,
Provider as PaperProvider,
Appbar,
} from "react-native-paper";
import { SearchBar } from "react-native-elements";
import Icon from "react-native-vector-icons/MaterialIcons";
import Animated, {
useAnimatedStyle,
withSpring,
useSharedValue,
} from "react-native-reanimated";
import { styles } from "./styles";
const HomeScreen = ({ navigation }) => {
const [employees, setEmployees] = useState([]);
const [search, setSearch] = useState("");
const [filteredEmployees, setFilteredEmployees] = useState([]);
const [sortOrder, setSortOrder] = useState("asc");
const fabScale = useSharedValue(1);
useEffect(() => {
const defaultEmployees = [
{
id: "1",
empId: "EMP001",
name: "Ramesh",
position: "Software Engineer",
},
{
id: "2",
empId: "EMP002",
name: "Suresh",
position: "Product Manager",
},
{
id: "3",
empId: "EMP003",
name: "Naresh",
position: "UI/UX Designer",
},
];
setEmployees(defaultEmployees);
}, []);
useEffect(() => {
const filtered = employees.filter((employee) =>
employee.name.toLowerCase().includes(search.toLowerCase())
);
setFilteredEmployees(filtered);
}, [search, employees]);
const handleSort = () => {
const newOrder = sortOrder === "asc" ? "desc" : "asc";
setSortOrder(newOrder);
const sortedEmployees = [...employees].sort((a, b) => {
if (newOrder === "asc") {
return a.name.localeCompare(b.name);
} else {
return b.name.localeCompare(a.name);
}
});
setEmployees(sortedEmployees);
};
const deleteEmployee = (id) => {
const updatedEmployees = employees.filter(
(employee) => employee.id !== id
);
setEmployees(updatedEmployees);
};
const editEmployee = (id, updatedEmployee) => {
const updatedEmployees = employees.map((employee) =>
employee.id === id ? updatedEmployee : employee
);
setEmployees(updatedEmployees);
};
const addEmployee = (newEmployee) => {
if (
employees.some((employee) => employee.empId === newEmployee.empId)
) {
Alert.alert("Error", "Employee with the same ID already exists.");
} else {
setEmployees([...employees, newEmployee]);
navigation.goBack();
}
};
const fabStyle = useAnimatedStyle(() => {
return {
transform: [{ scale: withSpring(fabScale.value) }],
};
});
return (
<View style={styles.container}>
<View style={styles.titleContainer}>
<Icon
name="people"
size={24}
color="white"
style={styles.titleIcon}
/>
<Text style={styles.title}>GeeksforGeeks Emp Management</Text>
</View>
<Appbar.Header style={styles.appbar}>
<SearchBar
placeholder="Search Employees..."
onChangeText={setSearch}
value={search}
lightTheme
containerStyle={styles.searchBarContainer}
inputContainerStyle={styles.searchBarInputContainer}
/>
<Appbar.Action
icon={() => (
<Icon name="filter-alt" size={24} color="white" />
)}
onPress={handleSort}
/>
</Appbar.Header>
{(filteredEmployees.length === 0 && search !== "") ||
(employees.length === 0 && filteredEmployees.length === 0) ? (
<View style={styles.noRecordsContainer}>
<Text>No records found</Text>
</View>
) : (
<FlatList
data={filteredEmployees}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<Card style={styles.card}>
<Card.Content>
<Title>{item.name}</Title>
<Paragraph>ID: {item.empId}</Paragraph>
<Paragraph>Position: {item.position}</Paragraph>
</Card.Content>
<Card.Actions>
<TouchableOpacity
onPress={() =>
navigation.navigate("Edit", {
employee: item,
editEmployee: editEmployee,
})
}
>
<Icon
name="edit"
size={24}
color="#3498db"
style={styles.actionIcon}
/>
</TouchableOpacity>
<TouchableOpacity
onPress={() => deleteEmployee(item.id)}
>
<Icon
name="delete"
size={24}
color="#3498db"
style={styles.actionIcon}
/>
</TouchableOpacity>
</Card.Actions>
</Card>
)}
style={styles.employeeList}
/>
)}
<Animated.View style={[styles.fab, fabStyle]}>
<FAB
icon={() => <Icon name="add" size={24} color="white" />}
onPress={() => {
fabScale.value = 0.8;
navigation.navigate("Add", {
addEmployee: addEmployee,
});
}}
onStateChange={({ nativeEvent }) => {
if (nativeEvent.state === 2) {
fabScale.value = 1;
}
}}
/>
</Animated.View>
</View>
);
};
const AddEmpScreen = ({ route, navigation }) => {
const [name, setName] = useState("");
const [position, setPosition] = useState("");
const [empId, setEmpId] = useState("");
const addEmployee = () => {
if (!empId || !name || !position) {
Alert.alert("Error", "Please fill in all the fields.");
return;
}
const existingEmployees = route.params?.employees || [];
if (existingEmployees.some((employee) => employee.empId === empId)) {
Alert.alert("Error", "Employee with the same ID already exists.");
} else {
route.params?.addEmployee({
id: Date.now().toString(),
empId,
name,
position,
});
navigation.goBack();
}
};
return (
<View style={styles.container}>
<TextInput
placeholder="Enter Employee ID"
value={empId}
onChangeText={(text) => setEmpId(text)}
style={styles.input}
/>
<TextInput
placeholder="Enter Name"
value={name}
onChangeText={(text) => setName(text)}
style={styles.input}
/>
<TextInput
placeholder="Enter Position"
value={position}
onChangeText={(text) => setPosition(text)}
style={styles.input}
/>
<Button title="Add Employee" onPress={addEmployee} />
</View>
);
};
const EditEmpScreen = ({ route, navigation }) => {
const { employee, editEmployee } = route.params;
const [empId, setEmpId] = useState(employee.empId);
const [name, setName] = useState(employee.name);
const [position, setPosition] = useState(employee.position);
const saveChanges = () => {
if (!empId || !name || !position) {
Alert.alert("Error", "Please fill in all the fields.");
return;
}
const existingEmployees = route.params?.employees || [];
if (
existingEmployees.some(
(emp) => emp.id !== employee.id && emp.empId === empId
)
) {
Alert.alert("Error", "Employee with the same ID already exists.");
} else {
editEmployee(employee.id, { ...employee, empId, name, position });
navigation.goBack();
}
};
return (
<View style={styles.container}>
<TextInput
placeholder="Enter Employee ID"
value={empId}
onChangeText={(text) => setEmpId(text)}
style={styles.input}
/>
<TextInput
placeholder="Enter Name"
value={name}
onChangeText={(text) => setName(text)}
style={styles.input}
/>
<TextInput
placeholder="Enter Position"
value={position}
onChangeText={(text) => setPosition(text)}
style={styles.input}
/>
<Button title="Save Changes" onPress={saveChanges} />
</View>
);
};
const Stack = createStackNavigator();
const App = () => {
return (
<PaperProvider>
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Add" component={AddEmpScreen} />
<Stack.Screen name="Edit" component={EditEmpScreen} />
</Stack.Navigator>
</NavigationContainer>
</PaperProvider>
);
};
export default App;