@jasperoosthoek/react-toolbox 0.7.5 → 0.8.0

package/dist/utils/hooks.d.ts

@@ -2,6 +2,5 @@ export declare const usePrevious: <T>(value: T) => T | undefined;
 export declare const useDebouncedEffect: (effect: () => void, deps: any[], delay: number) => void;
 export declare const useForceUpdate: () => () => void;
 export declare const useSetState: <T>(initialState: T) => [T, (subState: Partial<T>) => void];
-export declare const useWithDispatch: <G extends any[]>(obj: (...args: G) => any) => (...args: G) => any;
 export declare const useInterval: (func: () => void, value: number) => void;
 export declare const useLocalStorage: <T>(key: string, initialValue: T) => [T, (value: T) => void];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jasperoosthoek/react-toolbox",
-  "version": "0.7.5",
+  "version": "0.8.0",
   "author": "jasperoosthoek",
   "license": "MIT",
   "repository": {
@@ -59,10 +59,7 @@
     "react-dnd": "^16.0.1",
     "react-dom": "^19.1.0",
     "react-icons": "^5.4.0",
-    "react-localization": "^2.0.5",
-    "react-redux": "^9.2.0",
-    "redux": "^5.0.1",
-    "redux-thunk": "^3.1.0"
+    "react-localization": "^2.0.5"
   },
   "keywords": [
     "react",

package/src/components/login/LoginPage.tsx

@@ -0,0 +1,88 @@
+import React, { ChangeEvent, KeyboardEvent } from 'react';
+import { Container, Button, Row, Col, Form } from 'react-bootstrap';
+import { useSetState } from '../../utils/hooks';
+import { useLocalization } from '../../localization/LocalizationContext';
+
+export type LoginPageProps = {
+  onSubmit: (credentials: { email: string; password: string }, callback?: () => void) => void;
+  callback?: () => void;
+  isAuthenticated: boolean;
+  label?: string | React.ReactElement;
+  onResetPassword: string | (() => void);
+};
+
+export const LoginPage = ({
+  onSubmit,
+  isAuthenticated,
+  label,
+  onResetPassword,
+  callback,
+}: LoginPageProps) => {
+  const [state, setState] = useSetState({ email: '', password: '' });
+  const { strings } = useLocalization();
+  const submitDisabled = !state.email || !state.password;
+
+  const handleSubmit = () => {
+    if (!submitDisabled) onSubmit(state, callback);
+  };
+
+  if (isAuthenticated) return null;
+
+  return (
+    <Container>
+      <Row className="login">
+        <Col md={2} />
+        <Col md={8}>
+          {label || <h1>{strings.getString('login')}</h1>}
+          <Form>
+            <Form.Group className="mb-3">
+              <Form.Label>{strings.getString('your_email')}</Form.Label>
+              <Form.Control
+                name="email"
+                value={state.email}
+                onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                  setState({ email: e.target.value })
+                }
+                placeholder={strings.getString('enter_email')}
+                onKeyDown={(e: KeyboardEvent<HTMLInputElement>) =>
+                  e.key === 'Enter' && handleSubmit()
+                }
+              />
+            </Form.Group>
+            <Form.Group className="mb-3">
+              <Form.Label>{strings.getString('your_password')}</Form.Label>
+              <Form.Control
+                type="password"
+                name="password"
+                value={state.password}
+                onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                  setState({ password: e.target.value })
+                }
+                placeholder={strings.getString('enter_password')}
+                onKeyDown={(e: KeyboardEvent<HTMLInputElement>) =>
+                  e.key === 'Enter' && handleSubmit()
+                }
+              />
+            </Form.Group>
+          </Form>
+          <Button onClick={handleSubmit} disabled={submitDisabled}>
+            {strings.getString('login')}
+          </Button>
+          <p className="mt-2">
+            {strings.getString('forgot_password')}{' '}
+            {typeof onResetPassword === 'string' 
+              ? <a href={onResetPassword}>{strings.getString('reset_password')}</a>
+              : <span
+                  onClick={onResetPassword}
+                  className='reset-password'
+                >
+                  {strings.getString('reset_password')}
+                </span>
+            }
+          </p>
+        </Col>
+        <Col md={2} />
+      </Row>
+    </Container>
+  );
+};

