Fix implementation of heartrate retrieving, Update styling

package.json

@@ -30,6 +30,7 @@
     "@tailwindcss/typography": "^0.4.0",
     "autoprefixer": "^10.3.4",
     "axios": "^0.21.4",
+    "date-fns": "^2.24.0",
     "microcms-js-sdk": "^1.2.0",
     "moment": "^2.29.1",
     "next": "^11.1.2",

pages/api/Fitbit/Heartrate.js

@@ -0,0 +1,44 @@
+// React
+import { format } from 'date-fns'
+
+const {
+    FITBIT_TOKEN: bearer
+  } = process.env;
+
+const today = format(new Date(), 'yyyy-MM-dd')
+
+export const getName = async (props) => {
+  const uuid = props;
+  return fetch(
+        'https://api.fitbit.com/1/user/-/activities/heart/date/today/1d/1sec/time/00:00/23:59.json',
+        {
+            headers: {
+                Authorization: `Bearer ${bearer}`,
+              },
+        }
+    );
+};
+
+const FitbitHeartrate = async (req, res) => {
+    const { uuid } = req.query
+    const response = await getName(uuid);
+    const data = await response.json();
+    if (response.status === 204 || response.status > 400) {
+      return res.status(200).send("404");
+    }
+    // const heartrate = data.map((item, i) => {
+    //         if (item.dateTime = today) {
+    //             return item
+    //         } else {
+    //             return "Failed to retrieve data."
+    //         }
+    //     }
+    // )
+    const array = data["activities-heart-intraday"].dataset
+    const heartrate = array[array.length - 1]
+    return res.status(200).json({
+      heartrate,
+    });
+};
+
+export default FitbitHeartrate

pages/api/Fitbit/Sleep.js

@@ -0,0 +1,35 @@
+// React
+import { format } from 'date-fns'
+
+const {
+    FITBIT_TOKEN: bearer
+  } = process.env;
+
+const today = format(new Date(), 'yyyy-MM-dd')
+
+export const getName = async (props) => {
+  const uuid = props;
+  return fetch(
+        'https://api.fitbit.com/1.2/user/-/sleep/date/' + today + '.json',
+        {
+            headers: {
+                Authorization: `Bearer ${bearer}`,
+              },
+        }
+    );
+};
+
+const FitbitSleep = async (req, res) => {
+    const { uuid } = req.query
+    const response = await getName(uuid);
+    const data = await response.json();
+    if (response.status === 204 || response.status > 400) {
+      return res.status(200).send("404");
+    }
+    const duration = data.summary.totalMinutesAsleep
+    return res.status(200).json({
+      duration,
+    });
+};
+
+export default FitbitSleep

pages/components/Fitbit/Heartrate.js

@@ -0,0 +1,38 @@
+// Data fetching
+import useSwr from 'swr'
+
+// Font Awesome
+import { faHeartbeat } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+// Data fetching implements
+const fetcher = (url) => fetch(url).then((res) => res.json())
+
+function App (props) {
+  const { data, error } = useSwr(
+    '/api/Fitbit/Heartrate',
+    fetcher
+  )
+  
+  if (error) {
+    return (
+      <>エラーが発生しました。</>
+    )
+  } else {
+    if (!data) {
+      return (
+        <>読み込み中...</>
+      )
+    } else {
+        return (
+            <>
+                <FontAwesomeIcon icon={faHeartbeat} className="w-5 h-5 inline ml-3"/>
+                &nbsp;
+                {data.heartrate.value}
+            </>
+        )
+    }
+  }
+}
+
+export default App;

pages/components/Fitbit/Sleep.js

@@ -0,0 +1,44 @@
+// Data fetching
+import useSwr from 'swr'
+
+// Font Awesome
+import { faBed } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+// Data fetching implements
+const fetcher = (url) => fetch(url).then((res) => res.json())
+
+function App (props) {
+  const { data, error } = useSwr(
+    '/api/Fitbit/Sleep',
+    fetcher
+  )
+  
+  if (error) {
+    return (
+      <>エラーが発生しました。</>
+    )
+  } else {
+    if (!data) {
+      return (
+        <>読み込み中...</>
+      )
+    } else {
+        const duration = data.duration
+        const hours = Math.floor(duration / 60)
+        let minutes = duration % 60
+        if (minutes <= 9) {
+            minutes = '0' + minutes
+        }
+        return (
+            <>
+                <FontAwesomeIcon icon={faBed} className="w-5 h-5 inline"/>
+                &nbsp;
+                {hours}:{minutes}
+            </>
+        )
+    }
+  }
+}
+
+export default App;

pages/profile.js

@@ -25,6 +25,8 @@ import PublicKeys from './components/Profile/PublicKeys'
 import Button from './components/Profile/Button'
 import Contact from './components/Profile/Contact'
 import NintendoSW from "./components/Profile/NintendoSW"
+import FitbitSleep from "./components/Fitbit/Sleep"
+import FitbitHeartrate from "./components/Fitbit/Heartrate"
 
 // next-seo
 import { NextSeo } from 'next-seo';
@@ -61,6 +63,8 @@ export default function Profile(props) {
             <div>
             <DiscordPlaying />
             <Spotify />
+            <FitbitSleep />
+            <FitbitHeartrate />
             </div>
           </div>
           

yarn.lock

@@ -1541,6 +1541,11 @@ data-uri-to-buffer@3.0.1:
   resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz#594b8973938c5bc2c33046535785341abc4f3636"
   integrity sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og==
 
+date-fns@^2.24.0:
+  version "2.24.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.24.0.tgz#7d86dc0d93c87b76b63d213b4413337cfd1c105d"
+  integrity sha512-6ujwvwgPID6zbI0o7UbURi2vlLDR9uP26+tW6Lg+Ji3w7dd0i3DOcjcClLjLPranT60SSEFBwdSyYwn/ZkPIuw==
+
 debug@2, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"