105 lines
3.6 KiB
TypeScript
105 lines
3.6 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Container, Typography, Select, MenuItem, Button, Card, CardContent, CircularProgress } from '@mui/material';
|
|
import type { SelectChangeEvent } from '@mui/material/Select';
|
|
import api from '../services/api';
|
|
|
|
interface Sign {
|
|
id: number;
|
|
name: string;
|
|
icon: string;
|
|
}
|
|
|
|
const Home: React.FC = () => {
|
|
const [signs, setSigns] = useState<Sign[]>([]);
|
|
const [selectedSign, setSelectedSign] = useState<string>('');
|
|
const [timeline, setTimeline] = useState<string>('daily');
|
|
const [horoscope, setHoroscope] = useState<string>('');
|
|
const [loading, setLoading] = useState<boolean>(false);
|
|
|
|
useEffect(() => {
|
|
const fetchSigns = async () => {
|
|
try {
|
|
const response = await api.get('/signs', {
|
|
headers: {
|
|
Authorization: `Bearer ${localStorage.getItem('token')}`
|
|
}
|
|
});
|
|
setSigns(response.data);
|
|
} catch (error) {
|
|
console.error('Failed to fetch signs', error);
|
|
}
|
|
};
|
|
|
|
fetchSigns();
|
|
}, []);
|
|
|
|
const handleGetHoroscope = async () => {
|
|
if (!selectedSign) return;
|
|
setLoading(true);
|
|
try {
|
|
const response = await api.get(`/horoscope/${selectedSign}/${timeline}`, {
|
|
headers: {
|
|
Authorization: `Bearer ${localStorage.getItem('token')}`
|
|
}
|
|
});
|
|
setHoroscope(response.data.horoscope);
|
|
} catch (error) {
|
|
console.error('Failed to fetch horoscope', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Container>
|
|
<Typography variant="h4" component="h1" gutterBottom>
|
|
Your Horoscopes
|
|
</Typography>
|
|
<Select
|
|
value={selectedSign}
|
|
onChange={(e: SelectChangeEvent) => setSelectedSign(e.target.value)}
|
|
displayEmpty
|
|
fullWidth
|
|
margin="normal"
|
|
>
|
|
<MenuItem value="" disabled>
|
|
Select a Sign
|
|
</MenuItem>
|
|
{signs.map((sign) => (
|
|
<MenuItem key={sign.id} value={sign.name}>
|
|
{sign.icon} {sign.name}
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
<Select
|
|
value={timeline}
|
|
onChange={(e: SelectChangeEvent) => setTimeline(e.target.value)}
|
|
fullWidth
|
|
margin="normal"
|
|
>
|
|
<MenuItem value="daily">Daily</MenuItem>
|
|
<MenuItem value="weekly">Weekly</MenuItem>
|
|
<MenuItem value="monthly">Monthly</MenuItem>
|
|
<MenuItem value="yearly">Yearly</MenuItem>
|
|
</Select>
|
|
<Button variant="contained" color="primary" fullWidth onClick={handleGetHoroscope} disabled={loading}>
|
|
{loading ? <CircularProgress size={24} /> : 'Get Horoscope'}
|
|
</Button>
|
|
{horoscope && (
|
|
<Card sx={{ marginTop: 2 }}>
|
|
<CardContent>
|
|
<Typography variant="h5" component="h2">
|
|
{selectedSign} - {timeline}
|
|
</Typography>
|
|
<Typography variant="body1">
|
|
{horoscope}
|
|
</Typography>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</Container>
|
|
);
|
|
};
|
|
|
|
export default Home;
|