Merge pull request #53 from gadingnst/docs/update

docs: update docs and demo

.github/workflows/publish.yml

@@ -22,8 +22,6 @@ jobs:
           registry-url: https://registry.npmjs.org
       - name: Install dependencies
         run: npm ci
-      - name: Checkout to package swr-global-state
-        run: cd packages/swr-global-state
       - name: Build Package
         run: npm run build
       - name: Publishing Package

README.md

@@ -55,7 +55,7 @@ Create a new file for your global state on your root directory. And then, use `c
 import { createStore } from "swr-global-state";
 
 const useCounter = createStore({
-  key: "@app/counter", // (Required) state key
+  key: "@app/counter", // (Required) state key with unique string
   initial: 0 // <- (Required) initial state
 });
 
@@ -272,6 +272,10 @@ import useStore from "swr-global-state";
 const KEY = "@app/account";
 
 function useAccount() {
+  const [loading, setLoading] = useStore({
+    key: `${KEY}-loading`,
+    initial: true
+  });
   const [account, setAccount, swrDefaultResponse] = useStore(
     {
       key: KEY,
@@ -286,6 +290,7 @@ function useAccount() {
             return remoteAccount.json();
           }
           const cachedAccount = window.localStorage.getItem(String(key));
+          setLoading(false);
           return JSON.parse(cachedAccount);
         }
       }
@@ -311,26 +316,24 @@ function useAccount() {
    */
   const { mutate, error } = swrDefaultResponse;
 
-  /**
-   * create custom loading state
-   * @see https://swr.vercel.app/docs/getting-started#make-it-reusable
-   */
-  const loading = !account && !error;
-
   const destroyAccount = async () => {
+    setLoading(true);
     await fetch('/api/account/logout');
     window.localStorage.removeItem(KEY);
     // use default `mutate` from SWR to avoid `onSet` callback in `persistor`
     mutate(null);
+    setLoading(false);
   };
 
   const updateAccount = async (newAccountData) => {
+    setLoading(true);
     await fetch('/api/account', {
       method: 'POST',
       body: JSON.stringify(newAccountData)
       ...
     })
     setAccount(newAccountData);
+    setLoading(false);
   };
 
   // your very custom mutator/dispatcher

apps/swr-global-state-demo/components/GetCount.tsx

@@ -1,20 +1,16 @@
 import useCount from '../states/stores/count';
-import useCountAsync from '../states/stores/count-async';
 import useCountPersisted from '../states/stores/count-persisted';
 
 function GetCount() {
   const [count] = useCount();
   const [countPersist] = useCountPersisted();
-  const [countAsync] = useCountAsync();
 
   return (
     <div>
       <p>
         Current Count: {count}
         <br />
         Current Count (Persisted): {countPersist}
-        <br />
-        Current Count (Async): {countAsync}
       </p>
     </div>
   );

apps/swr-global-state-demo/components/SetCount.tsx

@@ -1,22 +1,18 @@
 import useCount from '../states/stores/count';
 import useCountPersisted from '../states/stores/count-persisted';
-import useCountAsync from '../states/stores/count-async';
 
 function SetCount() {
   const [, setCount] = useCount();
   const [, setCountPersisted] = useCountPersisted();
-  const [, setCountAsync] = useCountAsync();
 
   const decreaseCount = () => {
     setCount(prev => prev - 1);
     setCountPersisted(prev => prev - 1);
-    setCountAsync(prev => prev - 1);
   };
 
   const increaseCount = () => {
     setCount(prev => prev + 1);
     setCountPersisted(prev => prev + 1);
-    setCountAsync(prev => prev + 1);
   };
 
   return (

apps/swr-global-state-demo/pages/about.tsx

@@ -3,18 +3,18 @@
 import Link from 'next/link';
 import useCount from '../states/stores/count';
 import useCountPersisted from '../states/stores/count-persisted';
-import useCountAsync from '../states/stores/count-async';
 import useData from '../states/stores/data';
 
 const About = () => {
   const [count] = useCount();
   const [countPersist] = useCountPersisted();
-  const [countAsync] = useCountAsync();
-  const { data, login, logout, error } = useData();
+  const { data, login, logout, error, isLoading } = useData();
 
   const renderData = () => {
-    let msg = 'Loading...';
-    if (error) {
+    let msg = '';
+    if (isLoading) {
+      msg = 'Loading...';
+    } else if (error) {
       msg = 'You must login before see the data';
     } else if (data) {
       msg = `By: ${data?.maintaner || '-'}`;
@@ -46,8 +46,6 @@ const About = () => {
           Count from Home: {count}
           <br />
           Count from Home (Persisted): {countPersist}
-          <br />
-          Count from Home (Async): {countAsync}
         </p>
         <Link className="App-link" href="/">
           Go To Home

apps/swr-global-state-demo/states/stores/count-persisted.ts

@@ -5,7 +5,7 @@ import localStoragePersistor from '../persistors/local-storage';
  * @see https://github.com/gadingnst/swr-global-state#custom-hooks
  */
 const useCountPersist = createStore<number>({
-  key: '@app/count-persisted', // (Required) state key
+  key: '@app/count-persisted', // (Required) state key with unique string
   initial: 0, // <- (Required) initial state
   persistor: localStoragePersistor
 });

apps/swr-global-state-demo/states/stores/count.ts

@@ -4,7 +4,7 @@ import { createStore } from 'swr-global-state';
  * @see https://github.com/gadingnst/swr-global-state#custom-hooks
  */
 const useCount = createStore({
-  key: '@app/count', // (Required) state key
+  key: '@app/count', // (Required) state key with unique string
   initial: 0 // <- (Required) initial state
 });
 

apps/swr-global-state-demo/states/stores/data.ts

@@ -10,6 +10,10 @@ const KEY = '@app/data';
 const DUMMY_TOKEN_KEY = '@app/token';
 
 function useData() {
+  const [isLoading, setLoading] = useStore({
+    key: `${KEY}-loading`,
+    initial: true
+  });
   const [data, , swrDefaultResponse] = useStore(
     {
       key: KEY,
@@ -36,6 +40,8 @@ function useData() {
             }
             const cachedData = localStoragePersistor.onGet(key);
             return cachedData;
+          } finally {
+            setLoading(false);
           }
         }
       }
@@ -49,18 +55,22 @@ function useData() {
   const { mutate, error } = swrDefaultResponse;
 
   const login = async() => {
+    setLoading(true);
     window.localStorage.setItem(DUMMY_TOKEN_KEY, 'token_login');
     await sleep(750);
     mutate();
+    setLoading(false);
   };
 
   const logout = async() => {
+    setLoading(true);
     window.localStorage.removeItem(KEY);
     window.localStorage.removeItem(DUMMY_TOKEN_KEY);
     // simulate async request
     await sleep();
     // fetching logout
     mutate(null);
+    setLoading(false);
   };
 
   // your very custom mutator/dispatcher
@@ -69,7 +79,8 @@ function useData() {
     data,
     error,
     login,
-    logout
+    logout,
+    isLoading
   };
 }