From 071079ef3cb983fa3917ca8a574c1979aa697bbf Mon Sep 17 00:00:00 2001
From: Ala <ala.menai@credium.de>
Date: Sat, 8 Jun 2024 19:09:50 +0100
Subject: [PATCH] doc: write documentation for useBattery

---
 pages/hooks/_meta.json      |  1 +
 pages/hooks/use-battery.mdx | 95 +++++++++++++++++++++++++++++++++++++
 theme.config.jsx            |  6 +--
 3 files changed, 97 insertions(+), 5 deletions(-)
 create mode 100644 pages/hooks/use-battery.mdx

diff --git a/pages/hooks/_meta.json b/pages/hooks/_meta.json
index 4a0b1a9..5d900df 100644
--- a/pages/hooks/_meta.json
+++ b/pages/hooks/_meta.json
@@ -1,5 +1,6 @@
 {
   "use-abort-controller": "useAbortController",
+  "use-battery":"useBattery",
   "use-fetch": "useFetch",
   "use-history": "useHistory",
   "use-local-storage": "useLocalStorage",
diff --git a/pages/hooks/use-battery.mdx b/pages/hooks/use-battery.mdx
new file mode 100644
index 0000000..137d5a8
--- /dev/null
+++ b/pages/hooks/use-battery.mdx
@@ -0,0 +1,95 @@
+# useBattery
+
+<h3 className="mt-4 text-xl font-normal text-gray-400">A custom hook for fetching battery status information.</h3>
+
+## Add hook
+
+Create a file `use-battery.ts` and copy & paste the code from [useBattery](/hooks/use-battery#hook).
+
+## Usage
+
+```tsx {3,6}
+
+import React, { useEffect, useState } from 'react';
+import { useBattery } from './useBattery';
+
+function App() {
+    const batteryInfo = useBattery();
+
+    if (!batteryInfo) {
+        return <div>Battery status unavailable</div>;
+    }
+
+    return (
+        <div>
+            <h1>Battery Status</h1>
+            <p>Charging: {batteryInfo.charging ? 'Yes' : 'No'}</p>
+            <p>Charging Time: {batteryInfo.chargingTime}</p>
+            <p>Discharging Time: {batteryInfo.dischargingTime}</p>
+            <p>Level: {batteryInfo.level}</p>
+        </div>
+    );
+}
+
+export default App;
+
+```
+
+## Hook
+
+```ts
+
+import { useEffect, useState } from 'react'
+
+interface BatteryManager {
+    charging: boolean
+    chargingTime: number
+    dischargingTime: number
+    level: number
+}
+
+export const useBattery = (): BatteryManager | undefined => {
+    const [battery, setBattery] = useState<BatteryManager>()
+
+    const updateBatteryStatus = async () => {
+        try {
+            /* eslint-disable  @typescript-eslint/no-explicit-any */
+            const batteryInfo: BatteryManager = await (navigator as any).getBattery()
+
+            if (batteryInfo) {
+                setBattery(batteryInfo)
+            }
+        } catch (error) {
+            console.error('Error getting battery status:', error)
+        }
+    }
+
+    useEffect(() => {
+        updateBatteryStatus()
+
+        const intervalId = setInterval(updateBatteryStatus, 30000)
+
+        return () => clearInterval(intervalId)
+    }, [])
+
+    return battery
+}
+
+```
+## API
+
+[`useBattery(): BatteryManager | undefined`](/hooks/use-battery#hook)
+
+A custom hook for fetching battery status information in a React application.
+
+ <h1 className='text-xl font-medium mt-6'>Returns</h1>
+
+An object containing the following properties:
+
+| Name             | Type      | Description                                                             |
+| ---------------- | --------- | ----------------------------------------------------------------------- |
+| `charging`       | `boolean` | Indicates whether the battery is currently charging.                   |
+| `chargingTime`   | `number`  | The estimated time, in seconds, until the battery is fully charged.    |
+| `dischargingTime`| `number`  | The estimated time, in seconds, until the battery is fully discharged. |
+| `level`          | `number`  | The battery level, expressed as a percentage (0 to 1).                 |
+
diff --git a/theme.config.jsx b/theme.config.jsx
index d99c772..8aba6fc 100644
--- a/theme.config.jsx
+++ b/theme.config.jsx
@@ -53,14 +53,10 @@ const config = {
   },
   sidebar: {
     titleComponent({ title, type }) {
-      const newHooks = ["useTimeout", "usePersistent", "useFetch"];
-
       return (
         <div className="flex items-center justify-between relative w-full">
           <div>{title}</div>
-          {(title === "useTimeout" ||
-            title === "usePersistentState" ||
-            title === "useFetch") && (
+          {title === "useBattery" && (
             <Badge className=" absolute -right-[0.5em] bg-transparent border-lime-400 text-lime-500 px-[0.5em] hover:bg-transparent">
               New
             </Badge>