Skip to content

Commit

Permalink
Merge pull request #219 from arunimaChintu/err
Browse files Browse the repository at this point in the history 
Corrected all the errors
  • Loading branch information
@Trisha-tech
Trisha-tech authored Aug 4, 2024
2 parents a30a30c + e066fe4 commit bda8528
Show file tree
Hide file tree
Showing 3 changed files with 148 additions and 262 deletions.
3 changes: 2 additions & 1 deletion client/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import './Animations.css';
import FAQ from "./Pages/Faq.jsx";
import AboutUs from "./Pages/AboutUs.jsx";
import { OrderList } from './Pages/Orders.jsx';

function App() {
const [darkMode, setDarkMode] = useState(false);
Expand Down Expand Up @@ -54,7 +55,7 @@ function App() {
<Route path="/signup" element={<SignUpPage />} />
<Route path="/wishlist" element={<Wishlist />} />
<Route path="/cart" element={<Cart />} />
<Route path="/orders" element={<Orders />} />
<Route path="/orders" element={<OrderList />} />
<Route path="/contactus" element={<Contact />} />
<Route path="/about" element={<AboutUs/>}/>
<Route path="/faqs" element={<FAQ/>}/>
Expand Down
279 changes: 133 additions & 146 deletions client/src/Pages/Orders.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,134 +1,122 @@
import { useState, useEffect } from "react";
import React, { useState, useEffect } from "react";
import axios from "axios";
import {
Container,
CircularProgress,
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
TextField,
InputAdornment,
IconButton,
Button,
Box,
Container,
CircularProgress,
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
TextField,
InputAdornment,
IconButton,
Button,
Box,
} from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
import SortIcon from "@mui/icons-material/Sort";
import RefreshIcon from "@mui/icons-material/Refresh";

function Orders() {
const [isLoading, setIsLoading] = useState(true);
const [data, setData] = useState([]);
const [searchTerm, setSearchTerm] = useState("");
const [sortOrder, setSortOrder] = useState("asc");

useEffect(() => {
fetchData();
}, []);
function OrderList() {
const [isLoading, setIsLoading] = useState(true);
const [data, setData] = useState([]);
const [searchTerm, setSearchTerm] = useState("");
const [sortOrder, setSortOrder] = useState("asc");

const fetchData = async () => {
setIsLoading(true);
try {
const response = await axios.get("/api/orders");
setData(response.data);
} catch (error) {
console.error("There was an error fetching the orders!", error);
} finally {
setIsLoading(false);
}
};
useEffect(() => {
fetchData();
}, []);

const handleSearch = (event) => {
setSearchTerm(event.target.value);
};
const fetchData = async () => {
setIsLoading(true);
try {
const response = await axios.get("/api/orders");
setData(response.data);
} catch (error) {
console.error("There was an error fetching the orders!", error);
} finally {
setIsLoading(false);
}
};

const handleSort = () => {
const sortedData = [...data].sort((a, b) => {
if (sortOrder === "asc") {
return a.item.localeCompare(b.item);
}
return b.item.localeCompare(a.item);
});
setData(sortedData);
setSortOrder(sortOrder === "asc" ? "desc" : "asc");
};
const handleSearch = (event) => {
setSearchTerm(event.target.value);
};

const filteredData = data.filter((order) =>
order.item.toLowerCase().includes(searchTerm.toLowerCase())
);
const handleSort = () => {
const sortedData = [...data].sort((a, b) => {
if (sortOrder === "asc") {
return a.item.localeCompare(b.item);
}
return b.item.localeCompare(a.item);
});
setData(sortedData);
setSortOrder(sortOrder === "asc" ? "desc" : "asc");
};

return (
<Container maxWidth="lg">
<Box display="flex" justifyContent="space-between" alignItems="center" mb={4}>
<TextField
label="Search Orders"
variant="outlined"
value={searchTerm}
onChange={handleSearch}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<SearchIcon />
</InputAdornment>
),
}}
/>
<Button
variant="contained"
startIcon={<SortIcon />}
onClick={handleSort}
>
Sort
</Button>
<IconButton onClick={fetchData}>
<RefreshIcon />
</IconButton>
</Box>
{isLoading ? (
<Box display="flex" justifyContent="center" alignItems="center" height="50vh">
<CircularProgress />
</Box>
) : (
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell>Order ID</TableCell>
<TableCell>Item</TableCell>
</TableRow>
</TableHead>
<TableBody>
{filteredData.map((order) => (
<TableRow key={order.id}>
<TableCell>{order.id}</TableCell>
<TableCell>{order.item}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
)}
</Container>
);
const filteredData = data.filter((order) =>
order.item.toLowerCase().includes(searchTerm.toLowerCase())
);

import Spinner from "./Spinner";
return (
<Container maxWidth="lg">
<Box display="flex" justifyContent="space-between" alignItems="center" mb={4}>
<TextField
label="Search Orders"
variant="outlined"
value={searchTerm}
onChange={handleSearch}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<SearchIcon />
</InputAdornment>
),
}}
/>
<Button variant="contained" startIcon={<SortIcon />} onClick={handleSort}>
Sort
</Button>
<IconButton onClick={fetchData}>
<RefreshIcon />
</IconButton>
</Box>
{isLoading ? (
<Box display="flex" justifyContent="center" alignItems="center" height="50vh">
<CircularProgress />
</Box>
) : (
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell>Order ID</TableCell>
<TableCell>Item</TableCell>
</TableRow>
</TableHead>
<TableBody>
{filteredData.map((order) => (
<TableRow key={order.id}>
<TableCell>{order.id}</TableCell>
<TableCell>{order.item}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
)}
</Container>
);
}

function Orders() {
const [isLoading, setIsLoading] = useState(true);
function OrderTracking() {
const [isLoading, setIsLoading] = useState(false);
const [orderId, setOrderId] = useState("");
const [orderData, setOrderData] = useState(null);

useEffect(() => {
// Simulate a fetch call to backend to check initial loading state
setTimeout(() => {
setIsLoading(false);
}, 2000);
}, []);

const handleTrackOrder = () => {
setIsLoading(true);
// Simulate a fetch call to backend to get order status
Expand All @@ -137,51 +125,50 @@ function Orders() {
const mockOrderData = {
id: orderId,
status: "Shipped",
expectedDelivery: "2024-07-10"
expectedDelivery: "2024-07-10",
};
setOrderData(mockOrderData);
setIsLoading(false);
}, 2000);
};

return (
<div className="container mx-auto my-8 p-6 bg-gray-100">
<h2 className="text-3xl font-bold mb-6 text-gray-800">Order Tracking</h2>

<div className="mb-4">
<input
type="text"
<Container maxWidth="sm">
<Box display="flex" flexDirection="column" alignItems="center" mt={4}>
<TextField
label="Enter Order ID"
variant="outlined"
value={orderId}
onChange={(e) => setOrderId(e.target.value)}
placeholder="Enter Order ID"
className="appearance-none bg-transparent border border-gray-300 rounded w-full py-2 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
fullWidth
/>
</div>
<div className="mb-4">
<button
<Button
variant="contained"
color="primary"
onClick={handleTrackOrder}
className="bg-teal-500 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded"
disabled={isLoading}
style={{ marginTop: 16 }}
>
Track Order
</button>
</div>

{isLoading && <Spinner />}

{!isLoading && orderData && (
<div className="bg-white rounded-lg shadow-lg p-6">
<h3 className="text-xl font-bold mb-2">Order ID: {orderData.id}</h3>
<p className="text-gray-600">Status: {orderData.status}</p>
<p className="text-gray-600">Expected Delivery: {orderData.expectedDelivery}</p>
</div>
)}

{!isLoading && !orderData && (
<p className="text-gray-600">Please enter an Order ID to track your order.</p>
)}
</div>
</Button>
{isLoading && (
<Box display="flex" justifyContent="center" alignItems="center" height="50vh">
<CircularProgress />
</Box>
)}
{!isLoading && orderData && (
<Paper elevation={3} style={{ padding: 16, marginTop: 16 }}>
<h3>Order ID: {orderData.id}</h3>
<p>Status: {orderData.status}</p>
<p>Expected Delivery: {orderData.expectedDelivery}</p>
</Paper>
)}
{!isLoading && !orderData && (
<p style={{ marginTop: 16 }}>Please enter an Order ID to track your order.</p>
)}
</Box>
</Container>
);

}

export default Orders;
export { OrderList, OrderTracking };
Loading

0 comments on commit bda8528

Please sign in to comment.