add files

Author: Niels Peschel

.github/PULL_REQUEST_TEMPLATE.md

@@ -15,7 +15,7 @@ _Put an `x` in the boxes that apply_
 
 _Put an `x` in the boxes that apply. You can also fill these out after creating the PR. If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code._
 
-- [ ] I have read the [CONTRIBUTING](https://github.com/Optum/oss-template/blob/main/CONTRIBUTING.md) doc
+- [ ] I have read the [CONTRIBUTING](../CONTRIBUTING.md) doc
 - [ ] I have added tests that prove my fix is effective or that my feature works
 - [ ] I have added necessary documentation (if appropriate)
 - [ ] Any dependent changes have been merged and published in downstream modules

.gitignore

@@ -0,0 +1,58 @@
+#VS Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/extensions.json
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+package-lock.json
+lerna-debug.log*
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Dependency directories
+node_modules/
+
+#report
+.scannerwork/
+.history/
+.idea
+reports/
+lhci-data/
+
+# misc
+.DS_Store
+
+# Build Output
+build/
+.jest-test-results.json
+storybook-static/
+gh-build/
+.nyc_output/
+
+# https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
+.yarn/*
+!.yarn/cache
+!.yarn/releases
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+.pnp.*
+
+.yalc/
+yalc.lock
+
+packages/**/*.jsx
+packages/**/*.js.map
+packages/**/*.jsx.map
+packages/**/*.d.ts
+packages/scl-authenticated-proxy/logs
+.scannerwork/
+.history
+packages/client/themes/tmp/

NOTICE.txt

@@ -1,9 +1,10 @@
-<Insert Project Name Here>
+react-hooks
 Copyright 2022 Optum
 
 Project Description:
 ====================
-<Short description of your project>
+A reusable set of React hooks.
 
 Author(s):
-<List the names and GitHub IDs of the original project authors>
+Niels Peschel: NielsJPeschel
+Nicholas Thurow: nthurow

README.md

@@ -25,23 +25,21 @@
 <!-- PROJECT LOGO -->
 <br />
 <div align="center">
-  <a href="https://github.com/github_username/repo_name">
+  <a href="https://github.com/optum/react-hooks">
     <img src="images/logo.png" alt="Logo" width="80" height="80">
   </a>
 
-<h3 align="center">project_title</h3>
+<h3 align="center">react-hooks</h3>
 
   <p align="center">
-    project_description
+    A reusable set of React hooks.
     <br />
-    <a href="https://github.com/github_username/repo_name"><strong>Explore the docs »</strong></a>
+    <a href="https://github.com/optum/react-hooks"><strong>Explore the docs »</strong></a>
     <br />
     <br />
-    <a href="https://github.com/github_username/repo_name">View Demo</a>
+    <a href="https://github.com/optum/react-hooks/issues">Report Bug</a>
     ·
-    <a href="https://github.com/github_username/repo_name/issues">Report Bug</a>
-    ·
-    <a href="https://github.com/github_username/repo_name/issues">Request Feature</a>
+    <a href="https://github.com/optum/react-hooks/issues">Request Feature</a>
   </p>
 </div>
 
@@ -78,83 +76,94 @@
 <!-- ABOUT THE PROJECT -->
 ## About The Project
 
-[![Product Name Screen Shot][product-screenshot]](https://example.com)
-
-Here's a blank template to get started: To avoid retyping too much info. Do a search and replace with your text editor for the following: `github_username`, `repo_name`, `twitter_handle`, `linkedin_username`, `email`, `email_client`, `project_title`, `project_description`
+This repository contains various reusable hooks built and currently being used throughout [Optum](https://optum.com). They were created with the goal of simplifying otherwise complex react procedures and concepts, such as state management of asynchronous data, accessibility, etc. Please feel free to explore this repository and use, contribute, and add to these hooks!
 
 <p align="right">(<a href="#top">back to top</a>)</p>
 
+<!-- GETTING STARTED -->
+## Getting Started
+Currently, `react-hooks` is not published in `npm`. Please see [Test Changes Locally](#test-locally) for a way to run our hooks locally
 
+### Prerequisites
+Have desired javascript package mananger installed on your machine:
 
-### Built With
-
-* [Next.js](https://nextjs.org/)
-* [React.js](https://reactjs.org/)
-* [Vue.js](https://vuejs.org/)
-* [Angular](https://angular.io/)
-* [Svelte](https://svelte.dev/)
-* [Laravel](https://laravel.com)
-* [Bootstrap](https://getbootstrap.com)
-* [JQuery](https://jquery.com)
-
-<p align="right">(<a href="#top">back to top</a>)</p>
-
-
+* [yarn](https://classic.yarnpkg.com/lang/en/docs/install/#mac-stable)
+  * preferred but not required
 
-<!-- GETTING STARTED -->
-## Getting Started
+or 
+* [npm](https://www.npmjs.com/package/npm)
 
-This is an example of how you may give instructions on setting up your project locally.
-To get a local copy up and running follow these simple example steps.
 
-### Prerequisites
+**Optional**
+* [yalc](https://github.com/wclr/yalc) 
+  * used for testing package locally
 
-This is an example of how to list things you need to use the software and how to install them.
-* npm
-  ```sh
-  npm install npm@latest -g
-  ```
 
 ### Installation
-
-1. Get a free API Key at [https://example.com](https://example.com)
-2. Clone the repo
+Currently, this package is not published and can therefore not be installed by conventional means (_yarn_ or _npm_). Please see next section if you still wish to utilize this pacakge locally 
+<!-- 1. Clone the repo
    ```sh
-   git clone https://github.com/github_username/repo_name.git
+   git clone https://github.com/optum/react-hooks.git
    ```
-3. Install NPM packages
+2. Install NPM packages
    ```sh
-   npm install
-   ```
-4. Enter your API in `config.js`
-   ```js
-   const API_KEY = 'ENTER YOUR API';
-   ```
+   yarn install
+   ``` -->
 
 <p align="right">(<a href="#top">back to top</a>)</p>
 
+<div id='test-locally'>
+### Testing Changes Locally
+If you are in the process of making changes to this repo and wish to test them, or simply wish to playground with our hooks:
+
+1. Have a working react project
+2. Have [yalc](https://github.com/wclr/yalc) installed globally
+```sh
+yarn global add yalc
+```
+3. Inside `react-hooks` directory, publish package to yalc store
+```sh
+yalc publish
+```
+4. Inside of directory of your project, add package
+```sh
+yalc add react-hooks
+```
+5. As you make changes inside of `react-hooks`, continue publishing to store, as explained in step 3.
+6. Update yalc store inside of project directory after each new publish (this may require stopping running instances of project)
+```sh
+yalc update
+```
+7. Once finished, remove yalc package from project directory
+```sh
+yalc remove react-hooks
+```
+or
+```sh
+yalc remove --all
+```
+(if you wish to remove other yalc packages)
 
 
-<!-- USAGE EXAMPLES -->
-## Usage
 
-Use this space to show useful examples of how a project can be used. Additional screenshots, code examples and demos work well in this space. You may also link to more resources.
+<p align="right">(<a href="#top">back to top</a>)</p>
 
-_For more examples, please refer to the [Documentation](https://example.com)_
+<!-- USAGE EXAMPLES -->
+## Usage
+Please refer to directories inside of `/hooks` for usages of individual hooks. 
 
 <p align="right">(<a href="#top">back to top</a>)</p>
 
 
 
 <!-- ROADMAP -->
 ## Roadmap
-
+<!-- 
 - [] Feature 1
 - [] Feature 2
 - [] Feature 3
-    - [] Nested Feature
-
-See the [open issues](https://github.com/github_username/repo_name/issues) for a full list of proposed features (and known issues).
+    - [] Nested Feature -->
+See the [open issues](https://github.com/optum/react-hooks/issues) for a full list of proposed features (and known issues).
 
 <p align="right">(<a href="#top">back to top</a>)</p>
 
@@ -190,40 +199,38 @@ Distributed under the Apache 2.0 License. See `LICENSE.txt` for more information
 <!-- MAINTAINERS -->
 ## Maintainers
 
-- Full Name 1
-  - GitHub Enterprise: [github_username](https://github.com/username1)
-  - Email: email1@email.com
-- Full Name 2
-  - GitHub Enterprise: [github_username](https://github.com/username2)
-  - Email: [email protected]
+- Niels Peschel
+  - GitHub: [NielsJPeschel](https://github.com/NielsJPeschel)
+  - Email: peschel.niels@gmail.com
+- Nicholas Thurow
+  - GitHub: [nthurow](https://github.com/nthurow)
+  <!-- - Email: [email protected] -->
 
 <p align="right">(<a href="#top">back to top</a>)</p>
 
-
-
 <!-- ACKNOWLEDGMENTS -->
-## Acknowledgments
+<!-- ## Acknowledgments
 
 * []()
 * []()
 * []()
 
-<p align="right">(<a href="#top">back to top</a>)</p>
+<p align="right">(<a href="#top">back to top</a>)</p> -->
 
 
 
 <!-- MARKDOWN LINKS & IMAGES -->
 <!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
-[contributors-shield]: https://img.shields.io/github/contributors/github_username/repo_name.svg?style=for-the-badge
-[contributors-url]: https://github.com/github_username/repo_name/graphs/contributors
-[forks-shield]: https://img.shields.io/github/forks/github_username/repo_name.svg?style=for-the-badge
-[forks-url]: https://github.com/github_username/repo_name/network/members
-[stars-shield]: https://img.shields.io/github/stars/github_username/repo_name.svg?style=for-the-badge
-[stars-url]: https://github.com/github_username/repo_name/stargazers
-[issues-shield]: https://img.shields.io/github/issues/github_username/repo_name.svg?style=for-the-badge
-[issues-url]: https://github.com/github_username/repo_name/issues
-[license-shield]: https://img.shields.io/github/license/github_username/repo_name.svg?style=for-the-badge
-[license-url]: https://github.com/github_username/repo_name/blob/master/LICENSE.txt
+[contributors-shield]: https://img.shields.io/github/contributors/optum/react-hooks.svg?style=for-the-badge
+[contributors-url]: https://github.com/optum/react-hooks/graphs/contributors
+[forks-shield]: https://img.shields.io/github/forks/optum/react-hooks.svg?style=for-the-badge
+[forks-url]: https://github.com/optum/react-hooks/network/members
+[stars-shield]: https://img.shields.io/github/stars/optum/react-hooks.svg?style=for-the-badge
+[stars-url]: https://github.com/optum/react-hooks/stargazers
+[issues-shield]: https://img.shields.io/github/issues/optum/react-hooks.svg?style=for-the-badge
+[issues-url]: https://github.com/optum/react-hooks/issues
+[license-shield]: https://img.shields.io/github/license/optum/react-hooks.svg?style=for-the-badge
+[license-url]: https://github.com/optum/react-hooks/blob/master/LICENSE.txt
 [linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
-[linkedin-url]: https://linkedin.com/in/linkedin_username
+[linkedin-url]: https://linkedin.com/in/niels-peschel
 [product-screenshot]: images/screenshot.png

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    presets: [
+      ['@babel/preset-env', {targets: {node: 'current'}}],
+      '@babel/preset-typescript'
+    ],
+};

hooks/index.ts

@@ -0,0 +1,5 @@
+export * from './useLoadData';
+export * from './useCommonContext';
+export * from './useFocus';
+export * from './useRetry';
+export * from './useServiceEffect';

hooks/useCommonContext/README.md

@@ -0,0 +1,36 @@
+# `useCommonContext`
+
+A React hook that allows connecting to several potential active react contexts.
+
+## Usage
+`useCommonContext` is designed to be used in tandem with **React context**. If a component is being used in a variety of locations that each are serving a different context (of the same type):  
+
+
+```Typescript
+import React from 'react';
+import {useCommonContext} from 'react-hooks';
+
+import {useContextA} from 'some-context-provider-a';
+import {useContextB} from 'some-context-provider-b';
+import {useContextC} from 'some-context-provider-c';
+
+
+export const MyComponent = (props) => {
+   const context = useCommonContext(useContextA, useContextB, useContextC);
+
+    return ...
+}
+```
+
+## API
+
+`useCommonContext` takes the following arguments:
+
+| Name | Type   | Description |
+|-|-|-|
+| `...contextHook` | `(() => T)[]` | any number of contexts with return type, `T` |
+
+
+The return value of `useCommonContext` is `T`.
+
+**Note: `useCommonContext` is designed to be used where only one of the passed contexts is active. Passing several active contexts will result in the last passed context being used. If no context is active, an error will be thrown**

hooks/useCommonContext/index.ts

@@ -0,0 +1 @@
+export * from './useCommonContext';

hooks/useCommonContext/useCommonContext.ts

@@ -0,0 +1,15 @@
+export function useCommonContext<T>(...contextHooks: (() => T)[]): T {
+  const context = contextHooks.reduce((prev, useContext) => {
+    try {
+      return useContext();
+    } catch {
+      return prev;
+    }
+  }, undefined as T | undefined);
+
+  if (!context) {
+    throw new Error('contexts not available');
+  }
+
+  return context;
+}