package/src/index.ts

@@ -22,7 +22,7 @@ export * from './utils/hooks';
 export * from './utils/timeAndDate';
 export * from './utils/utils';
 
-export * from './login/Login';
+export * from './components/login/LoginPage';
 
 export * from './localization/localization';
 export * from './localization/LocalizationContext';

package/src/utils/hooks.ts

@@ -1,5 +1,4 @@
 import React, { useRef, useEffect, useState, useCallback } from 'react';
-import { useDispatch } from 'react-redux';
 
 // https://stackoverflow.com/questions/53446020/how-to-compare-oldvalues-and-newvalues-on-react-hooks-useeffect
 export const usePrevious = <T>(value: T): T | undefined => {
@@ -41,12 +40,6 @@ export const useSetState = <T>(initialState: T): [T, (subState: Partial<T>) => v
   return [state, setSubState];
 }
 
-export const useWithDispatch = <G extends any[]>(obj: (...args: G) => any) => {
-  const dispatch = useDispatch();
-  
-  return (...args: G) => dispatch(obj(...args));
-};
-
 // https://devtrium.com/posts/set-interval-react
 export const useInterval = (func: () => void, value: number) => useEffect(() => {
   if (typeof func !== 'function') {

package/src/login/Login.tsx

@@ -1,333 +0,0 @@
-import React, { ReactElement, ChangeEvent, KeyboardEvent } from 'react';
-import { useSelector, useStore, useDispatch } from 'react-redux';
-import { ThunkAction, ThunkDispatch } from 'redux-thunk';
-
-import axios, { AxiosResponse, AxiosInstance } from 'axios';
-import { Container, Button, Row, Col, Form } from 'react-bootstrap';
-
-import { useSetState, useWithDispatch } from '../utils/hooks';
-import { useLocalization } from '../localization/LocalizationContext';
-import { isEmpty } from '../utils/utils';
-
-export const LOGIN_SET_TOKEN = 'LOGIN_SET_TOKEN';
-export const LOGIN_SET_CURRENT_USER = 'LOGIN_SET_CURRENT_USER';
-export const LOGIN_UNSET_CURRENT_USER = 'LOGIN_UNSET_CURRENT_USER';
-
-export type LoginActions =
-  | { type: 'LOGIN_SET_TOKEN'; payload: string }
-  | { type: 'LOGIN_SET_CURRENT_USER'; payload: any }
-  | { type: 'LOGIN_UNSET_CURRENT_USER' };
-
-const useThunkDispatch = () => {
-  const dispatch = useDispatch() as ThunkDispatch<any, undefined, LoginActions>;
-  return dispatch;
-};
-
-export type AuthState = {
-  isAuthenticated: boolean;
-  user: any | null;
-  token: string;
-}
-
-type Action = {
-  type: string,
-  [key: string]: any,
-}
-export type LoginFactoryProps = {
-  authenticatedComponent: (props: any) => ReactElement;
-  passwordResetUrl: string;
-  axios: typeof axios | AxiosInstance;
-  onError: (error: any) => void;
-  onLogout?: () => void;
-  loginUrl: string;
-  getUserUrl: string;
-  logoutUrl: string;
-  localStoragePrefix: string;
-};
-
-export type LoginProps = {
-  label?: string | ReactElement;
-};
-const errorIfUndefined = (obj: Partial<LoginFactoryProps>) => Object.entries(obj).reduce((error, [param, value]) => {
-  if (typeof value === 'undefined') {
-    console.error(`Parameter ${param} of loginFactory cannot be undefined`);
-  }
-  return error;
-}, false);
-
-export const loginFactory = ({
-  authenticatedComponent,
-  passwordResetUrl,
-  axios,
-  onError = () => {},
-  onLogout,
-  loginUrl,
-  getUserUrl,
-  logoutUrl,
-  localStoragePrefix,
-}: LoginFactoryProps) => {
-
-  const localStorageUser = localStoragePrefix ? `${localStoragePrefix}-user` : 'user';
-  const localStorageToken = localStoragePrefix ? `${localStoragePrefix}-token` : 'token';
-  const localStorageState = localStoragePrefix ? `${localStoragePrefix}-state` : 'state';
-  
-  errorIfUndefined({
-    authenticatedComponent,
-    passwordResetUrl,
-    axios,
-    loginUrl,
-    getUserUrl,
-    logoutUrl,
-  });
-
-  const AuthenticatedComponent = authenticatedComponent;
-
-  const login = (
-    userData: any,
-    callback?: () => void
-  ): ThunkAction<Promise<void>, any, undefined, LoginActions> => {
-    return async (dispatch: ThunkDispatch<any, undefined, LoginActions>) => {
-      try {
-        const response = await axios.post(loginUrl, userData);
-        const { auth_token } = response.data;
-        dispatch(setToken(auth_token));
-        dispatch(getCurrentUser());
-        if (typeof callback === 'function') callback();
-      } catch (error) {
-        dispatch(unsetCurrentUser());
-        onError(error);
-      }
-    };
-  };
-
-  const setAxiosAuthToken = (token: string) => {
-    if (typeof token !== 'undefined' && token) {
-      // Apply for every request
-      axios.defaults.headers.common['Authorization'] = 'Token ' + token;
-    } else {
-      // Delete auth header
-      delete axios.defaults.headers.common['Authorization'];
-    }
-  };
-  
-  const getCurrentUser = ({ callback }: { callback?: (userData: any) => void} = {}) => async (dispatch: ThunkDispatch<any, undefined, any>) => {
-    try {
-      const response = await axios.get(getUserUrl) as AxiosResponse;
-      dispatch(setCurrentUser(response.data));
-      if (typeof callback === 'function') callback(response.data);
-
-    } catch(error) {
-      dispatch(unsetCurrentUser());
-      onError(error);
-    };
-  };
-  
-  const setCurrentUser = (user: any) => (dispatch: ThunkDispatch<any, undefined, any>) => {
-    localStorage.setItem(localStorageUser, JSON.stringify(user));
-    dispatch({
-      type: LOGIN_SET_CURRENT_USER,
-      payload: user,
-    });
-  };
-  
-  const setToken = (token: string) => (dispatch: ThunkDispatch<any, undefined, any>) => {
-    setAxiosAuthToken(token);
-    localStorage.setItem(localStorageToken, token);
-    dispatch({
-      type: LOGIN_SET_TOKEN,
-      payload: token,
-    });
-  };
-  
-  const unsetCurrentUser = () => (dispatch: ThunkDispatch<any, undefined, any>) => {
-    setAxiosAuthToken('');
-    localStorage.removeItem(localStorageToken);
-    localStorage.removeItem(localStorageUser);
-    localStorage.removeItem(localStorageState);
-    dispatch({
-      type: LOGIN_UNSET_CURRENT_USER
-    });
-  };
-  
-  const logout = () => async (dispatch: ThunkDispatch<any, undefined, any>) => {
-    try {
-      await axios.post(logoutUrl);
-      dispatch(unsetCurrentUser());
-      if (typeof onLogout === 'function') onLogout();
-    } catch(error) {
-      dispatch(unsetCurrentUser());
-      onError(error);
-    };
-  };
-  
-  const useLogin = () => {
-    return (
-      {
-        login: useWithDispatch(login),
-        getCurrentUser: useWithDispatch(getCurrentUser),
-        setCurrentUser: useWithDispatch(setCurrentUser),
-        setToken: useWithDispatch(setToken),
-        unsetCurrentUser: useWithDispatch(unsetCurrentUser),
-        logout: useWithDispatch(logout),
-      }
-    );
-  }
-
-  const token = localStorage.getItem(localStorageToken);
-  const user = localStorage.getItem(localStorageUser);
-
-  const hasLocalStorage = !isEmpty(user) && !isEmpty(token);
-  const initialState = {
-    ...hasLocalStorage
-    ? {
-      isAuthenticated: true,
-      user: user ? JSON.parse(user) : null,
-      token,
-    }
-    : {
-        isAuthenticated: false,
-        user: null,
-        token: ''
-      },
-  } as AuthState;
-  if (hasLocalStorage && token) {
-    setAxiosAuthToken(token);
-  }
-
-  const authReducer = {
-    auth:
-      (state = initialState, action: Action) => {
-        switch (action.type) {
-          case LOGIN_SET_TOKEN:
-            return {
-              ...state,
-              isAuthenticated: true,
-              token: action.payload,
-            };
-          case LOGIN_SET_CURRENT_USER:
-            return {
-              ...state,
-              user: action.payload,
-            };
-          case LOGIN_UNSET_CURRENT_USER:
-            return initialState;
-          default:
-            return state;
-        }
-      },
-  };
-  const useAuth = () => {
-    return useSelector((state: any) => state.auth);
-  }
-  const Login = ({ label }: LoginProps) => {
-    const [state, setState] = useSetState({
-      email: '',
-      password: ''
-    });
-    const isAuthenticated = useSelector(({ auth }: any) => auth.isAuthenticated );
-    const dispatch = useThunkDispatch();
-    const { strings } = useLocalization();
-  
-    const onChange = (e: ChangeEvent<HTMLInputElement>) => {
-      setState({ [e.target.name]: e.target.value });
-    };
-    const submitDisabled = !state.email || !state.password;
-    const onLoginClick = () => {
-      if (submitDisabled) return;
-      const userData = {
-        email: state.email,
-        password: state.password
-      };
-      dispatch(login(userData));
-    };
-  
-    if (isAuthenticated) {
-      return <AuthenticatedComponent />
-    }
-    return (
-      <Container>
-        <Row className="login">
-          <Col md='2'>
-          </Col>
-          <Col md='8'>
-            {label || <h1>{strings.getString('login')}</h1>}
-            <Form>
-              <Form.Group className="mb-3">
-                <Form.Label>{strings.getString('your_email')}</Form.Label>
-                <Form.Control
-                  type='text'
-                  name='email'
-                  placeholder={strings.getString('enter_email')}
-                  value={state.email}
-                  onChange={onChange}
-                  onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
-                    if (e.key === 'Enter') {
-                      e.preventDefault();
-                      if (!submitDisabled) onLoginClick();
-                    }
-                  }}
-                />
-              </Form.Group>
-  
-              <Form.Group className="mb-3">
-                <Form.Label>{strings.getString('your_password')}</Form.Label>
-                <Form.Control
-                  type='password'
-                  name='password'
-                  placeholder={strings.getString('enter_password')}
-                  value={state.password}
-                  onChange={onChange}
-                  onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
-                    if (e.key === 'Enter') {
-                      e.preventDefault();
-                      if (!submitDisabled) onLoginClick();
-                    }
-                  }}
-                />
-              </Form.Group>
-            </Form>
-            <Button
-              variant='primary'
-              onClick={onLoginClick}
-              disabled={submitDisabled}
-            >
-              {strings.getString('login')}
-            </Button>
-            <p className='mt-2'>
-              {strings.getString('forgot_password')}{' '}
-              <a href={passwordResetUrl}>{strings.getString('reset_password')}</a>
-            </p>
-          </Col>
-          <Col md='2'>
-          </Col>
-        </Row>
-      </Container>
-    );
-  };
-  
-  return {
-    Login,
-    useLogin,
-    login,
-    getCurrentUser,
-    setCurrentUser,
-    setToken,
-    unsetCurrentUser,
-    logout,
-    authReducer,
-    useAuth,
-    storeState: (state: any, action: Action) => {
-      if (action.type === LOGIN_UNSET_CURRENT_USER) {
-        localStorage.removeItem(localStorageState);
-      } else {
-        localStorage.setItem(localStorageState, JSON.stringify(state));
-      }
-    },
-    retrieveState: () => {
-      const state = localStorage.getItem(localStorageState);
-      if (!state) return {};
-      return JSON.parse(state);
-    },
-  }
-}
-