Methods

useCronoUser

Use Crono User is a custom Hook used to manage user permissions and preferences.
Example: The Custom Hook uses a function called setLanguage that return a Promise.

import { useCronoUser } from "@matchplat/crono";

const MyComponent = () => {
  const { setLanguage } = useCronoUser();

  const changeLang = (data) => {
    setLanguage(data).then((data) => console.log("language changed"));
  };

  return <button onClick={() => changeLang("en-US")}>Change Language</button>;
};

export default MyComponent;

It's also used to install the WebSocket into the App

import { useCronoUser } from "@matchplat/crono";

const WebSocketComponent = () => {
  const context = useCronoUser();

  useEffect(() => {
    if (context.isWebsocketReady) {
      let webSocket = context.connection;
      webSocket.on("ReceiveMessage", (message) => {
        console.log(message);
      });
    }
  }, [context.connection, context.isWebsocketReady]);

  return <button>This is my WebSocket</button>;
};

export default WebSocketComponent;

It returns a method to receive messages (connection) and a flag to know if the WebSocket is ready (isWebsocketReady).

caution

Remember to allways test with isWebsocketReady before call the connection method.

It can be used by installing CronoUser into your App.

getRefreshToken

This is a method used to get the refresh token from GraphQL.
Return a Promise. You can pass false as first parameter to the function, if you want to manage the error by yourself.

//let Crono manage the redirect
getRefreshToken().then((token) => {
  console.log(token);
});

//manage the error by yourself
getRefreshToken(false)
  .then((token) => {
    console.log(token);
  })
  .catch((err) => console.log(err));

It is also included into CronoBoost.

silentRefresh

This is a method used to install a silentRefresh into your component.

import { getRefreshToken } from "@matchplat/crono";

const silentRefresh = () => {
  return setInterval(async () => {
    await getRefreshToken();
  }, 60000);
};

export default silentRefresh;

It is also included into CronoBoost.

useCronoLogout

You can use this custom hook only if the user is logged in. This custom hook returns a js promise

import { useCronoLogout } from "@matchplat/crono";

const MyComponent = () => {
  const { logout } = useCronoLogout();

  const logoutUser = () => {
    //insert a loader if needed
    logout().then(() => console.log("logged out"));
  };

  return <button onClick={() => logoutUser()}>Logout</button>;
};

export default MyComponent;

This hook automatically redirects the user to the login page.

It also manages the difference between dev environment and prod environment by redirecting the user to the relevant login page.

useCronoSkeleton

You can use this custom hook to provide the loading context from the CronoSkeleton component.

import { useCronoSkeleton } from "@matchplat/crono";

const MyComponent = () => {
  const {loadingContext} = useCronoSkeleton();

  return(
    loadingContext ? <Skeleton height={size} width="100%" margin="v" display={props.block ? "block" : "inline-block"} {...skeleton}/>
    : <YourComponent />
  )

export default MyComponent;

useCronoLicense

Import useCronoLicense into your components to test if the user has a certain license.
This can also be useful for testing logical conditions and not just the visibility of components:

const MyComponent = () => {

  const hasLicense = useCronoLicense('licenseString')

  //used for logical conditions
  const showData = hasLicense ? 'show' : null;

  //used for conditional display of components
  return (
   ...
   <ContainerComponent>
    {hasLicense && <LicensedFeature />}
   </ContainerComponent>
  );
};

Check the docs for licensing.

useCronoRole

Import useCronoRole into your components to test if the user has a certain role.
This can also be useful for testing logical conditions and not just the visibility of components:

const MyComponent = () => {

  const hasRole = useCronoRole('RoleString')

  //used for logical conditions
  const showData = hasRole ? 'show' : null;

  //used for conditional display of components
  return (
   ...
   <ContainerComponent>
    {hasRole && <RoleNeeded />}
   </ContainerComponent>
  );
};

Check the docs for roles.

useMediaQuery

You can use this hook to show the current breakpoint value

const Wrapper = () => {
  const media = useMediaQuery();

  console.log(media);

  return <YourComponent showBreakpoints={true}>...</YourComponent>;
};