Skip to content

Commit

Permalink
refactor src/app/page.tsx
Browse files Browse the repository at this point in the history
  • Loading branch information
@yuiseki
yuiseki committed Jan 7, 2024
1 parent a99f104 commit be906bb
Showing 1 changed file with 84 additions and 123 deletions.
207 changes: 84 additions & 123 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,38 @@ import { parseInnerResJson } from "@/utils/trident/parseInnerResJson";
const greetings = `Hello! I'm TRIDENT, interactive Smart Maps assistant. Could you indicate me the areas and themes you want to see as the map?`;

export default function Home() {
// input ref and state
const [inputText, setInputText] = useState("");
// all state
const [pageTitle, setPageTitle] = useState("TRIDENT");
const [mounted, setMounted] = useState(false);

// maps ref and state
const mapRef = useRef<MapRef | null>(null);
const [geojsonWithStyleList, setGeojsonWithStyleList] = useState<
Array<{ id: string; style: TridentMapsStyle; geojson: FeatureCollection }>
>([]);
const [mapTitle, setMapTitle] = useState<string | undefined>(undefined);

// base maps
const [mapStyleJsonUrl, setMapStyleJsonUrl] = useLocalStorage<string>(
"trident-selected-map-style-json-url",
"/map_styles/fiord-color-gl-style/style.json"
);

// dialogue ref and state
const dialogueRef = useRef<HTMLDivElement | null>(null);
const dialogueEndRef = useRef<HTMLDivElement | null>(null);
const [dialogueList, setDialogueList] = useState<DialogueElement[]>([]);
const [lazyInserting, setLazyInserting] = useState(false);
const [insertingText, setInsertingText] = useState(greetings);

// communication state
const [responding, setResponding] = useState(false);
const [mapping, setMapping] = useState(false);
const [pastMessages, setPastMessages] = useState<Array<any> | undefined>();

// floating chat button state
const [showingFloatingChat, setShowingFloatingChat] = useState(true);

// input ref and state
const [inputText, setInputText] = useState("");

const scrollToBottom = useCallback(async () => {
await sleep(50);
Expand All @@ -40,8 +63,6 @@ export default function Home() {
}
}, []);

// floating chat button state
const [showingFloatingChat, setShowingFloatingChat] = useState(true);
const onChangeFloatingChatButton = useCallback(
(showing: boolean) => {
setShowingFloatingChat(showing);
Expand All @@ -52,77 +73,13 @@ export default function Home() {
[scrollToBottom]
);

// maps ref and state
const mapRef = useRef<MapRef | null>(null);
const [geojsonWithStyleList, setGeojsonWithStyleList] = useState<
Array<{ id: string; style: TridentMapsStyle; geojson: FeatureCollection }>
>([]);
const [mapTitle, setMapTitle] = useState<string | undefined>(undefined);

// base maps
const [mapStyleJsonUrl, setMapStyleJsonUrl] = useLocalStorage<string>(
"trident-selected-map-style-json-url",
"/map_styles/fiord-color-gl-style/style.json"
);
const onSelectMapStyleJsonUrl = useCallback(
(e: React.ChangeEvent<HTMLSelectElement>) => {
setMapStyleJsonUrl(e.target.value);
},
[setMapStyleJsonUrl]
);

// fit bounds to all geojson in the geojsonWithStyleList
useEffect(() => {
setTimeout(() => {
if (!mapRef || !mapRef.current) return;
if (geojsonWithStyleList.length === 0) return;

try {
// everything - all geojson in the geojsonWithStyleList
const everything: FeatureCollection = {
type: "FeatureCollection",
features: geojsonWithStyleList
.map((item) => item.geojson.features)
.flat(),
};

// padding of the map
let padding = {
top: 40,
left: 40,
right: 40,
bottom: 40,
};

// if floating chat is showing, add more padding
if (showingFloatingChat) {
const windowWidth = window.innerWidth;
// if the window is big like desktop, add little padding to left and bottom
// if the window is small like mobile, add more padding to bottom
if (windowWidth > 600) {
padding = {
top: 40,
left: 40,
right: 120,
bottom: 120,
};
} else {
padding = {
top: 40,
left: 40,
right: 40,
bottom: 400,
};
}
}

fitBoundsToGeoJson(mapRef, everything, padding);
} catch (error) {
console.error(error);
}
}, 500);
}, [geojsonWithStyleList, showingFloatingChat]);

const insertNewDialogue = useCallback(
(newDialogueElement: DialogueElement, lazy?: boolean) => {
if (!lazy) {
Expand All @@ -139,58 +96,12 @@ export default function Home() {
setDialogueList((prev) => {
return [...prev, lazyNewDialogueElement];
});
setInsertingText(newDialogueElement.text);
setLazyInserting(true);
}
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[]
);
const [lazyInsertingInitialized, setLazyInsertingInitialized] =
useState(false);
const [intervalId, setIntervalId] = useState<NodeJS.Timer>();
useEffect(() => {
if (lazyInserting) {
if (!lazyInsertingInitialized) {
const newIntervalId = setInterval(() => {
setDialogueList((prev) => {
const last = prev[prev.length - 1];
last.text = insertingText.slice(0, last.text.length + 1);
scrollToBottom();
if (insertingText.length === last.text.length) {
setLazyInserting(false);
setLazyInsertingInitialized(false);
setInsertingText("");
setResponding(false);
}
return [...prev.slice(0, prev.length - 1), last];
});
}, 50);
setIntervalId(newIntervalId);
setLazyInsertingInitialized(true);
}
} else {
clearInterval(intervalId);
setIntervalId(undefined);
}
return () => {
if (!lazyInserting) {
clearInterval(intervalId);
setIntervalId(undefined);
}
};
}, [
intervalId,
lazyInserting,
lazyInsertingInitialized,
insertingText,
scrollToBottom,
]);

// communication state
const [responding, setResponding] = useState(false);
const [mapping, setMapping] = useState(false);
const [pastMessages, setPastMessages] = useState<Array<any> | undefined>();
const onSubmit = useCallback(async () => {
const newInputText = inputText.trim();
setInputText("");
Expand Down Expand Up @@ -317,12 +228,63 @@ export default function Home() {
});
}, [inputText, insertNewDialogue, pastMessages, scrollToBottom]);

const [pageTitle, setPageTitle] = useState("TRIDENT");
useEffect(() => {
setPageTitle(mapTitle ? `${mapTitle} | TRIDENT` : "TRIDENT");
}, [mapTitle]);

const [mounted, setMounted] = useState(false);

// fit bounds to all geojson in the geojsonWithStyleList
useEffect(() => {
setTimeout(() => {
if (!mapRef || !mapRef.current) return;
if (geojsonWithStyleList.length === 0) return;

try {
// everything - all geojson in the geojsonWithStyleList
const everything: FeatureCollection = {
type: "FeatureCollection",
features: geojsonWithStyleList
.map((item) => item.geojson.features)
.flat(),
};

// padding of the map
let padding = {
top: 40,
left: 40,
right: 40,
bottom: 40,
};

// if floating chat is showing, add more padding
if (showingFloatingChat) {
const windowWidth = window.innerWidth;
// if the window is big like desktop, add little padding to left and bottom
// if the window is small like mobile, add more padding to bottom
if (windowWidth > 600) {
padding = {
top: 40,
left: 40,
right: 120,
bottom: 120,
};
} else {
padding = {
top: 40,
left: 40,
right: 40,
bottom: 400,
};
}
}

fitBoundsToGeoJson(mapRef, everything, padding);
} catch (error) {
console.error(error);
}
}, 500);
}, [geojsonWithStyleList, showingFloatingChat]);

useEffect(() => {
if (!mounted) {
setMounted(true);
Expand All @@ -335,6 +297,7 @@ export default function Home() {
);
}
}, [mounted, insertNewDialogue]);

if (!mounted) return null;

return (
Expand Down Expand Up @@ -379,7 +342,7 @@ export default function Home() {
dialogueElement={dialogueElement}
dialogueIndex={dialogueIndex}
isResponding={
(responding || lazyInserting || mapping) &&
(responding || mapping) &&
dialogueIndex === dialogueList.length - 1
}
/>
Expand All @@ -389,11 +352,9 @@ export default function Home() {
<div style={{ height: "1px" }} ref={dialogueEndRef} />
</div>
<TextInput
disabled={responding || lazyInserting || mapping}
disabled={responding || mapping}
placeholder={
responding || lazyInserting || mapping
? "..."
: "Show embassies in Lebanon."
responding || mapping ? "..." : "Show embassies in Lebanon."
}
inputText={inputText}
setInputText={setInputText}
Expand Down

1 comment on commit be906bb

@vercel
Copy link

@vercel vercel bot commented on be906bb Jan 7, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

trident – ./

trident-seven.vercel.app
trident-yuiseki-s-team.vercel.app
trident-git-main-yuiseki-s-team.vercel.app
trident.yuiseki.net

Please sign in to comment.