HausaSkills
unknown
javascript
10 months ago
4.3 kB
5
Indexable
HAUSASKILLS
```
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.Editor is loading...
Leave a Comment