Picklejar Package Login Signup

Description

Picklejar login package is a package that provides a Login Component, Verify ID Component and Profile Component.

Installation

yarn install picklejar-package-login-signup

Usage

• Import the package

import {
  AppContext, // The app context
  getApiHost, // The api host
  getEnvironment, // The environment
  getHost, // The host
  NotificationBar, // The notification bar
  NotificationProvider, // The notification provider
  PICKLEJAR_DEFAULT_PROFILE_PAGE_URL,  // The default profile page url
  PicklejarLogin, // The login component
  PicklejarProfile, // The profile component
  PicklejarTheme, // The theme
  UserContext, // The user context
  UserProvider // The user provider
} from 'pj-fan-login-signup';

import './lib/styles/picklejarTheme.css';

• Wrap your app with the AppContext, UserProvider, NotificationProvider and ThemeProvider components

const App = props => {
  const { sessionKey } = props;

  const environment = useMemo(() => getEnvironment(), []);

  const apiHost = getApiHost(environment);
  const host = getHost(environment);

  const appContextValue = useMemo(() => (
    { host, apiHost }
  ), [host, apiHost]);

  const navigate = useNavigate();

  return (
    <AppContext.Provider value={appContextValue}>
      <UserProvider sessionKey={sessionKey}>
        <NotificationProvider>
          <NotificationBar />
          <UserContext.Consumer>
            {context => {
              const { isLogged, status } = context;
              return (
                <ThemeProvider theme={PicklejarTheme}>
                  <div className="App">
                    <Routes>
                      ...
                      {status !== 'new-ngo' && (
                        <Route
                          exact
                          path="/"
                          element={
                            <PicklejarLogin
                              loginRedirect={PICKLEJAR_DEFAULT_PROFILE_PAGE_URL}
                              navigate={navigate}
                            />
                          }
                        />
                      )}
                      ...
                    </Routes>
                  </div>
                </ThemeProvider>
              );
            }}
          </UserContext.Consumer>
        </NotificationProvider>
      </UserProvider>
    </AppContext.Provider>
  );
};

App.defaultProps = {
  sessionKey: 'session_key_value'
};

App.propTypes = {
  sessionKey: PropTypes.string
};

export default App;