@planningcenter/topbar 8.1.1 → 8.2.0-rc.2

package/CHANGELOG.md

@@ -5,13 +5,19 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [8.1.1] - 2021-04-11
+## [8.2.0-rc.2] - 2022-05-18
+
+### Fixed
+
+- fix: hook into `pco-page-expired` to `disconnect` jolt instance when session is changed
+
+## [8.1.1] - 2022-04-11
 
 ### Changed
 
 - fix: don't send a `timeZone` key to `@churchcenter/datetime-fmt` if it doesn't have a value
 
-## [8.1.0] - 2021-04-11
+## [8.1.0] - 2022-04-11
 
 ### Changed
 
@@ -22,14 +28,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix dark mode text styles in notifications inbox
 - Fix notification date timezone not displaying in the org's time zone
 
-## [8.0.1] - 2021-03-29
+## [8.0.1] - 2022-03-29
 
 ### Changed
 
 - Correct the capitalization of "Check-Ins" in order to set the correct color for notifications
 - Bring back the `notifications` prop for topbars so that if notifications are not enabled, it will render the `notifications` prop instead
 
-## [8.0.0] - 2021-03-24
+## [8.0.0] - 2022-03-24
 
 ### Added
 

package/README.md

@@ -34,6 +34,9 @@ If a Jolt connection is not shared with topbar, it will gladly initiate its own
 To reuse your app's Jolt connection, topbar requires a Promise that resolves into a [Jolt client](https://github.com/ministrycentered/jolt-client/) connection.
 If nothing is passed—or if a Promise is passed that resolves to `undefined` or `void`—topbar will initiate its own connection.
 
+Topbar hooks into `pco-page-expired` and will `disconnect` either its internal, or passed in jolt instance when the session is invalidated (i.e. logged out in a different tab).
+CSRF tokens are invalidated when the session is invalidated, and non-GET APIv2 requests (i.e. auth/subscribe) require a valid CSRF token and will never succeed in that state.
+
 #### Example
 
 As an example, we'll use what Services has done for the v7.3 alpha.
@@ -52,14 +55,12 @@ As a layout partial, they attach two Jolt-related things to `window`:
 In their Topbar implementation component, they then create the function that provides topbar the required Promise...
 
 ```jsx
-const waitForWindowJolt = async () => {
-  const listener = Promise.resolve(window.joltListenerPromise)
-  return listener.then((listener) => {
+const waitForWindowJolt = async () =>
+  window.joltListenerPromise.then(listener => {
     if (listener && listener.jolt) {
       return listener.jolt
     }
   })
-}
 ```
 
 ...and passes that function in for the `JoltPromise` prop to topbar.
@@ -98,6 +99,19 @@ When you make `topbar` changes, run `yalc publish --push` to update your product
 
 When you're done, in your product directory run `yalc remove @planningcenter/topbar`.
 
+If you are not seeing published updates after running `yalc publish --push` or things break in your app after running `yalc remove @planningcenter/topbar` then in your product you will want to be running `bin/webpack-dev-server`.
+From experience, we have seen that the People app will automatically reload while running `bin/webpack-dev-server`.
+Unfortunately, in the Services app we have had to restart `bin/webpack-dev-server` every time for a change to come in.
+This may change depending on what app you're adding your yalc changes to.
+
+### Debugging Jolt
+
+The `jolt-client` library has the ability to log debug information to the console.
+This functionality is configured when creating a client and is disabled by default.
+If you are passing your own Jolt client object into Topbar via props, you can configure it as required before providing it to Topbar.
+If you are relying on Topbar to create its own Jolt connection and would like to enable logging, pass `enableJoltLogging={true}` as a prop to whichever topbar
+you are using (`SmallTopbar`/`NotSmallTopbar`).
+
 ## Migrate
 
 These migration docs will guide you thru the process of updating to recent major releases.

package/dist/modules/api_request.d.ts

