Skip to content

Commit ae79bfc

Browse files
Lin-RexterLin-Rexter
committed
Debug, Modify env variables
1 parent b9a71ab commit ae79bfc

File tree

10 files changed

+163
-119
lines changed

10 files changed

+163
-119
lines changed

‎src/app/layout.jsx

+43-39
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
import { Suspense } from "react";
22
import dynamic from "next/dynamic";
33
import Script from 'next/script'
4-
import Link from 'next/link'
4+
//import Link from 'next/link'
55
import { Inter } from "next/font/google";
66
import localFont from 'next/font/local'
77
import "@/styles/globals.css";
8-
import { ThemeProvider } from 'next-themes'
8+
//import { ThemeProvider } from 'next-themes'
99
import NextTopLoader from 'nextjs-toploader';
1010
import { Providers } from './providers'
1111
import Loading from "./loading";
1212
import { ClerkProvider } from '@clerk/nextjs'
1313
import { zhTW } from '@clerk/localizations'
1414
import 'react-loading-skeleton/dist/skeleton.css'
15+
import { ENVProvider } from "@/context";
16+
1517

1618
const DynamicHeader = dynamic(
1719
() => import('@/components/Header'),
@@ -50,53 +52,55 @@ export const metadata = {
5052

5153
export default function RootLayout({ children }) {
5254
return (
53-
<ClerkProvider dynamic localization={zhTW}>
54-
<html lang="zh-Hant-TW" className={myFont.className} suppressHydrationWarning>
55-
<head>
56-
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/flowbite.min.css" rel="stylesheet" />
57-
</head>
58-
<body className="h-screen">
59-
<Suspense fallback={<Loading />} className={inter.className}>
60-
<Providers>
61-
{/* 載入進度條 */}
62-
<NextTopLoader
63-
color="#2299DD"
64-
initialPosition={0.08}
65-
crawlSpeed={200}
66-
height={7}
67-
crawl={true}
68-
showSpinner={true}
69-
easing="ease"
70-
speed={200}
71-
shadow="0 0 10px #2299DD,0 0 5px #2299DD"
72-
template='
55+
<ENVProvider>
56+
<ClerkProvider dynamic localization={zhTW}>
57+
<html lang="zh-Hant-TW" className={myFont.className} suppressHydrationWarning>
58+
<head>
59+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/flowbite.min.css" rel="stylesheet" />
60+
</head>
61+
<body className="h-screen">
62+
<Suspense fallback={<Loading />} className={inter.className}>
63+
<Providers>
64+
{/* 載入進度條 */}
65+
<NextTopLoader
66+
color="#2299DD"
67+
initialPosition={0.08}
68+
crawlSpeed={200}
69+
height={7}
70+
crawl={true}
71+
showSpinner={true}
72+
easing="ease"
73+
speed={200}
74+
shadow="0 0 10px #2299DD,0 0 5px #2299DD"
75+
template='
7376
<div class="bar" role="bar">
7477
<div class="peg">
7578
</div>
7679
</div>
7780
<div class="spinner" role="spinner">
7881
<div class="spinner-icon"></div>
7982
</div>'
80-
zIndex={1600}
81-
showAtBottom={false}
82-
/>
83+
zIndex={1600}
84+
showAtBottom={false}
85+
/>
8386

84-
<div className="h-full grid grid-flow-row-dense grid-rows-auto grid-cols-auto">
85-
<DynamicHeader />
87+
<div className="h-full grid grid-flow-row-dense grid-rows-auto grid-cols-auto">
88+
<DynamicHeader />
8689

87-
<div className="grid grid-flow-row-dense grid-rows-1 h-full">
88-
<DynamicMain>
89-
{children}
90-
</DynamicMain>
91-
<DynamicFooter />
90+
<div className="grid grid-flow-row-dense grid-rows-1 h-full">
91+
<DynamicMain>
92+
{children}
93+
</DynamicMain>
94+
<DynamicFooter />
95+
</div>
9296
</div>
93-
</div>
94-
</Providers>
95-
</Suspense>
96-
<Script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/flowbite.min.js" crossOrigin="anonymous" async />
97-
</body>
98-
</html>
99-
</ClerkProvider>
97+
</Providers>
98+
</Suspense>
99+
<Script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/flowbite.min.js" crossOrigin="anonymous" async />
100+
</body>
101+
</html>
102+
</ClerkProvider>
103+
</ENVProvider>
100104
);
101105
}
102106

‎src/components/Main/index.jsx

+19
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,25 @@
1+
"use client"
12
//import Loading from "@/app/loading";
3+
import { useEffect } from 'react';
4+
import { useENV } from "@/context";
5+
26

37
const Main = ({ children }) => {
8+
// 載入環境變數
9+
const { ENVConfig, setENVConfig } = useENV();
10+
11+
useEffect(() => {
12+
const fetch_env = async () => {
13+
return await fetch('/api/env',
14+
{ method: "GET" }
15+
).then(async (res) => {
16+
setENVConfig(await res.json());
17+
})
18+
};
19+
20+
fetch_env()
21+
}, []);
22+
423
{/* h-[52.4rem] */ }
524
return (
625
<main className="relative h-full">

‎src/components/Main/traffic/map.jsx

+45-58
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { Layer_GeoJson } from "@/lib/map/layers.js"
1717
import { Toast_Component } from "@/components/utils/toast";
1818
import { Info_Component } from "@/components/Main/traffic/info_drawer.jsx";
1919
import { useGetTraffic } from "@/hooks/useGetTraffic";
20-
import { useTime, useDrawer } from "@/context";
20+
import { useENV, useTime, useDrawer } from "@/context";
2121
//import { Client } from "@googlemaps/google-maps-services-js";
2222

2323

@@ -26,22 +26,17 @@ Date.prototype.addHours = function (h) {
2626
return this;
2727
}
2828

29-
// 取得MapBox金鑰
30-
const mapbox_api_key = process.env.NEXT_PUBLIC_MAPBOX_TOKENS;
31-
const mapbox_style = process.env.NEXT_PUBLIC_MAPBOX_STYLE
32-
33-
// 取得 Polstar北宸科技地圖服務 API 金鑰
34-
const polstar_api_key = process.env.NEXT_PUBLIC_POLSTAR_API_KEY;
35-
3629

3730
const LocationAggregatorMap = ({ off, useExistToken }) => {
31+
// 取得環境變數
32+
const { ENVConfig, SetENVConfig } = useENV();
3833
// 取得時間軸指定日期
3934
const { selectedTime } = useTime();
4035
// 取得開啟壅塞詳細側邊欄狀態
4136
const { showDrawer, setShowDrawer } = useDrawer();
4237

4338
// 儲存使用者經緯度
44-
const [location, setLocation] = useState(null);
39+
const [location, setLocation] = useState();
4540

4641
// 儲存觀看座標、縮放等資訊
4742
const [initialViewState, setInitialViewState] = useState(INITIAL_VIEW_STATE.SF);
@@ -66,7 +61,19 @@ const LocationAggregatorMap = ({ off, useExistToken }) => {
6661
const [searchResult, setSearchResult] = useState([]);
6762

6863
// 儲存動畫過渡狀態
69-
const [isTransition, setIsTransition] = useState(false);
64+
//const [isTransition, setIsTransition] = useState(false);
65+
66+
const [messages, setMessages] = useState("");
67+
68+
if (ENVConfig) {
69+
// 取得MapBox金鑰
70+
var mapbox_api_key = ENVConfig.mapbox.token;
71+
var mapbox_style = ENVConfig.mapbox.style;
72+
73+
// 取得 Polstar北宸科技地圖服務 API 金鑰
74+
var polstar_api_key = ENVConfig.polstar.key;
75+
}
76+
7077

7178
// 更新初始座標起始點(如果已儲存使用者位置)
7279
useEffect(() => {
@@ -92,8 +99,11 @@ const LocationAggregatorMap = ({ off, useExistToken }) => {
9299
// 儲存至LocalStorage
93100
window.localStorage.setItem("UserLocation", JSON.stringify(INITIAL_VIEW_STATE.NYC))
94101
})
102+
} else {
103+
setLocation(INITIAL_VIEW_STATE.SF);
95104
}
96105
}
106+
97107
useEffect(() => {
98108
getCurrentPosition()
99109
}, []);
@@ -194,45 +204,6 @@ const LocationAggregatorMap = ({ off, useExistToken }) => {
194204
"street_number"
195205
]
196206
},
197-
{
198-
"long_name": "台元街",
199-
"short_name": "台元街",
200-
"types": [
201-
"route"
202-
]
203-
},
204-
{
205-
"long_name": "竹北里",
206-
"short_name": "竹北里",
207-
"types": [
208-
"administrative_area_level_4",
209-
"political"
210-
]
211-
},
212-
{
213-
"long_name": "竹北市",
214-
"short_name": "竹北市",
215-
"types": [
216-
"administrative_area_level_3",
217-
"political"
218-
]
219-
},
220-
{
221-
"long_name": "新竹縣",
222-
"short_name": "新竹縣",
223-
"types": [
224-
"administrative_area_level_2",
225-
"political"
226-
]
227-
},
228-
{
229-
"long_name": "台灣",
230-
"short_name": "TW",
231-
"types": [
232-
"country",
233-
"political"
234-
]
235-
},
236207
{
237208
"long_name": "302082",
238209
"short_name": "302082",
@@ -619,7 +590,7 @@ const LocationAggregatorMap = ({ off, useExistToken }) => {
619590
setTimeout(() => {
620591
getLocation()
621592
}, 1000);
622-
}, [search, initialViewState.latitude, initialViewState.longitude]);
593+
}, [search, initialViewState]);
623594

624595
return (
625596
<div className="grid h-full w-full">
@@ -719,14 +690,21 @@ const LocationAggregatorMap = ({ off, useExistToken }) => {
719690
color="blue"
720691
className={`flex select-none order-first md:order-none font-bold items-center border-[2px] border-gray-800 h-fit w-fit z-[9998]`}
721692
onClick={() => {
722-
//getCurrentPosition();
723-
setInitialViewState({
724-
longitude: location.longitude,
725-
latitude: location.latitude,
726-
zoom: 18,
727-
transitionInterpolator: new FlyToInterpolator({ speed: 2 }),
728-
transitionDuration: 'auto',
729-
});
693+
if (location) {
694+
//getCurrentPosition();
695+
setInitialViewState({
696+
longitude: location?.longitude,
697+
latitude: location?.latitude,
698+
zoom: 18,
699+
transitionInterpolator: new FlyToInterpolator({ speed: 2 }),
700+
transitionDuration: 'auto',
701+
});
702+
} else {
703+
setMessages("尚未啟用位置權限")
704+
setTimeout(() => {
705+
setMessages(null)
706+
}, 1500)
707+
}
730708
}}
731709
>
732710
<div className="flex flex-col justify-center items-center p-0 m-0" >
@@ -748,6 +726,15 @@ const LocationAggregatorMap = ({ off, useExistToken }) => {
748726
update_time={update_time}
749727
/>
750728
}
729+
{
730+
messages &&
731+
<Toast_Component
732+
icon_text={"系統訊息"}
733+
title={"系統訊息"}
734+
contents={messages}
735+
showExit={false}
736+
/>
737+
}
751738
{
752739
warn &&
753740
<Toast_Component

‎src/context/index.js

+23-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,21 @@
1-
import React, { createContext, useState, useContext } from 'react';
1+
"use client"
2+
import React, { createContext, useState, useContext, useEffect } from 'react';
23

4+
const ENVContext = createContext();
35
const TimeContext = createContext();
46
const DrawerContext = createContext();
57

6-
// 跨組件共享變數
8+
// = = = = = 跨組件共享變數 = = = = =
9+
export const ENVProvider = ({ children }) => {
10+
const [ENVConfig, setENVConfig] = useState(null);
11+
12+
return (
13+
<ENVContext.Provider value={{ ENVConfig, setENVConfig }}>
14+
{children}
15+
</ENVContext.Provider>
16+
);
17+
};
18+
719
export const TimeProvider = ({ children }) => {
820
const [selectedTime, setSelectedTime] = useState([0, null]);
921

@@ -24,7 +36,15 @@ export const DrawerProvider = ({ children }) => {
2436
);
2537
};
2638

27-
// 取得共享變數內容
39+
// = = = = = 取得共享變數內容 = = = = =
40+
export const useENV = () => {
41+
const context = useContext(ENVContext);
42+
if (!context) {
43+
throw new Error('useENV must be used within a ENVProvider');
44+
}
45+
return context;
46+
};
47+
2848
export const useTime = () => {
2949
const context = useContext(TimeContext);
3050
if (!context) {

0 commit comments

Comments
 (0)