WIP トレンドから提案

src/components/InputSuggest/SuggestByCurrentLocation/button.tsx

@@ -0,0 +1,61 @@
+import { useCallback, useState } from "react";
+import styles from "./styles.module.scss";
+
+const suggestLocationTexts = {
+  en: "Suggest by current location",
+  ja: "現在地から提案",
+};
+
+const getSuggestLocationText = () => {
+  const lang = navigator.language;
+  if (lang.startsWith("ja")) {
+    return suggestLocationTexts.ja;
+  }
+  return suggestLocationTexts.en;
+};
+
+export const SuggestByCurrentLocationButton: React.FC<{
+  onClick: () => void;
+  onChange: ({
+    coordinates,
+  }: {
+    coordinates: GeolocationCoordinates | null;
+  }) => void;
+}> = ({ onClick, onChange }) => {
+  const [geoLocating, setGeoLocating] = useState(false);
+
+  const onGeolocate = useCallback(() => {
+    setGeoLocating(true);
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        onChange({
+          coordinates: position.coords,
+        });
+        setGeoLocating(false);
+      },
+      (error) => {
+        onChange({
+          coordinates: null,
+        });
+        setGeoLocating(false);
+      }
+    );
+  }, [onChange]);
+
+  return (
+    <div className={styles.currentLocationButtonWrap}>
+      <button
+        className={styles.currentLocationButton}
+        onClick={() => {
+          onGeolocate();
+          onClick();
+        }}
+        disabled={geoLocating}
+      >
+        {geoLocating
+          ? `${getSuggestLocationText()}...`
+          : getSuggestLocationText()}
+      </button>
+    </div>
+  );
+};

src/components/InputSuggest/SuggestByCurrentLocation/index.tsx

@@ -4,46 +4,13 @@ import { useCallback, useEffect, useState } from "react";
 
 import styles from "./styles.module.scss";
 
