@@ -13,14 +13,23 @@ import { CreateBar, CreateMenuBar } from "../../components/Core/BottomBar";
1313import RoverImageGallery from "../../components/Content/Planets/PlanetData/RandomRoverImage" ;
1414import StructureComponent from "../../components/Content/Planets/Activities/StructureCreate" ;
1515import { TopographicMap } from "../../components/Content/Planets/PlanetData/topographic-map" ;
16+ import { useSupabaseClient } from "@supabase/auth-helpers-react" ;
1617
1718export default function PlanetIdPage ( ) {
1819 const router = useRouter ( ) ;
1920 const { id } = router . query ;
2021 const [ activeView , setActiveView ] = useState ( 'home' ) ;
2122
22- const handleTabClick = ( view ) => {
23- setActiveView ( view ) ;
23+ const supabase = useSupabaseClient ( ) ;
24+
25+ const [ showUpdates , setShowUpdates ] = useState ( false ) ;
26+
27+ const handleUpdatesClick = ( ) => {
28+ setShowUpdates ( true ) ;
29+ } ;
30+
31+ const handleCloseUpdates = ( ) => {
32+ setShowUpdates ( false ) ;
2433 } ;
2534
2635 const [ isMobile , setIsMobile ] = useState ( false ) ;
@@ -42,58 +51,34 @@ export default function PlanetIdPage () {
4251 return null ;
4352 } ;
4453
45- if ( isMobile ) {
46- return (
47- < LayoutNoNav >
48- < IndividualBasePlanet id = { id as string } />
49- </ LayoutNoNav >
50- ) ;
51- } ;
54+ // Planet sector data:
55+ const [ sectorData , setSectorData ] = useState ( [ ] ) ;
5256
53- // For testing/archiving of old layout
54- if ( isMobile && ! id && ! router ) {
55- return (
56- < div className = "flex h-screen" >
57- < div className = "w-1/6 bg-gray-50" >
58- < DesktopSidebar />
59- </ div >
60- < div className = "w-3/6 overflow-y-auto mr-30 z-40" >
61- { /* <br /><ActivateButton /> */ }
62- < IndividualBasePlanetDesktop id = { id as string } />
63- </ div >
64- < div className = "w-2/6 bg-gray-50 overflow-y-auto z-" >
65- < BasePlanetData planetId = { { id : id as string } } />
66- { /* <EditableBasePlanetData planetId={{ id: id as string }} /> */ }
67- < PostFormCardAnomalyTag planetId = { id } onPost = { null } />
68- < ClassificationFeedForIndividualPlanet planetId = { { id : id as string } } />
69- </ div >
70- </ div >
71- ) ;
72- } ;
57+ useEffect ( ( ) => {
58+ const fetchSectorsByPlanetId = async ( ) => {
59+ try {
60+ const { data, error } = await supabase
61+ . from ( "basePlanetSectors" )
62+ . select ( "*" )
63+ . eq ( "anomaly" , 2 ) ; // Assuming "anomaly" is the field representing the planet ID
7364
74- // Two panel layout for desktop devices, with orbitals
75- if ( ! isMobile && ! id && router ) {
76- return (
77- < >
78- < Navbar />
79- < div className = "flex h-screen" >
80- < div className = "w-3/6 overflow-y-auto mr-30 z-40" >
81- { /* <br /><ActivateButton /> */ }
82- < IndividualBasePlanetDesktopTwoPanel id = { id as string } />
83- { /* <TopographicMap /> */ }
84- </ div >
85- < div className = "w-3/6 bg-gray-50 overflow-y-auto" >
86- < div className = "py-3" >
87- < BasePlanetData planetId = { { id : id as string } } />
88- < PostFormCardAnomalyTag planetId = { id } onPost = { null } />
89- < ClassificationFeedForIndividualPlanet planetId = { { id : id as string } } />
90- </ div >
91- </ div >
92- </ div >
93- </ >
94- ) ;
65+ if ( data ) {
66+ setSectorData ( data ) ;
67+ }
68+
69+ if ( error ) {
70+ throw error ;
71+ }
72+ } catch ( error ) {
73+ console . error ( "Error fetching sectors:" , error . message ) ;
74+ }
9575 } ;
9676
77+ if ( supabase ) {
78+ fetchSectorsByPlanetId ( ) ;
79+ }
80+ } , [ supabase ] ) ;
81+
9782 return (
9883 < >
9984 < Navbar />
@@ -133,9 +118,41 @@ export default function PlanetIdPage () {
133118 </div>
134119 </div>
135120 )}
136- </div> */ }
137- { /* <CreateBar onTabClick={handleTabClick} /> */ }
138- < CreateMenuBar />
121+ </div> */ }
122+ < CreateMenuBar onUpdatesClick = { handleUpdatesClick } />
123+ < h1 > Sectors on Planet</ h1 >
124+ < div className = "grid grid-cols-4 gap-4" >
125+ { sectorData . map ( ( sector ) => (
126+ < div key = { sector . id } >
127+ { /* Display sector details here */ }
128+ < p > Sector ID: { sector . id } </ p >
129+ < p > Owner: { sector . owner } </ p >
130+ { /* Add more details as needed */ }
131+ </ div >
132+ ) ) }
133+ </ div >
134+ { showUpdates && (
135+ < div className = "fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center" >
136+ < div className = "bg-white rounded-lg md:w-4/6 lg:w-3/6 xl:w-2/6 p-4" >
137+ < button onClick = { handleCloseUpdates } className = "absolute top-0 right-0 m-2 text-gray-600 hover:text-gray-800" >
138+ < svg xmlns = "http://www.w3.org/2000/svg" className = "h-6 w-6" fill = "none" viewBox = "0 0 24 24" stroke = "currentColor" >
139+ < path strokeLinecap = "round" strokeLinejoin = "round" strokeWidth = "2" d = "M6 18L18 6M6 6l12 12" />
140+ </ svg >
141+ </ button >
142+ < PostFormCardAnomalyTag planetId = { id } onPost = { null } />
143+ < ClassificationFeedForIndividualPlanet
144+ planetId = { { id : id as string } }
145+ backgroundColorSet = "bg-blue-200"
146+ />
147+ < center > < button onClick = { handleCloseUpdates } className = "flex items-center justify-center p-3" >
148+ < svg xmlns = "http://www.w3.org/2000/svg" className = "h-5 w-5" fill = "none" viewBox = "0 0 24 24" stroke = "currentColor" >
149+ < path strokeLinecap = "round" strokeLinejoin = "round" strokeWidth = "2" d = "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
150+ </ svg >
151+ < span className = "bg-yellow-500 text-white text-xs px-1 ml-1 rounded" > Back</ span >
152+ </ button > </ center >
153+ </ div >
154+ </ div >
155+ ) }
139156 </ >
140157 ) ;
141158 } ;
0 commit comments