react-usespinner 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 William Cairns
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.DEV.md

@@ -0,0 +1,6 @@
+
+# Publish component
+```
+npm run compile
+npm publish
+```

package/README.md

@@ -0,0 +1,75 @@
+# useSpinner
+
+Wraps action calls that can be grouped together to display a spinner while 1 or more is active. By default an action will be marked as complete after 10 seconds. 
+
+Any item that may require an indication of processing may be considered an action. For example a fetch call, or a long running process.
+
+Typically before a fetch is started, an action would be started for the fetch. Once the fetch rresolves or is in error then the action can be ended
+
+```javascript
+start("slowapi") // start action
+console.log("Starting slowapi action")
+fetch("https://flash-the-slow-api.herokuapp.com/delay/3000")
+.then(res => res.text())
+.then(data => console.log(data))
+.finally(() => {
+    console.log("Ending slowapi action")
+    end("slowapi") // finally end action
+})
+```
+
+## Usage
+
+```javascript
+import useSpinner from './hooks/usespinner';
+
+const { start, end, clear, busy, SpinnerContainer } = useSpinner();
+
+// To start a new action
+start("10 Second timer")
+
+// To end an existing action
+end("10 Second timer")
+
+// clear all actions
+clear();
+
+// Check if any actions currently running
+if (busy()) {
+    console.log("There are actions running")
+}
+
+// Display a spinner (if any actions are running) 
+<SpinnerContainer>
+    LOADING
+</SpinnerContainer>
+```
+
+## Configuration
+
+A global timeout can be configured, by default this is 10 seconds
+
+```javascript
+// to set a global delay of 1 second
+const { start, end, clear, SpinnerContainer } = useSpinner({ delay: 1000 });
+```
+
+Each action can also be configurred with a configurable timeout
+```javascript
+// To start a new action that may take up to 60 seconds
+start("10 Second timer", { delay: 60000 })
+```
+
+The action will be kept active based on (in order), action delay, global delay, 10 seconds
+
+## ending actions
+
+calling the end action method will immediatly close all actions with the given name, irrespective to when they were started, if mutiple actions with the same name are to be started each must be uniquely identified by name
+
+```javascript
+start("genericname", { delay: 10000})
+start("genericname", { delay: 20000})
+start("genericname", { delay: 30000})
+
+end("genericname"); // will mark all three actions as complete as they have the same name
+```

package/dist/index.ts

@@ -0,0 +1,5 @@
+import useSpinner from "./usespinner";
+
+export {
+    useSpinner
+}

package/dist/usespinner.tsx

@@ -0,0 +1,64 @@
+import React, { useState, useEffect, useRef } from "react";
+
+interface Options {
+  delay: number;
+}
+interface SpinnerProps {
+  children: React.ReactNode;
+}
+type Action = {
+  name: string;
+  endtime: number;
+};
+
+const useSpinner = (globalOptions?: Options) => {
+  // store a list of actions
+  const [actions, setActions] = useState<Action[]>([]);
+
+  // set a timer that every second checks if any actions can be closed
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (actions) {
+        setActions((prev) => prev.filter((item) => item.endtime > Date.now()));
+      }
+    }, 1000);
+    return () => clearTimeout(timer);
+  }, [actions]);
+
+  // Allow the start of a new Action to be tracked
+  const start = (name: string, options?: Options) => {
+    const delay: number = options?.delay || globalOptions?.delay || 10000;
+    const currentAction: Action = { name: name, endtime: Date.now() + delay };
+    setActions((prev) => [...prev, currentAction]);
+  };
+
+  // remove any action that has the selected name
+  const end = (name: string) => {
+    if (actions) {
+      setActions((prev) => prev.filter((item) => item.name !== name));
+    }
+  };
+  // clear all current actions
+  const clear = () => {
+    setActions([]);
+  };
+
+  const busy = () => {
+      return actions && actions.length > 0
+  }
+
+  // JSX component used to wrap spinner of choice
+  const SpinnerContainer = ({ children }: SpinnerProps) => {
+    // If no active Actions then dont display anything
+    if (actions && actions.length === 0) {
+      return null;
+    }
+
+    return <div className="useSpinner">{children}</div>;
+  };
+
+  // return hook values
+  return { start, end, clear, busy, SpinnerContainer };
+};
+
+export default useSpinner;

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "react-usespinner",
+  "version": "1.0.0",
+  "description": "track actions in progress to know if a spinner should be display. Actions expire within 10 seconds if not expired in code",
+  "private": false,
+  "license": "MIT",
+  "main": "dist/index.js",
+  "author": "cairnswm",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cairnswm/usespinner.git"
+  },
+  "peerDependencies": {
+    "bootstrap": "^5.1.3",
+    "react": "17-18",
+    "react-bootstrap": "^2.0.4",
+    "react-dom": "17-18",
+    "react-scripts": "4-5"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.3",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "cross-env": "^7.0.3",
+    "react": "17-18",
+    "react-dom": "17-18",
+    "react-scripts": "4-5",
+    "typescript": "^4.9.3",
+    "web-vitals": "^2.1.4"
+  },
+  "keywords": [
+    "react",
+    "react hooks",
+    "fetch",
+    "spinner",
+    "actions"
+  ],
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "clean": "rimraf dist",
+    "compile": "npm run clean && cross-env NODE_ENV=production babel src/hooks --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,stories.js,__snapshots__"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "dependencies": {
+    "@babel/cli": "^7.19.3",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6"
+  }
+}