based on distance done

ElyasMehraein · May 1, 2024 · c54e220 · c54e220
1 parent 6c938b7
commit c54e220
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 18 deletions.
diff --git a/app/all/page.js b/app/all/page.js
@@ -8,6 +8,8 @@ import QuestionMarkOutlinedIcon from '@mui/icons-material/QuestionMarkOutlined';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import ItsAvatar from '@/components/modules/ItsAvatar'
 import dynamic from 'next/dynamic'
+import { orderByDistance, getDistance } from 'geolib';
+
 const ShowMyLocation = dynamic(() => import('@/components/modules/ShowMyLocation'), { ssr: false })
 
 
@@ -19,12 +21,13 @@ export default function AllBusinesses() {
   const [businesses, setBusinesses] = useState(false);
   const [latitude, setLatitude] = useState("")
   const [longitude, setLongitude] = useState("")
+  const [businessesOrderByDistance, setBusinessesOrderByDistance] = useState("")
 
   const setLocation = function (latitude, longitude) {
     setLatitude(latitude)
     setLongitude(longitude)
   }
-  console.log("geo", latitude, longitude);
+
   useEffect(() => {
     const getBusinesses = async () => {
       try {
@@ -41,8 +44,19 @@ export default function AllBusinesses() {
     }
     getBusinesses()
     setMounted(true)
+
   }, [])
 
+  useEffect(() => {
+    if (businesses || latitude) {
+      setBusinessesOrderByDistance(orderByDistance({ latitude, longitude },
+        businesses.filter((business) => ( business.latitude)).map((business) => (
+        {
+          latitude: business.latitude, longitude: business.longitude, ...business,
+        }))))
+    };
+  }, [latitude])
+
   const goToIndex = () => {
     router.push("/")
   }
@@ -86,23 +100,44 @@ export default function AllBusinesses() {
             </AccordionDetails>
           </Accordion>
           <ShowMyLocation setLocation={setLocation} />
-          {businesses ? businesses.map((business) => {
-            console.log("business Geo", business.longitude ,business.latitude);
-            return (
-              <List key={business._id} sx={{ width: '100%', maxWidth: 700, bgcolor: 'background.paper' }}>
-                <ListItemButton onClick={() => router.push(`/${business.businessName}`)}>
-                  <ListItemAvatar>
-                    <Avatar>
-                      <ItsAvatar userCodeOrBusinessBrand={business.businessName} isAvatar={business.isAvatar} alt="workers avatar" />
-                    </Avatar>
-                  </ListItemAvatar>
-                  <ListItem dense secondaryAction={<ListItemText sx={{ ml: 5 }} align="right" primary={business.businessBrand} secondary={business.bio} />} >
-                    <ListItemText primary="14" secondary="km" />
-                  </ListItem>
-                </ListItemButton>
-              </List>
-            )
-          }) :
+          {businesses ?
+            businessesOrderByDistance ?
+              businessesOrderByDistance.map((business) => {
+                return (
+                  <List key={business._id} sx={{ width: '100%', maxWidth: 700, bgcolor: 'background.paper' }}>
+                    <ListItemButton onClick={() => router.push(`/${business.businessName}`)}>
+                      <ListItemAvatar>
+                        <Avatar>
+                          <ItsAvatar userCodeOrBusinessBrand={business.businessName} isAvatar={business.isAvatar} alt="workers avatar" />
+                        </Avatar>
+                      </ListItemAvatar>
+                      <ListItem dense secondaryAction={<ListItemText sx={{ ml: 5 }} align="right" primary={business.businessBrand} secondary={business.bio} />} >
+                        <ListItemText
+                          primary={(getDistance({ latitude, longitude }, { latitude: business.latitude, longitude: business.longitude })/1000).toFixed()}
+                          secondary="km"
+                        />
+
+                      </ListItem>
+                    </ListItemButton>
+                  </List>
+                )
+              })
+              :
+              businesses.map((business) => {
+                return (
+                  <List key={business._id} sx={{ width: '100%', maxWidth: 700, bgcolor: 'background.paper' }}>
+                    <ListItemButton onClick={() => router.push(`/${business.businessName}`)}>
+                      <ListItemAvatar>
+                        <Avatar>
+                          <ItsAvatar userCodeOrBusinessBrand={business.businessName} isAvatar={business.isAvatar} alt="workers avatar" />
+                        </Avatar>
+                      </ListItemAvatar>
+                      <ListItem dense secondaryAction={<ListItemText sx={{ ml: 5 }} align="right" primary={business.businessBrand} secondary={business.bio} />} >
+                      </ListItem>
+                    </ListItemButton>
+                  </List>
+                )
+              }) :
             <Typography>کسب و کاری برای نمایش وجود ندارد </Typography>
           }
         </Box>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "cookie": "^0.6.0",
     "crypto": "^1.0.1",
     "fastest-validator": "^1.18.0",
+    "geolib": "^3.3.4",
     "jsonwebtoken": "^9.0.2",
     "leaflet": "^1.9.4",
     "leaflet-defaulticon-compatibility": "^0.1.2",