From 1f943a612f650cb2c4e3d84fe842dc393082fc9b Mon Sep 17 00:00:00 2001 From: William Kelley Date: Sun, 12 Dec 2021 15:45:54 -0500 Subject: [PATCH 1/9] chore(docs): add changelog --- packages/react-meteor-accounts/CHANGELOG.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 packages/react-meteor-accounts/CHANGELOG.md diff --git a/packages/react-meteor-accounts/CHANGELOG.md b/packages/react-meteor-accounts/CHANGELOG.md new file mode 100644 index 00000000..7636935c --- /dev/null +++ b/packages/react-meteor-accounts/CHANGELOG.md @@ -0,0 +1,14 @@ +# Changelog + +Release versions follow [Semantic Versioning 2.0.0 guidelines](#https://semver.org/). + +## v1.0.0-beta.1 + +2021-10-20 (date of last commit) + +### Features + +- `useUserId`: initial implementation. +- `useUser`: initial implementation. +- `withUserId`: initial implementation. +- `withUser`: initial implementation. From a88ab6d28f22ad6fa4418bba2c7c9d5788262bbb Mon Sep 17 00:00:00 2001 From: William Kelley Date: Sun, 12 Dec 2021 16:36:16 -0500 Subject: [PATCH 2/9] chore(readme): add general info and api docs --- packages/react-meteor-accounts/README.md | 144 ++++++++++++++++++++++- 1 file changed, 141 insertions(+), 3 deletions(-) diff --git a/packages/react-meteor-accounts/README.md b/packages/react-meteor-accounts/README.md index fe22d5de..93194846 100644 --- a/packages/react-meteor-accounts/README.md +++ b/packages/react-meteor-accounts/README.md @@ -1,4 +1,142 @@ -meteor/react-accounts -===================== +# react-meteor-accounts -A couple of simple hooks for accessing Meteor Accounts state. +Simple hooks and higher-order components (HOCs) for getting reactive, stateful values of Meteor's Accounts data sources. + +## Table of Contents + +- [Installation](#installation) + - [Peer npm dependencies](#peer-npm-dependencies) + - [Changelog](#changelog) +- [Usage](#usage) + - [`useUser` / `withUser`](#useuser--withUser) + - [`useUserId` / `withUserId`](#useuserid--withUserId) + +## Installation + +Install the package from Atmosphere: + +```shell +meteor add react-meteor-accounts +``` + +### Peer npm dependencies + +Install React if you have not already: + +```shell +meteor npm install react +``` + +### Changelog + +For recent changes, check the [changelog](./CHANGELOG.md) + +## Usage + +Utilities for each data source are available in two React paradigms: hooks for use in functional components and higher-order components (HOCs) for use with class components. + +_Note:_ All HOCs forward refs. + +### useUser() / withUser(...) + +The hook, `useUser()`, returns a stateful value of the current user record. + +The HOC, `withUser(Component)`, returns a wrapped version of `Component` that receives a prop the current user record, `user`. + +For more details about the data source, consult the documentation of [`Meteor.user(...)](https://docs.meteor.com/api/accounts.html#Meteor-user). + +Examples: + +```tsx +import React from 'react'; +import { useUser, withUser } from 'meteor/react-meteor-accounts'; + +// Hook +function Foo() { + const user = useUser(); + + if (user === null) { + return

Log in

; + } + + return

Hello {user.username}

; +} + +// HOC +function Bar(props) { + if (props.user === null) { + return

Log in

; + } + + return

Hello {props.user.username}

; +} + +withUser(Bar); +``` + +TypeScript signatures: + +```ts +// Hook +const useUser: () => Meteor.User; + +// HOC +const withUser: (Component: any) => React.ForwardRefExoticComponent>; +``` + +### useUserId() / withUserId(...) + +The hook, `useUserId()`, returns a stateful value of the current user id. + +The HOC, `withUserId(Component)`, returns a wrapped version of `Component` that receives a prop the current user id, `userId`. + +For more details about the data source, consult the documentation of [`Meteor.userId()](https://docs.meteor.com/api/accounts.html#Meteor-userId). + +Examples: + +```tsx +import React from 'react'; +import { useUserId, withUserId } from 'meteor/react-meteor-accounts'; + +// Hook +function Foo() { + const userId = useUserId(); + + return ( +
+

Account Details

+ {userId ? ( +

Your unique account id is {userId}.

+ ) : ( +

Log-in to view your account details.

+ )} +
+ ); +} + +// HOC +function Bar(props) { + return ( +
+