@@ -1,5 +1,10 @@
+import { Environment } from "@planningcenter/url";
 declare global {
     interface Window {
+        railsEnv?: Environment;
+        currentPerson?: {
+            id: number;
+        };
         Rails?: {
             csrfToken: () => string;
         };

package/dist/modules/apps_provider.d.ts

@@ -17,7 +17,7 @@ export declare class AppsProvider extends React.Component<{
     fetch(): void;
     remove(): void;
     componentDidMount(): void;
-    render(): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>;
+    render(): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 }
 interface App {
     attributes: {

package/dist/modules/client_storage.d.ts

@@ -8,5 +8,5 @@ export declare class ClientStorage extends React.Component<{
         method: string;
     };
     update(value: any): void;
-    render(): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>;
+    render(): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 }

package/dist/modules/color_app_squircles.d.ts

@@ -6,7 +6,6 @@ export declare function CheckIns(): JSX.Element[];
 export declare function ChurchCenter(): JSX.Element[];
 export declare function Giving(): JSX.Element[];
 export declare function Groups(): JSX.Element[];
-export declare function Home(): JSX.Element[];
 export declare function People(): JSX.Element[];
 export declare function Publishing(): JSX.Element[];
 export declare function Registrations(): JSX.Element[];

package/dist/modules/components/apps_menu.d.ts

@@ -1,9 +1,13 @@
 /// <reference types="react" />
 import * as PCO_URL from "@planningcenter/url";
-import { App } from "../interfaces";
 declare const AppsMenu: ({ appName, apps, env, toggle, visible, }: {
     appName: string;
-    apps: App[];
+    apps: {
+        attributes: {
+            name: string;
+            url: string;
+        };
+    }[];
     env: PCO_URL.Environment;
     toggle: any;
     visible: boolean;

package/dist/modules/components/notification_item.d.ts

@@ -1,11 +1,7 @@
 /// <reference types="react" />
 import { Notification } from "../interfaces";
-declare const NotificationItem: ({ mobile, isLast, onMarkAsRead, onToggleRead, showBottomBorder, notification, }: {
-    mobile?: boolean;
+declare const NotificationItem: ({ isLast, notification: { appName, createdAt, isRead, link, title }, }: {
     isLast?: boolean;
-    onMarkAsRead?: (notification: Notification) => any;
-    onToggleRead: any;
-    showBottomBorder?: boolean;
     notification: Notification;
 }) => JSX.Element;
 export default NotificationItem;

package/dist/modules/components/notifications_menu.d.ts

@@ -1,17 +1,11 @@
 /// <reference types="react" />
 import { Notification } from "../interfaces";
-declare const NotificationsMenu: ({ handleMarkAllAsRead, handleMarkAsRead, handleToggleRead, hasError, isLoading, mobile, notifications: { read, unread }, toggle, visible, }: {
-    handleMarkAllAsRead: () => any;
-    handleMarkAsRead: (notification: Notification) => any;
-    handleToggleRead: (notification: Notification) => any;
-    hasError?: boolean;
-    isLoading?: boolean;
-    mobile?: boolean;
+declare const NotificationsMenu: ({ notifications: { read, unread }, toggle, visible, }: {
     notifications: {
         read: Notification[];
         unread: Notification[];
     };
-    toggle?: any;
-    visible?: boolean;
+    toggle: any;
+    visible: boolean;
 }) => JSX.Element;
 export default NotificationsMenu;

package/dist/modules/connected_people_provider.d.ts

@@ -17,5 +17,5 @@ export declare class ConnectedPeopleProvider extends React.Component<{
     unlink(): void;
     switch(toId: string, returnPath: string): void;
     componentDidMount(): void;
-    render(): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>;
+    render(): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 }

package/dist/modules/display_switch.d.ts

@@ -9,7 +9,7 @@ export declare class PointBreak extends React.Component<{
     componentDidMount(): void;
     componentWillUnmount(): void;
     breakpointString(width: any): "xs" | "sm" | "md" | "lg" | "xl";
-    render(): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>;
+    render(): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 }
 export declare class DisplaySwitch extends React.Component<{
     smallBreakpoints: String[];

package/dist/modules/dummy_data.d.ts

@@ -1,3 +1,3 @@
-import { Notification } from "./interfaces"
-export declare const DUMMY_DATA_UNREAD: Notification[]
-export declare const DUMMY_DATA_READ: Notification[]
+import { Notification } from "./interfaces";
+export declare const DUMMY_DATA_UNREAD: Notification[];
+export declare const DUMMY_DATA_READ: Notification[];

package/dist/modules/formatters.d.ts

@@ -1,3 +1,15 @@
-import { App, ConnectedPerson } from "./interfaces";
+export interface App {
+    attributes: {
+        name: string;
+        url: string;
+    };
+}
+export interface ConnectedPerson {
+    id: number;
+    attributes: {
+        name: string;
+        organization_name: string;
+    };
+}
 export declare const appsMenuFormatter: (apps: App[]) => App[];
 export declare const connectedPeopleMenuFormatter: (connectedPeople: ConnectedPerson[]) => ConnectedPerson[];

package/dist/modules/mono_app_symbols.d.ts

@@ -31,10 +31,6 @@ export declare function Groups({ color, ...platformProps }: {
     [x: string]: any;
     color: any;
 }): JSX.Element;
-export declare function Home({ color, ...platformProps }: {
-    [x: string]: any;
-    color: any;
-}): JSX.Element;
 export declare function People({ color, ...platformProps }: {
     [x: string]: any;
     color: any;

package/dist/modules/mono_app_text.d.ts

@@ -29,11 +29,6 @@ export declare function Giving({ color, size, ...platformProps }: {
     color: any;
     size?: number;
 }): JSX.Element;
-export declare function Home({ color, size, ...platformProps }: {
-    [x: string]: any;
-    color: any;
-    size?: number;
-}): JSX.Element;
 export declare function Groups({ color, size, ...platformProps }: {
     [x: string]: any;
     color: any;

package/dist/modules/not_small_topbar.d.ts

@@ -1,36 +1,6 @@
 import * as React from "react";
 import * as PCO_URL from "@planningcenter/url";
-export declare class AppsButton extends React.Component<{
-    appName: string;
-    colors: any;
-    expanded: boolean;
-    style?: object;
-    onClick: any;
-    displayIconOnly?: boolean;
-}, {
-    entered: boolean;
-    down: boolean;
-}> {
-    constructor(props: any);
-    static defaultProps: {
-        displayIconOnly: boolean;
-    };
-    render(): JSX.Element;
-}
-export declare class Hoverable extends React.Component<{
-    component?: any;
-    style?: object;
-    hover?: any;
-    active?: any;
-    type?: string;
-    onClick?: any;
-}, {
-    entered: boolean;
-    down: boolean;
-}> {
-    constructor(props: any);
-    render(): JSX.Element;
-}
+import { Notification } from "./interfaces";
 export declare class Topbar extends React.Component<{
     apps: {
         attributes: {
@@ -51,30 +21,40 @@ export declare class Topbar extends React.Component<{
     search?: any;
     style?: any;
     showOrgName?: boolean;
-    notifications?: any;
     requestAppsFetch: any;
     requestConnectedPeopleFetch: any;
     requestUnlinkConnectedPeople: any;
     requestSwitchConnectedPerson: any;
     requestClearAppsCache: any;
     requestClearConnectedPeopleCache: any;
+    useDummyNotifications?: boolean;
     linkToProfile?: boolean;
-    onLinkToProfileClick?: () => any;
 }, {
     appsMenuVisible: boolean;
-    userMenuVisible: boolean;
+    notificationsMenuVisible: boolean;
     routesVisible: boolean;
+    userMenuVisible: boolean;
+    notifications: {
+        unread: Notification[];
+        read: Notification[];
+    };
 }> {
     static defaultProps: {
-        notifications: () => any;
         search: () => any;
         linkToProfile: boolean;
         showOrgName: boolean;
+        useDummyNotifications: boolean;
     };
     constructor(props: any);
     hideRoutes(): void;
     showRoutes(): void;
     getTextColor(): any;
+    findInIncluded({ type, id }: {
+        type: any;
+        id: any;
+    }, included: any): any;
+    subscribeToJoltChannel(): void;
+    componentDidMount(): void;
     render(): JSX.Element;
 }
 export declare class Route extends React.Component<{

package/dist/modules/symbols.d.ts

@@ -1,16 +1,23 @@
-import * as React from "react";
-export declare const Bell: React.StatelessComponent<{
+/// <reference types="react" />
+export declare const Bell: ({ dot, dotFill, fill, style, ...props }: {
     dot?: boolean;
     dotFill?: string;
     fill?: string;
-    stroke?: string;
     style?: object;
-}>;
-export declare const Spyglass: React.StatelessComponent<{
+}) => JSX.Element;
+export declare const DisclosureChevronIcon: ({ colors, style, ...nativeProps }: {
+    colors: any;
+    style?: object;
+}) => JSX.Element;
+export declare const HelpIcon: ({ colors, style, ...nativeProps }: {
+    colors: any;
+    style?: object;
+}) => JSX.Element;
+export declare const Spyglass: ({ fill, style, ...nativeProps }: {
     fill?: string;
     style?: object;
-}>;
-export declare const X: React.StatelessComponent<{
+}) => JSX.Element;
+export declare const X: ({ fill, style, ...nativeProps }: {
     fill?: string;
     style?: object;
-}>;
+}) => JSX.Element;