Untitled
``` jsx import React, { useState, useEffect } from 'react'; import { View, Text, TextInput, Button, FlatList } from 'react-native'; import { SearchBar } from 'react-native-elements'; const App = () => { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const [workers, setWorkers] = useState([]); const [searchQuery, setSearchQuery] = useState(''); const [language, setLanguage] = useState('en'); useEffect(() => { const fetchWorkers = async () => { const response = await fetch('(link unavailable)'); const data = await response.json(); setWorkers(data); }; fetchWorkers(); }, []); const handleLogin = async () => { // Call backend API to authenticate user const response = await fetch('(link unavailable)', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username, password }), }); const data = await response.json(); if (data.success) { // Get list of workers from backend API const workersResponse = await fetch('(link unavailable)'); const workersData = await workersResponse.json(); setWorkers(workersData); } }; const handleSearch = async () => { // Call backend API to search for workers const response = await fetch(`(link unavailable)); const data = await response.json(); setWorkers(data); }; const handleLanguageChange = (language) => { setLanguage(language); }; return ( <View> <Text>Login</Text> <TextInput placeholder="Username" value={username} onChangeText={(text) => setUsername(text)} /> <TextInput placeholder="Password" value={password} onChangeText={(text) => setPassword(text)} secureTextEntry /> <Button title="Login" onPress={handleLogin} /> <SearchBar placeholder="Search for workers" value={searchQuery} onChangeText={(text) => setSearchQuery(text)} onSearch={handleSearch} /> <FlatList data={workers} renderItem={({ item }) => ( <View> <Text>{item.name}</Text> <Text>{item.skills.join(', ')}</Text> </View> )} keyExtractor={(item) => item.id.toString()} /> <Button title="Switch to Hausa" onPress={() => handleLanguageChange('ha')} /> <Button title="Switch to English" onPress={() => handleLanguageChange('en')} /> {language === 'ha' && ( <View> <Text>Makasudai</Text> <Text>Kirani</Text> </View> )} </View> ); }; export default App; ``` Backend (Node.js) ``` const express = require('express'); const mongoose = require('mongoose'); const bcrypt = require('bcryptjs'); const app = express(); app.use(express.json()); mongoose.connect('mongodb://localhost/hausadirectory', { useNewUrlParser: true, useUnifiedTopology: true, }); const User = mongoose.model('User', { username: String, password: String, }); const Worker = mongoose.model('Worker', { name: String, skills: [String], }); app.post('/api/login', async (req, res) => { const { username, password } = req.body; const user = await User.findOne({ username }); if (!user) { return res.status(401).send({ message: 'Invalid username or password' }); } const isValidPassword = await bcrypt.compare(password, user.password); if (!isValidPassword) { return res.status(401).send({ message: 'Invalid username or password' }); } res.send({ success: true }); }); app.get('/api/workers', async (req, res) => { const workers = await Worker.find().exec(); res.send(workers); }); app.get('/api/workers/search', async (req, res) => { const searchQuery = req.query.search; const workers = await Worker.find({ name: { $regex: searchQuery, $options: 'i' } }).exec(); res.send(workers); }); app.listen(3000, () => { console.log('Server listening on port 3000'); }); ``` This rewritten code includes the following features: 1. *User registration and login*: Users can register and log in to the app. 2. *Directory/marketplace for skilled workers*: The app displays a list of skilled workers.
Leave a Comment