Account Details

+ {props.userId ? ( +

Your unique account id is {props.userId}.

+ ) : ( +

Log-in to view your account details.

+ )} +
+ ) +} + +withUserId(Bar); +``` + +TypeScript signatures: + +```ts +// Hook +const useUserId: () => string; + +// HOC +const withUserId: (Component: any) => React.ForwardRefExoticComponent>; +``` From da6ff3d52119f7ab73f6f8e1c1458afb40c902ba Mon Sep 17 00:00:00 2001 From: William Kelley Date: Sun, 12 Dec 2021 16:41:27 -0500 Subject: [PATCH 3/9] chore(react-meteor-accounts): add note for min React version --- packages/react-meteor-accounts/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-meteor-accounts/README.md b/packages/react-meteor-accounts/README.md index 93194846..e39e68e3 100644 --- a/packages/react-meteor-accounts/README.md +++ b/packages/react-meteor-accounts/README.md @@ -27,6 +27,8 @@ Install React if you have not already: meteor npm install react ``` +_Note:_ The minimum supported version of React is v16.8 ("the one with hooks"). + ### Changelog For recent changes, check the [changelog](./CHANGELOG.md) From f64fc3f1e549f0e60b0f2db1ebe6a72ab14b12ad Mon Sep 17 00:00:00 2001 From: William Kelley Date: Sun, 12 Dec 2021 18:09:09 -0500 Subject: [PATCH 4/9] chore(docs): fix link --- packages/react-meteor-accounts/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-meteor-accounts/CHANGELOG.md b/packages/react-meteor-accounts/CHANGELOG.md index 7636935c..5a77c659 100644 --- a/packages/react-meteor-accounts/CHANGELOG.md +++ b/packages/react-meteor-accounts/CHANGELOG.md @@ -1,6 +1,6 @@ # Changelog -Release versions follow [Semantic Versioning 2.0.0 guidelines](#https://semver.org/). +Release versions follow [Semantic Versioning 2.0.0 guidelines](https://semver.org/). ## v1.0.0-beta.1 From 7260e42a22df0f0d36c15040b70a6f16b904e24f Mon Sep 17 00:00:00 2001 From: William Kelley Date: Sun, 12 Dec 2021 18:10:46 -0500 Subject: [PATCH 5/9] chore(docs): add missing word --- packages/react-meteor-accounts/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-meteor-accounts/README.md b/packages/react-meteor-accounts/README.md index e39e68e3..7f65721e 100644 --- a/packages/react-meteor-accounts/README.md +++ b/packages/react-meteor-accounts/README.md @@ -43,7 +43,7 @@ _Note:_ All HOCs forward refs. The hook, `useUser()`, returns a stateful value of the current user record. -The HOC, `withUser(Component)`, returns a wrapped version of `Component` that receives a prop the current user record, `user`. +The HOC, `withUser(Component)`, returns a wrapped version of `Component` that receives a prop of the current user record, `user`. For more details about the data source, consult the documentation of [`Meteor.user(...)](https://docs.meteor.com/api/accounts.html#Meteor-user). @@ -90,7 +90,7 @@ const withUser: (Component: any) => React.ForwardRefExoticComponent Date: Sun, 12 Dec 2021 18:16:50 -0500 Subject: [PATCH 6/9] chore(docs): improve wording and HOC examples --- packages/react-meteor-accounts/README.md | 46 +++++++++++++----------- 1 file changed, 25 insertions(+), 21 deletions(-) diff --git a/packages/react-meteor-accounts/README.md b/packages/react-meteor-accounts/README.md index 7f65721e..50d81f57 100644 --- a/packages/react-meteor-accounts/README.md +++ b/packages/react-meteor-accounts/README.md @@ -31,7 +31,7 @@ _Note:_ The minimum supported version of React is v16.8 ("the one with hooks"). ### Changelog -For recent changes, check the [changelog](./CHANGELOG.md) +For recent changes, check the [changelog](./CHANGELOG.md). ## Usage @@ -43,9 +43,9 @@ _Note:_ All HOCs forward refs. The hook, `useUser()`, returns a stateful value of the current user record. -The HOC, `withUser(Component)`, returns a wrapped version of `Component` that receives a prop of the current user record, `user`. +The HOC, `withUser(Component)`, returns a wrapped version of `Component`, where `Component` receives a prop of the current user record, `user`. -For more details about the data source, consult the documentation of [`Meteor.user(...)](https://docs.meteor.com/api/accounts.html#Meteor-user). +For more details about the data source, consult the documentation of [`Meteor.user`](https://docs.meteor.com/api/accounts.html#Meteor-user). Examples: @@ -65,12 +65,14 @@ function Foo() { } // HOC -function Bar(props) { - if (props.user === null) { - return