-const suggestLocationTexts = {
-  en: "Suggest by current location",
-  ja: "現在地から提案",
-};
-
-const getSuggestLocationText = () => {
-  const lang = navigator.language;
-  if (lang.startsWith("ja")) {
-    return suggestLocationTexts.ja;
-  }
-  return suggestLocationTexts.en;
-};
-
 export const SuggestByCurrentLocation: React.FC<{
+  coordinates: GeolocationCoordinates | null;
   onSelected?: (value: string) => void;
-}> = ({ onSelected }) => {
-  const [geoLocating, setGeoLocating] = useState(false);
-  const [geoLocated, setGeoLocated] = useState(false);
-  const [coordinates, setCoordinates] = useState<GeolocationCoordinates | null>(
-    null
-  );
+}> = ({ coordinates, onSelected }) => {
   const [address, setAddress] = useState<string | null>(null);
   const [suggests, setSuggests] = useState<string[]>([]);
 
-  const onGeolocate = useCallback(() => {
-    setGeoLocating(true);
-    navigator.geolocation.getCurrentPosition(
-      (position) => {
-        setGeoLocating(false);
-        setGeoLocated(true);
-        setCoordinates(position.coords);
-      },
-      (error) => {
-        setGeoLocating(false);
-        setGeoLocated(true);
-        setCoordinates(null);
-      }
-    );
-  }, []);
-
   useEffect(() => {
     if (!coordinates) {
       return;
@@ -89,22 +56,9 @@ export const SuggestByCurrentLocation: React.FC<{
   }, [address, suggests]);
 
   return (
-    <div>
-      <div>
-        <button
-          onClick={onGeolocate}
-          disabled={geoLocating}
-          className={styles.geolocateButton}
-        >
-          {geoLocating
-            ? `${getSuggestLocationText()}...`
-            : getSuggestLocationText()}
-        </button>
-      </div>
-      {geoLocated && address && (
-        <div className={styles.suggestAddress}>{address}</div>
-      )}
-      {!geoLocating && suggests?.length > 0 && (
+    <div className={styles.geolocationWrap}>
+      {address && <div className={styles.suggestAddress}>{address}</div>}
+      {coordinates && suggests?.length > 0 && (
         <div className={styles.suggestListWrap}>
           {suggests.map((suggest) => (
             <button

src/components/InputSuggest/SuggestByCurrentLocation/styles.module.scss

@@ -1,10 +1,18 @@
-.geolocateButton {
-  width: 50%;
+.currentLocationButtonWrap {
+  flex: 46%;
+}
+
+.currentLocationButton {
+  width: 100%;
   padding: 6px;
   text-align: center;
   margin-bottom: 8px;
 }
 
+.geolocationWrap {
+  flex: 46%;
+}
+
 .suggestAddress {
   width: 100%;
   margin: auto;

src/components/InputSuggest/SuggestByTrend/button.tsx

@@ -0,0 +1,26 @@
+import styles from "./styles.module.scss";
+
+const suggestLocationTexts = {
+  en: "Suggest by trend",
+  ja: "トレンドから提案",
+};
+
+const getSuggestTrendText = () => {
+  const lang = navigator.language;
+  if (lang.startsWith("ja")) {
+    return suggestLocationTexts.ja;
+  }
+  return suggestLocationTexts.en;
+};
+
+export const SuggestByTrendButton: React.FC<{
+  onClick?: () => void;
+}> = ({ onClick }) => {
+  return (
+    <div className={styles.trendButtonWrap}>
+      <button className={styles.trendButton} onClick={onClick} disabled={true}>
+        {getSuggestTrendText()}
+      </button>
+    </div>
+  );
+};

src/components/InputSuggest/SuggestByTrend/index.tsx

@@ -1,10 +1,46 @@
+import { useEffect, useState } from "react";
+import styles from "./styles.module.scss";
+import { nextPostJsonWithCache } from "@/utils/nextPostJson";
 
 export const SuggestByTrend: React.FC<{
   onSelected?: (value: string) => void;
 }> = ({ onSelected }) => {
+  const [trends, setTrends] = useState<string[]>([
+    "ガザ地区の避難所を表示して",
+    "ウクライナの首都を表示して",
+  ]);
+
+  useEffect(() => {
+    const thisEffect = async () => {
+      const resJson = await nextPostJsonWithCache("/api/ai/trends", {});
+      console.log(resJson.trends);
+      if (!resJson.trends) {
+        return;
+      }
+      const newTrends = resJson.trends.split("\n");
+      setTrends(newTrends);
+    };
+    //thisEffect();
+  }, []);
+
   return (
-    <div>
-      <div>TODO: SuggestByTrend</div>
-    </div>
+    <>
+      <div className={styles.suggestListHeader}>Trends</div>
+      <div className={styles.suggestListWrap}>
+        {trends.map((trend) => {
+          return (
+            <button
+              className={styles.suggestListItem}
+              key={trend}
+              onClick={() => {
+                onSelected && onSelected(trend);
+              }}
+            >
+              {trend}
+            </button>
+          );
+        })}
+      </div>
+    </>
   );
-}
+};

src/components/InputSuggest/SuggestByTrend/styles.module.scss

@@ -0,0 +1,35 @@
+.trendButtonWrap {
+  flex: 46%;
+}
+
+.trendButton {
+  width: 100%;
+  padding: 6px;
+  text-align: center;
+  margin-bottom: 8px;
+}
+
+.suggestListHeader {
+  width: 100%;
+  margin: auto;
+  text-align: center;
+  color: rgba(236, 236, 241, 1);
+  background: rgba(52, 53, 65, 0.8);
+  backdrop-filter: blur(2px);
+  line-height: 2.5rem;
+  height: 2.5rem;
+}
+
+.suggestListWrap {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: no-wrap;
+  gap: 2%;
+}
+
+.suggestListItem {
+  flex: 46%;
+  font-size: 0.8em;
+  margin-top: 12px;
+  padding: 6px;
+}

src/components/InputSuggest/index.tsx

@@ -1,13 +1,54 @@
+import { useCallback, useState } from "react";
 import { SuggestByCurrentLocation } from "./SuggestByCurrentLocation";
+import { SuggestByTrendButton } from "./SuggestByTrend/button";
+
+import styles from "./styles.module.scss";
+import { SuggestByCurrentLocationButton } from "./SuggestByCurrentLocation/button";
 import { SuggestByTrend } from "./SuggestByTrend";
 
 export const InputSuggest: React.FC<{
   onSelected?: (value: string) => void;
 }> = ({ onSelected }) => {
+  const [suggestMode, setSuggestMode] = useState<"location" | "trend" | null>(
+    null
+  );
+  const [coordinates, setCoordinates] = useState<GeolocationCoordinates | null>(
+    null
+  );
+
+  const onChangeSuggestByCurrentLocation = useCallback(
+    ({
+      coordinates,
+    }: {
+      coordinates: GeolocationCoordinates | null;
+    }) => {
+      setCoordinates(coordinates);
+    },
+    []
+  );
+
   return (
-    <div>
-      <SuggestByCurrentLocation onSelected={onSelected} />
-      <SuggestByTrend onSelected={onSelected} />
+    <div className={styles.inputSuggestWrap}>
+      <div className={styles.inputSuggestButtonsWrap}>
+        <SuggestByCurrentLocationButton
+          onClick={() => {
+            setSuggestMode("location");
+          }}
+          onChange={onChangeSuggestByCurrentLocation}
+        />
+        <SuggestByTrendButton
+          onClick={() => {
+            setSuggestMode("trend");
+          }}
+        />
+      </div>
+      {suggestMode === "location" && (
+        <SuggestByCurrentLocation
+          coordinates={coordinates}
+          onSelected={onSelected}
+        />
+      )}
+      {suggestMode === "trend" && <SuggestByTrend onSelected={onSelected} />}
     </div>
   );
-}
+};

src/components/InputSuggest/styles.module.scss

@@ -0,0 +1,10 @@
+.inputSuggestWrap {
+  width: 100%;
+}
+
+.inputSuggestButtonsWrap {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  gap: 2%;
+}