Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@knocklabs/react-core
Advanced tools
@knocklabs/react-core - npm Package Compare versions
Comparing version 0.2.7 to 0.2.8
| # Changelog | ||
| ## 0.2.8 | ||
| ### Patch Changes | ||
| - 3c277cb: fix: remove react-query and replace with swr for react 16+ support | ||
| - Updated dependencies [3c277cb] | ||
| - Updated dependencies [567e24f] | ||
| - @knocklabs/client@0.10.1 | ||
| ## 0.2.7 | ||
@@ -4,0 +13,0 @@ |
@@ -1,2 +0,2 @@ | ||
| "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),S=require("../hooks/useSlackConnectionStatus.js"),u=require("@tanstack/react-query"),f=require("react"),v=require("../../core/context/KnockProvider.js");require("@knocklabs/client");const y=require("../../core/utils.js");require("../../i18n/context/KnockI18nProvider.js");function C(e){if(e&&typeof e=="object"&&"default"in e)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const s=C(f),P=new u.QueryClient,l=s.createContext(null),j=({knockSlackChannelId:e,tenant:t,children:r})=>{const o=v.useKnockClient(),{connectionStatus:n,setConnectionStatus:a,errorLabel:c,setErrorLabel:d,actionLabel:b,setActionLabel:k}=S(o,e,t);return i.jsx(l.Provider,{value:{connectionStatus:n,setConnectionStatus:a,errorLabel:c,setErrorLabel:d,actionLabel:b,setActionLabel:k,knockSlackChannelId:e,tenant:t},children:i.jsx(u.QueryClientProvider,{client:P,children:r})},y.slackProviderKey({knockSlackChannelId:e,tenant:t,connectionStatus:n,errorLabel:c}))},p=()=>{const e=s.useContext(l);if(e===void 0)throw new Error("useKnockSlackClient must be used within a KnockSlackProvider");return e};exports.KnockSlackProvider=j;exports.useKnockSlackClient=p; | ||
| "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react/jsx-runtime"),k=require("../hooks/useSlackConnectionStatus.js"),S=require("react");require("swr/infinite");const f=require("../../core/context/KnockProvider.js");require("@knocklabs/client");const v=require("../../core/utils.js");require("../../i18n/context/KnockI18nProvider.js");function P(e){if(e&&typeof e=="object"&&"default"in e)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const i=P(S),u=i.createContext(null),p=({knockSlackChannelId:e,tenant:t,children:r})=>{const o=f.useKnockClient(),{connectionStatus:n,setConnectionStatus:s,errorLabel:c,setErrorLabel:a,actionLabel:l,setActionLabel:d}=k(o,e,t);return b.jsx(u.Provider,{value:{connectionStatus:n,setConnectionStatus:s,errorLabel:c,setErrorLabel:a,actionLabel:l,setActionLabel:d,knockSlackChannelId:e,tenant:t},children:r},v.slackProviderKey({knockSlackChannelId:e,tenant:t,connectionStatus:n,errorLabel:c}))},K=()=>{const e=i.useContext(u);if(e===void 0)throw new Error("useKnockSlackClient must be used within a KnockSlackProvider");return e};exports.KnockSlackProvider=p;exports.useKnockSlackClient=K; | ||
| //# sourceMappingURL=KnockSlackProvider.js.map |
@@ -1,2 +0,2 @@ | ||
| "use strict";const K=require("../context/KnockSlackProvider.js"),e=require("react");require("../../i18n/context/KnockI18nProvider.js");const b=require("../../i18n/hooks/useTranslations.js");require("@tanstack/react-query");const y=require("../../core/context/KnockProvider.js");require("@knocklabs/client");require("date-fns");function E({slackChannelsRecipientObject:{objectId:t,collection:a}}){const{t:q}=b.useTranslations(),c=y.useKnockClient(),{connectionStatus:h,knockSlackChannelId:s}=K.useKnockSlackClient(),[o,l]=e.useState(null),[i,r]=e.useState(null),[u,d]=e.useState(!1),[p,k]=e.useState(!1),C=e.useCallback(()=>{d(!0),(async()=>await c.objects.getChannelData({collection:a,objectId:t,channelId:s}))().then(n=>{var S,g;(S=n==null?void 0:n.data)!=null&&S.connections?l((g=n==null?void 0:n.data)==null?void 0:g.connections):l([]),r(null),d(!1)}).catch(()=>{l([]),r(null),d(!1)})},[a,c.objects,s,t]);return e.useEffect(()=>{h==="connected"&&!o&&!i&&!u&&C()},[o,C,u,i,h]),{data:o,updateConnectedChannels:async f=>{k(!0);try{await c.objects.setChannelData({objectId:t,collection:a,channelId:s,data:{connections:f}}),C()}catch{r(q("slackChannelSetError")||"")}k(!1)},updating:p,loading:u,error:i}}module.exports=E; | ||
| "use strict";const K=require("../context/KnockSlackProvider.js"),e=require("react");require("../../i18n/context/KnockI18nProvider.js");const b=require("../../i18n/hooks/useTranslations.js");require("swr/infinite");const y=require("../../core/context/KnockProvider.js");require("@knocklabs/client");require("date-fns");function E({slackChannelsRecipientObject:{objectId:t,collection:a}}){const{t:q}=b.useTranslations(),c=y.useKnockClient(),{connectionStatus:h,knockSlackChannelId:s}=K.useKnockSlackClient(),[o,l]=e.useState(null),[i,r]=e.useState(null),[u,d]=e.useState(!1),[p,k]=e.useState(!1),C=e.useCallback(()=>{d(!0),(async()=>await c.objects.getChannelData({collection:a,objectId:t,channelId:s}))().then(n=>{var S,g;(S=n==null?void 0:n.data)!=null&&S.connections?l((g=n==null?void 0:n.data)==null?void 0:g.connections):l([]),r(null),d(!1)}).catch(()=>{l([]),r(null),d(!1)})},[a,c.objects,s,t]);return e.useEffect(()=>{h==="connected"&&!o&&!i&&!u&&C()},[o,C,u,i,h]),{data:o,updateConnectedChannels:async f=>{k(!0);try{await c.objects.setChannelData({objectId:t,collection:a,channelId:s,data:{connections:f}}),C()}catch{r(q("slackChannelSetError")||"")}k(!1)},updating:p,loading:u,error:i}}module.exports=E; | ||
| //# sourceMappingURL=useConnectedSlackChannels.js.map |
@@ -1,2 +0,2 @@ | ||
| "use strict";const k=require("../context/KnockSlackProvider.js"),i=require("react");require("../../i18n/context/KnockI18nProvider.js");require("@tanstack/react-query");const l=require("../../core/context/KnockProvider.js"),d=require("@knocklabs/client");require("date-fns");const h="https://slack.com/oauth/v2/authorize",S=["chat:write","chat:write.public","channels:read","groups:read"];function _(o,s){const e=l.useKnockClient(),{setConnectionStatus:c,knockSlackChannelId:n,tenant:t,setActionLabel:a}=k.useKnockSlackClient(),u=i.useCallback(async()=>{a(null),c("disconnecting");try{const r=await e.slack.revokeAccessToken({tenant:t,knockChannelId:n});c(r==="ok"?"disconnected":"error")}catch{c("error")}},[c,e.slack,t,n,a]);return{buildSlackAuthUrl:i.useCallback(()=>{const r={state:JSON.stringify({redirect_url:s,access_token_object:{object_id:t,collection:d.TENANT_OBJECT_COLLECTION},channel_id:n,public_key:e.apiKey,user_token:e.userToken}),client_id:o,scope:S.join(",")};return`${h}?${new URLSearchParams(r)}`},[s,t,n,e.apiKey,e.userToken,o]),disconnectFromSlack:u}}module.exports=_; | ||
| "use strict";const k=require("../context/KnockSlackProvider.js"),i=require("react");require("../../i18n/context/KnockI18nProvider.js");require("swr/infinite");const l=require("../../core/context/KnockProvider.js"),d=require("@knocklabs/client");require("date-fns");const h="https://slack.com/oauth/v2/authorize",S=["chat:write","chat:write.public","channels:read","groups:read"];function _(o,s){const e=l.useKnockClient(),{setConnectionStatus:c,knockSlackChannelId:n,tenant:t,setActionLabel:a}=k.useKnockSlackClient(),u=i.useCallback(async()=>{a(null),c("disconnecting");try{const r=await e.slack.revokeAccessToken({tenant:t,knockChannelId:n});c(r==="ok"?"disconnected":"error")}catch{c("error")}},[c,e.slack,t,n,a]);return{buildSlackAuthUrl:i.useCallback(()=>{const r={state:JSON.stringify({redirect_url:s,access_token_object:{object_id:t,collection:d.TENANT_OBJECT_COLLECTION},channel_id:n,public_key:e.apiKey,user_token:e.userToken}),client_id:o,scope:S.join(",")};return`${h}?${new URLSearchParams(r)}`},[s,t,n,e.apiKey,e.userToken,o]),disconnectFromSlack:u}}module.exports=_; | ||
| //# sourceMappingURL=useSlackAuth.js.map |
@@ -1,2 +0,2 @@ | ||
| "use strict";const N=require("../context/KnockSlackProvider.js"),s=require("react");require("../../i18n/context/KnockI18nProvider.js");const S=require("@tanstack/react-query"),E=require("../../core/context/KnockProvider.js");require("@knocklabs/client");require("date-fns");const I=1e3,K=200,d="private_channel,public_channel";function M({queryOptions:n}){const f=E.useKnockClient(),{knockSlackChannelId:C,tenant:_,connectionStatus:o}=N.useKnockSlackClient(),x=({pageParam:e})=>f.slack.getChannels({tenant:_,knockChannelId:C,queryOptions:{...n,cursor:e,limit:(n==null?void 0:n.limitPerPage)||K,types:(n==null?void 0:n.types)||d}}),{data:r,isLoading:a,isFetching:i,fetchNextPage:u,hasNextPage:k,refetch:m,error:h}=S.useInfiniteQuery({queryKey:["slackChannels"],queryFn:x,initialPageParam:"",getNextPageParam:e=>(e==null?void 0:e.next_cursor)===""?null:e==null?void 0:e.next_cursor}),c=s.useMemo(()=>{var e;return((e=r==null?void 0:r.pages)==null?void 0:e.flatMap(t=>t==null?void 0:t.slack_channels).filter(t=>!!t))||[]},[r==null?void 0:r.pages]),l=(n==null?void 0:n.maxCount)||I;return s.useEffect(()=>{o==="connected"&&!h&&k&&!i&&(c==null?void 0:c.length)<l&&u()},[c==null?void 0:c.length,u,k,i,l,h,o]),{data:c,isLoading:a,refetch:m}}module.exports=M; | ||
| "use strict";const I=require("../context/KnockSlackProvider.js"),d=require("react");require("../../i18n/context/KnockI18nProvider.js");const K=require("swr/infinite"),L=require("../../core/context/KnockProvider.js");require("@knocklabs/client");require("date-fns");const N=n=>n&&typeof n=="object"&&"default"in n?n:{default:n},g=N(K),A=1e3,R=200,M="private_channel,public_channel",S="SLACK_CHANNELS";function z(n,c){return n===0?[S,""]:c&&["",null].includes(c.next_cursor)?null:[S,c.next_cursor]}function T({queryOptions:n}){var h,C;const c=L.useKnockClient(),{knockSlackChannelId:x,tenant:E,connectionStatus:a}=I.useKnockSlackClient(),m=t=>c.slack.getChannels({tenant:E,knockChannelId:x,queryOptions:{...n,cursor:t?t[1]:"",limit:(n==null?void 0:n.limitPerPage)||R,types:(n==null?void 0:n.types)||M}}),{data:e,error:i,isLoading:l,isValidating:s,size:u,setSize:f,mutate:P}=g.default(z,m,{initialSize:0}),r=(e==null?void 0:e.length)||0,k=r===0||e&&((h=e[r])==null?void 0:h.next_cursor)&&((C=e[r])==null?void 0:C.next_cursor)!=="",o=d.useMemo(()=>(e??[]).flatMap(t=>t==null?void 0:t.slack_channels).filter(t=>!!t),[e]),_=(n==null?void 0:n.maxCount)||A;return d.useEffect(()=>{a==="connected"&&!i&&k&&!l&&!s&&o.length<_&&f(u+1)},[o.length,f,u,k,l,s,_,i,a]),{data:o,isLoading:l||s,refetch:()=>P()}}module.exports=T; | ||
| //# sourceMappingURL=useSlackChannels.js.map |
@@ -5,3 +5,3 @@ { | ||
| "author": "@knocklabs", | ||
| "version": "0.2.7", | ||
| "version": "0.2.8", | ||
| "license": "MIT", | ||
@@ -49,8 +49,8 @@ "main": "dist/cjs/index.js", | ||
| "peerDependencies": { | ||
| "react": ">=16.8.0" | ||
| "react": "^16.11.0 || ^17.0.0 || ^18.0.0" | ||
| }, | ||
| "dependencies": { | ||
| "@knocklabs/client": "^0.10.0", | ||
| "@tanstack/react-query": "^5.18.1", | ||
| "@knocklabs/client": "^0.10.1", | ||
| "date-fns": "^3.3.1", | ||
| "swr": "^2.2.5", | ||
| "zustand": "^3.7.2" | ||
@@ -57,0 +57,0 @@ }, |
| import { SlackChannelQueryOptions, useKnockSlackClient } from ".."; | ||
| import { SlackChannel } from "@knocklabs/client"; | ||
| import { useInfiniteQuery } from "@tanstack/react-query"; | ||
| import { GetSlackChannelsResponse, SlackChannel } from "@knocklabs/client"; | ||
| import { useEffect, useMemo } from "react"; | ||
| import useSWRInfinite from "swr/infinite"; | ||
@@ -12,2 +12,4 @@ import { useKnockClient } from "../../core"; | ||
| const QUERY_KEY = "SLACK_CHANNELS"; | ||
| type UseSlackChannelsProps = { | ||
@@ -23,2 +25,22 @@ queryOptions?: SlackChannelQueryOptions; | ||
| type QueryKey = [key: string, cursor: string] | null; | ||
| function getQueryKey( | ||
| pageIndex: number, | ||
| previousPageData: GetSlackChannelsResponse, | ||
| ): QueryKey { | ||
| // First page so just pass empty | ||
| if (pageIndex === 0) { | ||
| return [QUERY_KEY, ""]; | ||
| } | ||
| // If there's no more data then return an empty next cursor | ||
| if (previousPageData && ["", null].includes(previousPageData.next_cursor)) { | ||
| return null; | ||
| } | ||
| // Next cursor exists so pass it | ||
| return [QUERY_KEY, previousPageData.next_cursor]; | ||
| } | ||
| function useSlackChannels({ | ||
@@ -31,3 +53,3 @@ queryOptions, | ||
| const fetchChannels = ({ pageParam }: { pageParam: string }) => { | ||
| const fetchChannels = (queryKey: QueryKey) => { | ||
| return knock.slack.getChannels({ | ||
@@ -38,3 +60,3 @@ tenant, | ||
| ...queryOptions, | ||
| cursor: pageParam, | ||
| cursor: queryKey ? queryKey[1] : "", | ||
| limit: queryOptions?.limitPerPage || LIMIT_PER_PAGE, | ||
@@ -46,26 +68,23 @@ types: queryOptions?.types || CHANNEL_TYPES, | ||
| const { | ||
| data, | ||
| isLoading, | ||
| isFetching, | ||
| fetchNextPage, | ||
| hasNextPage, | ||
| refetch, | ||
| error, | ||
| } = useInfiniteQuery({ | ||
| queryKey: ["slackChannels"], | ||
| queryFn: fetchChannels, | ||
| initialPageParam: "", | ||
| getNextPageParam: (lastPage) => | ||
| lastPage?.next_cursor === "" ? null : lastPage?.next_cursor, | ||
| }); | ||
| const { data, error, isLoading, isValidating, size, setSize, mutate } = | ||
| useSWRInfinite<GetSlackChannelsResponse>(getQueryKey, fetchChannels, { | ||
| initialSize: 0, | ||
| }); | ||
| const slackChannels = useMemo(() => { | ||
| return ( | ||
| data?.pages | ||
| ?.flatMap((page) => page?.slack_channels) | ||
| .filter((channel) => !!channel) || [] | ||
| ); | ||
| }, [data?.pages]); | ||
| const currentPage = data?.length || 0; | ||
| const hasNextPage = | ||
| currentPage === 0 || | ||
| (data && | ||
| data[currentPage]?.next_cursor && | ||
| data[currentPage]?.next_cursor !== ""); | ||
| const slackChannels: SlackChannel[] = useMemo( | ||
| () => | ||
| (data ?? []) | ||
| .flatMap((page) => page?.slack_channels) | ||
| .filter((channel) => !!channel), | ||
| [data], | ||
| ); | ||
| const maxCount = queryOptions?.maxCount || MAX_COUNT; | ||
@@ -78,12 +97,17 @@ | ||
| hasNextPage && | ||
| !isFetching && | ||
| slackChannels?.length < maxCount | ||
| !isLoading && | ||
| !isValidating && | ||
| slackChannels.length < maxCount | ||
| ) { | ||
| fetchNextPage(); | ||
| // Fetch a page at a time until we have nothing else left to fetch | ||
| // or we've already hit the max amount of channels to fetch | ||
| setSize(size + 1); | ||
| } | ||
| }, [ | ||
| slackChannels?.length, | ||
| fetchNextPage, | ||
| slackChannels.length, | ||
| setSize, | ||
| size, | ||
| hasNextPage, | ||
| isFetching, | ||
| isLoading, | ||
| isValidating, | ||
| maxCount, | ||
@@ -94,5 +118,9 @@ error, | ||
| return { data: slackChannels, isLoading, refetch }; | ||
| return { | ||
| data: slackChannels, | ||
| isLoading: isLoading || isValidating, | ||
| refetch: () => mutate(), | ||
| }; | ||
| } | ||
| export default useSlackChannels; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.28%
182505
- Lines of code
- increased by1.02%
1880
Dependency changes
+ Addedswr@^2.2.5
+ Addedclient-only@0.0.1(transitive)
+ Addedswr@2.2.5(transitive)
+ Addeduse-sync-external-store@1.2.2(transitive)
- Removed@tanstack/react-query@^5.18.1
- Removed@tanstack/query-core@5.60.6(transitive)
- Removed@tanstack/react-query@5.61.0(transitive)
Updated@knocklabs/client@^0.10.1