Log in

; - } +class Bar extends React.Component { + render() { + if (this.props.user === null) { + return

Log in

; + } - return

Hello {props.user.username}

; + return

Hello {this.props.user.username}

; + } } withUser(Bar); @@ -90,9 +92,9 @@ const withUser: (Component: any) => React.ForwardRefExoticComponent -

Account Details

- {props.userId ? ( -

Your unique account id is {props.userId}.

- ) : ( -

Log-in to view your account details.

- )} - - ) +class Bar extends React.Component { + render() { + return ( +
+

Account Details

+ {this.props.userId ? ( +

Your unique account id is {this.props.userId}.

+ ) : ( +

Log-in to view your account details.

+ )} +
+ ); + } } withUserId(Bar); From e22ee55b650fdda914efccc7f8ef95db444ac063 Mon Sep 17 00:00:00 2001 From: William Kelley Date: Sun, 12 Dec 2021 19:28:11 -0500 Subject: [PATCH 7/9] chore(docs): improve HOC examples --- packages/react-meteor-accounts/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-meteor-accounts/README.md b/packages/react-meteor-accounts/README.md index 50d81f57..5263d07b 100644 --- a/packages/react-meteor-accounts/README.md +++ b/packages/react-meteor-accounts/README.md @@ -75,7 +75,7 @@ class Bar extends React.Component { } } -withUser(Bar); +const WrappedBar = withUser(Bar); ``` TypeScript signatures: @@ -134,7 +134,7 @@ class Bar extends React.Component { } } -withUserId(Bar); +const WrappedBar = withUserId(Bar); ``` TypeScript signatures: From 33f4b8e16ae76bc5447f185a955073d235158a98 Mon Sep 17 00:00:00 2001 From: William Kelley Date: Sun, 12 Dec 2021 20:35:58 -0500 Subject: [PATCH 8/9] chore(docs): improve usage summary --- packages/react-meteor-accounts/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-meteor-accounts/README.md b/packages/react-meteor-accounts/README.md index 5263d07b..558a5fca 100644 --- a/packages/react-meteor-accounts/README.md +++ b/packages/react-meteor-accounts/README.md @@ -35,7 +35,7 @@ For recent changes, check the [changelog](./CHANGELOG.md). ## Usage -Utilities for each data source are available in two React paradigms: hooks for use in functional components and higher-order components (HOCs) for use with class components. +Utilities for each data source are available for the two ways of writing React components: hooks and higher-order components (HOCs). Hooks can only be used in functional components. HOCs can be used for both functional and class components, but are primarily for the latter. _Note:_ All HOCs forward refs. From 0d0bc89882b148aa0a81f5fdb8aa7490466bd24f Mon Sep 17 00:00:00 2001 From: William Kelley Date: Sun, 12 Dec 2021 21:39:42 -0500 Subject: [PATCH 9/9] chore(docs): add data source summaries, args tables, return desc --- packages/react-meteor-accounts/README.md | 26 ++++++++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/packages/react-meteor-accounts/README.md b/packages/react-meteor-accounts/README.md index 558a5fca..ff6eab3f 100644 --- a/packages/react-meteor-accounts/README.md +++ b/packages/react-meteor-accounts/README.md @@ -41,11 +41,22 @@ _Note:_ All HOCs forward refs. ### useUser() / withUser(...) +Get a stateful value of the current user record from [`Meteor.user`](https://docs.meteor.com/api/accounts.html#Meteor-user), a reactive data source. + The hook, `useUser()`, returns a stateful value of the current user record. +- Arguments: *none*. +- Returns: `object | null`. + The HOC, `withUser(Component)`, returns a wrapped version of `Component`, where `Component` receives a prop of the current user record, `user`. -For more details about the data source, consult the documentation of [`Meteor.user`](https://docs.meteor.com/api/accounts.html#Meteor-user). +- Arguments: + +| Argument | Type | Required | Description | +| --- | --- | --- | --- | +| Component | `any` | yes | A React component. | + +- Returns: `React.ForwardRefExoticComponent`. Examples: @@ -90,11 +101,22 @@ const withUser: (Component: any) => React.ForwardRefExoticComponent