Options
All
  • Public
  • Public/Protected
  • All
Menu

Module hooks

React hooks

Contains all the available React hooks in the SDK.

Fetcher functions are cached by default using SWR. This includes data revalidation, automatic rehydration and more. Every fetcher hooks exposes all of the returned values from the useSWR hook. This means that you can refer to the SWR documentation for information about how the fetcher hooks can be used.

For the other CRUD functions, i.e. POST, PUT and DELETE operations, we use useAsync and useAsyncCallback from the react-async-hook package.

Note that most of the hooks in this SDK will expose all of the returned values from useSWR, useAsync and useAsyncCallback (depending on the one that is used internally in the hook). This means that you can refer to the documentation for each of these for more advanced usage.

see

SWR

see

react-async-hook

Index

Interfaces

Activity Functions

Auth Functions

Fetcher Functions

General Functions

Upload Functions

Activity Functions

useActivityLevel

  • Subscribe to activity level changes of a location. Usage of this hook will re-render your component whenever activity data is received from the server Your component will be automatically unsubscribed from a location whenever your component is unmounted or the locationId changes.

    example

    Subscribing to activity changes of location

    // Dynamically subscribes to a locations activity and sets the intial
// activity level to the value received after fetching.
const activityLevel = useActivityLevel(
    props.location.id,
    props.location.activity_level
)

// Will re-render in realtime whenever the activity level is updated on the server
return (
    <p>Current activity level: {activityLevel}</p>
)

    Parameters

    • locationId: number

      The id of the location to subscribe to

    • Optional initialActivityLevel: ActivityLevels

      The activity level that will be set on initial render

    Returns ActivityLevels

    The current activity level of the location

Auth Functions

useLogin

useLogout

useUser

  • useUser(): null | User

  • Retrieve a handle to the currently logged in user and all the data associated with the user. If no user is logged in, null will be returned. Internally, the user is stored in a state variable and will therefore re-render your component whenever it changes.

    Returns null | User

    The currently logged in user (if any)

Fetcher Functions

useCategories

useContactInformation

useEvent

useEventDescription

  • Fetches and caches a single Event long description. This should be used when you want to show the full (long) description of an event. It is not needed in the timeline, only when the user wants to read more of an event.

    Parameters

    • eventId: number

      The id of the Event to fetch

    Returns CachedAsyncHookContract<EventDescription>

useEvents

  • Fetches and caches Events. If oid is set, e.g. not undefined or null, only the events for that specific Nation will be fetched.

    See all available query parameters here: EventQueryParams. Note that you do not need to specify any query data.

    This hook supports infinite loading. To fetch more data, e.g. while scrolling, do the following:

    const { data, error, pagination, size, setSize } = useEvents(null, { amount: 9 })

    You can then load more events by increasing the size using setSize(size + 1). Of course, you can also decrease the size by doing setSize(size - 1).

    To use regular pagination, i.e. to render only the data for the page and not the previous pages, you can do the following:

    const [page, setPage] = useState(1)
const { data, error, pagination } = useEvents(null, { page, amount: 9 })

    As you can see, the only difference between the two is which state variable you use to decide which page to load.

    Parameters

    • Optional oid: number

      The oid of the Nation to fetch events for.

    • Optional params: EventQueryParams

      Event filtering params

    Returns PaginatedCachedAsyncHookContract<EventCollection>

useIndividual

useIndividuals

useLocation

useLocations

useMenu

useMenuItem

useMenuItems

useMenus

useNation

useNations

useNotifications

useOpeningHour

useOpeningHours

useSubscription

useSubscriptionTopic

useSubscriptionTopics

useSubscriptions

General Functions

useApi

  • Retrieve a handle to the API client for making authenticated POST, PUT and DELETE requests. This should only be used if you want to implement functionality for student nation staff. Fetching data should be done using one of the available fetcher hooks since they will cache your data using SWR.

    example

    Updating a student nation description

    const api = useApi()
const [description, setDescription] = useState('')
const response = useAsyncCallback(() => api.nations.update({ description }))

return (
    <div>
        {// Make the request to the API when the user clicks the button}
        <button onClick={response.execute}>Update description</button>
        {response.error && <p>Could not update nation: {response.error.message}</p>}
        {response.result && <p>New description: {response.result.description}</p>}
    </div>
)

    Returns { activity: Activity; auth: Auth; contact: Contact; events: Events; individuals: Individuals; locations: Locations; menus: Menus; nations: Nations; openingHours: OpeningHours; subscriptions: Subscriptions }

useSDK

  • Hook used to get all the available data from the SDK context. The returned data in this hook is subject to change and it is recommended to instead use the shorthand hooks for extracting your data:

    see

    useApi for getting the API client handle

    see

    useUser for getting the currently logged in user

    Returns ContextContract

Upload Functions

useUpload

  • Hook to upload images to resources, e.g. student nation or menu items. Only supports a single upload, i.e. you can not upload both an icon and a cover image for a nation with a single call to this hook. If you want to allow multiple uploads, you need to call this hook once for each upload.

    This hook will automatically add the file blob to the upload function that you select. This means that you can omit the last argument of the upload function. You can see an example of this below.

    For each upload you must specify the form field (i.e. the upload that you want to make). The available upload fields can be seen in the respective service, e.g.:

    see

    NationUploads for all available upload fields for student nations

    example

    Uploading a cover image to a student nation

    const api = useApi()

// Specify the student nation and form field that we want to use.
// The uploader also exposes all of the members returned by the 'useAsync' hook.
const uploader = useUpload(api.nations.upload, [props.nation.oid, 'cover'])

// Using the uploader onChange event handler, the file will be set automatically
return (
    <div>
        <input type="file" onChange={uploader.onFileChanged} />
        <button onClick={uploader.execute}>Upload cover image</button>
    </div>
)

    Type parameters

    • T

      The resource that will be returned in the result after uploading, i.e. a Nation

    Parameters

    • fn: (...args: unknown[]) => Promise<T>

      The upload function to use when execute() is called.

        • (...args: unknown[]): Promise<T>

        • Parameters

          • Rest ...args: unknown[]

          Returns Promise<T>

    • params: unknown[]

      Upload function arguments with the file blob (last argument) omitted

    Returns AsyncHookCallbackContract<T>

Generated using TypeDoc