Skip to content

Commit 64b669e

Browse files
committed
Fixed clearing of session data. Added optional session clearing on ProvideSession unmount. Added global methods for getting the current session contexts. Updated README. Upgrade to 1.0.3
1 parent 6e38344 commit 64b669e

19 files changed

+612
-103
lines changed

.gitignore

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ node_modules
66

77
# builds
88
build
9-
dist
109
.rpt2_cache
1110

1211
# misc

README.md

Lines changed: 55 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -72,21 +72,38 @@ for each section as following.
7272
```tsx
7373
function AdminSection() {
7474
return (
75-
<ProvideSession <MySessionType> data={...} context={"admin"}>...</ProvideSession>
75+
// Optional name for the context can be set with the "name" property
76+
// ... for easier access for it's data with `getSessionContexts()`
77+
// If no name is given, react-context-session will set an arbitrary name
78+
<ProvideSession <MySessionType> data={...} name={"admin"}>...</ProvideSession>
7679
)
7780
}
7881
function UserSection() {
7982
return (
80-
<ProvideSession <MySessionType> data={...} context={"user"}>...</ProvideSession>
83+
<ProvideSession <MySessionType> data={...} name={"user"}>...</ProvideSession>
8184
)
8285
}
8386
```
8487

88+
To keep the session data for a context between mount and dismount of the `<ProvideSession />` component, one could set a name for the context and add the `keepOnUnmount` property.
89+
90+
```
91+
function UserSection() {
92+
return (
93+
<ProvideSession <MySessionType> data={...} context={"user"} keepOnUnmount>...</ProvideSession>
94+
)
95+
}
96+
```
8597
## Save session data to storage
86-
react-context-session has no support for saving to storage, but do instead have a callback function for every time the data changes.
87-
Please notice that multiple contexts is still supported with this feature, and the callback only calls with updated data to its context.
88-
Here is an example how one could implement storage with with [react-native-community/async-storage](https://github.com/react-native-community/async-storage)
98+
react-context-session has no built-in support for saving to storage, but do instead have a callback for every time the data changes, and also has a global method to fetch the current contexts' data.
99+
Please notice that multiple contexts is still supported with this feature, and the callback only calls with updated data to its own context.
100+
101+
##### On session data change [React Native]
102+
This example shows how one could implement session persistence with [react-native-community/async-storage](https://github.com/react-native-community/async-storage).
103+
It will load saved session data from storage and put it into a context, and update the storage on any changes to the session data on that same context.
89104
```tsx
105+
import AsyncStorage from "@react-native-community/async-storage";
106+
90107
type MySessionType = {
91108
x: number;
92109
y: number;
@@ -96,7 +113,7 @@ type MySessionType = {
96113
function MyProvider() {
97114
const [defaultData, setDefaultData] = useState<MySessionData>();
98115
useEffect(() => {
99-
AsyncStorage.getItem("session").then((value) => {
116+
AsyncStorage.getItem("my-session").then((value) => {
100117
if (value !== null) {
101118
setDefaultData(JSON.parse(value) as MySessionData);
102119
} else {
@@ -116,10 +133,10 @@ function MyProvider() {
116133
return (
117134
<ProvideSession
118135
data={defaultData}
119-
context={"my-context"}
136+
name={"my-session-context"}
120137
onChange={async (data) => {
121138
const jsonValue = JSON.stringify(data);
122-
await AsyncStorage.setItem("session", jsonValue);
139+
await AsyncStorage.setItem("my-session", jsonValue);
123140
}}>
124141
...
125142
</ProvideSession>
@@ -128,6 +145,36 @@ function MyProvider() {
128145
}
129146
```
130147

148+
##### On app state change [React Native]
149+
Saving the session data to storage, every time it changes, can be rather expensive and could be avoided by listening to [app state changes](https://reactnative.dev/docs/appstate.html) such as: `active | inactive | background`.
150+
Notice this doesn't guarantee the data will be saved if the app crashes.
151+
This example shows how one would save to async storage whenever the app state changes with help from: `getSessionContexts()`
152+
```tsx
153+
import { ProvideSession, getSessionContexts } from "react-context-session";
154+
import { AppState } from "react-native";
155+
156+
function MyProvider() {
157+
const [defaultData, setDefaultData] = useState<MySessionData>();
158+
159+
const handleAppStateChange = useCallback(async () => {
160+
const contexts = getSessionContexts();
161+
for (const contextKey in contexts) {
162+
AsyncStorage.setItem(contextKey, JSON.stringify(contexts));
163+
}
164+
}, []);
165+
166+
useEffect(() => {
167+
AppState.addEventListener("change", handleAppStateChange);
168+
169+
return () => {
170+
AppState.removeEventListener("change", handleAppStateChange);
171+
};
172+
}, [handleAppStateChange]);
173+
174+
// ... see above example on how to load from storage
175+
}
176+
```
177+
131178
## The gotcha's
132179
##### No deep session data comparison
133180
The dispatcher only offer side effect on 1 level, meaning that, changes to a nested data of a data property, will cause that property to cause a side effect or rerender.

dist/dispatcher.d.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { SessionDispatchFunc, SessionGenericData, SessionValueType } from "./types";
2+
export declare class Dispatcher<DataType extends SessionGenericData> {
3+
dispatchers: Partial<{
4+
[key in keyof DataType]: [SessionDispatchFunc];
5+
}>;
6+
dispatch(key: keyof DataType, value: SessionValueType): void;
7+
register(key: keyof DataType, dispatchFunc: SessionDispatchFunc): void;
8+
unregister(key: keyof DataType, dispatchFunc: SessionDispatchFunc): void;
9+
}

dist/index.d.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { ProvideSession, getSessionContexts, hasSessionContext, } from "./provider";
2+
export { useSession } from "./use-session";

dist/index.js

Lines changed: 160 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)