added link to universe tab from fleet movements

ametel01 · Jan 29, 2024 · 027cd61 · 027cd61
1 parent 285b7af
commit 027cd61
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 20 deletions.
diff --git a/packages/frontend/src/colony/ColonySelect.tsx b/packages/frontend/src/colony/ColonySelect.tsx
@@ -61,7 +61,6 @@ const ColonySelect = ({ planetId, selectedColonyId, handleChange }: Props) => {
   const menuItems = Array.isArray(coloniesArray)
     ? coloniesArray.map((colony, index) => {
         const colonyId = colony[0];
-        console.log('colony', colony);
         return (
           <MenuItem key={index} value={colonyId.toString()}>
             colony {colonyId.toString()} - {Number(colony[1].system)}/

diff --git a/packages/frontend/src/components/auth/AuthController.tsx b/packages/frontend/src/components/auth/AuthController.tsx
@@ -4,6 +4,7 @@ import AuthScreen from '../../views/LoginOrGenerate';
 import Dashboard from '../../views/DashBoard';
 import { useAccount } from '@starknet-react/core';
 import Header from '../ui/Header';
+import { DestinationProvider } from '../../context/DestinationContext';
 
 const AuthController = () => {
   const { address } = useAccount();
@@ -41,8 +42,10 @@ const AuthController = () => {
     />
   ) : (
     <>
-      <Header planetId={Number(planetId)} />
-      <Dashboard planetId={Number(planetId)} />
+      <DestinationProvider>
+        <Header planetId={Number(planetId)} />
+        <Dashboard planetId={Number(planetId)} />
+      </DestinationProvider>
     </>
   );
 };

diff --git a/packages/frontend/src/components/ui/MissionRow.tsx b/packages/frontend/src/components/ui/MissionRow.tsx
@@ -11,6 +11,7 @@ import {
 import { usePlanetPosition } from '../../hooks/usePlanetPosition';
 import fleetIcon from '../../assets/uiIcons/Fleet.svg';
 import { StyledButton } from '../../shared/styled/Button';
+import { useDestination } from '../../context/DestinationContext';
 
 const FleetTooltipContent = styled('div')({
   display: 'flex',
@@ -74,6 +75,13 @@ export const MissionRow = memo(
       });
     }, [recallFleet]);
 
+    const { handleDestinationClick } = useDestination();
+
+    // Updated to handle the click event
+    const onClickDestination = () => {
+      handleDestinationClick(mission.destination);
+    };
+
     const renderFleetDetails = () => (
       <FleetTooltipContent>
         <div>Carrier: {Number(mission.fleet.carrier)}</div>
@@ -99,7 +107,9 @@ export const MissionRow = memo(
           </Tooltip>
         </MissionText>
         <MissionText>{origin}</MissionText>
-        <MissionText>{destination}</MissionText>
+        <MissionText onClick={onClickDestination} style={{ cursor: 'pointer' }}>
+          {destination}
+        </MissionText>
         <MissionText>
           {mission.category == MissionCategory.Debris
             ? 'Debris'

diff --git a/packages/frontend/src/context/DestinationContext.tsx b/packages/frontend/src/context/DestinationContext.tsx
@@ -0,0 +1,35 @@
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+
+// Create a context
+type DestinationContextType = {
+  selectedDestination: number | null;
+  handleDestinationClick: (destinationId: number) => void;
+};
+
+// Create a context with a default value
+const DestinationContext = createContext<DestinationContextType>({
+  selectedDestination: null,
+  handleDestinationClick: () => {},
+});
+
+// Create a provider component
+export const DestinationProvider = ({ children }: { children: ReactNode }) => {
+  const [selectedDestination, setSelectedDestination] = useState<number | null>(
+    null
+  );
+
+  const handleDestinationClick = (destinationId: number) => {
+    setSelectedDestination(destinationId);
+  };
+
+  return (
+    <DestinationContext.Provider
+      value={{ selectedDestination, handleDestinationClick }}
+    >
+      {children}
+    </DestinationContext.Provider>
+  );
+};
+
+// Hook for easy access to the context
+export const useDestination = () => useContext(DestinationContext);
diff --git a/packages/frontend/src/panels/MainTabPanel.tsx b/packages/frontend/src/panels/MainTabPanel.tsx
@@ -36,6 +36,9 @@ import {
   ResourcesSectionArgs,
 } from '.';
 
+import { useEffect } from 'react';
+import { useDestination } from '../context/DestinationContext';
+
 export const ResourcesSection = ({
   planetId,
   colonyId,
@@ -51,6 +54,14 @@ export const ResourcesSection = ({
   const celestiaAvailable = useGetCelestiaAvailable(planetId);
   const defencesCost = getBaseDefenceCost();
 
+  const { selectedDestination } = useDestination();
+
+  useEffect(() => {
+    if (selectedDestination !== null) {
+      setActiveTab(5); // Set to Universe tab
+    }
+  }, [selectedDestination]);
+
   if (
     !compoundsLevels ||
     !techLevels ||

diff --git a/packages/frontend/src/panels/UniverseViewTab.tsx b/packages/frontend/src/panels/UniverseViewTab.tsx
@@ -24,7 +24,7 @@ import {
   useGetColonyMotherPlanet,
   useGetColonyShips,
 } from '../hooks/ColoniesHooks';
-// import { Switch, Typography } from '@mui/material';
+import { useDestination } from '../context/DestinationContext';
 
 const UniverseBoxItem = ({
   ownPlanetId,
@@ -111,7 +111,9 @@ export const UniverseViewTabPanel = ({
   const [planetsData, setPlanetsData] = useState<PlanetDetails[]>([]);
   const [currentPage, setCurrentPage] = useState(1);
   const itemsPerPage = 6;
-  const pageCount = Math.ceil(planetsData.length / itemsPerPage); // Adjust as needed
+  const pageCount = Math.ceil(planetsData.length / itemsPerPage);
+
+  const { selectedDestination } = useDestination();
 
   useEffect(() => {
     fetchPlanetsData()
@@ -123,23 +125,34 @@ export const UniverseViewTabPanel = ({
           return Number(a.position.system) - Number(b.position.system);
         });
 
-        // Find the index of the planet with the ownPlanetId
-        const ownPlanetIndex = sortedData.findIndex((planet) =>
-          colonyId === 0
-            ? planet.planetId === ownPlanetId
-            : planet.planetId === ownPlanetId * 1000 + colonyId
-        );
-        // Calculate the initial page based on the index
-        const initialPage = Math.ceil((ownPlanetIndex + 1) / itemsPerPage);
-
         setPlanetsData(sortedData);
-        // Set the initial page
-        setCurrentPage(initialPage);
+
+        if (selectedDestination !== null) {
+          const destinationIndex = sortedData.findIndex(
+            (planet) => planet.planetId === Number(selectedDestination)
+          );
+          if (destinationIndex !== -1) {
+            // Check if index is valid
+            const destinationPage = Math.ceil(
+              (destinationIndex + 1) / itemsPerPage
+            );
+            setCurrentPage(destinationPage);
+          }
+        } else {
+          // Default page setting logic
+          const ownPlanetIndex = sortedData.findIndex((planet) =>
+            colonyId === 0
+              ? planet.planetId === ownPlanetId
+              : planet.planetId === ownPlanetId * 1000 + colonyId
+          );
+          const initialPage = Math.ceil((ownPlanetIndex + 1) / itemsPerPage);
+          setCurrentPage(initialPage);
+        }
       })
       .catch((error) => {
         console.error('Error fetching planets data:', error);
       });
-  }, [colonyId, ownPlanetId]);
+  }, [colonyId, ownPlanetId, selectedDestination]);
 
   const startIndex = (currentPage - 1) * itemsPerPage;
   const selectedPlanets = planetsData.slice(
@@ -178,12 +191,11 @@ export const UniverseViewTabPanel = ({
           variant="outlined"
           shape="rounded"
           sx={{
-            // ...
             '.MuiPaginationItem-root.MuiPaginationItem-root': {
               color: 'white',
             },
             '.MuiPaginationItem-root.Mui-selected': {
-              backgroundColor: 'rgba(211, 211, 211, 0.5)', // Lighter gray background for the selected page
+              backgroundColor: 'rgba(211, 211, 211, 0.5)',
             },
           }}
         />