start

src/components/layouts/main/auth-header.js

@@ -0,0 +1,76 @@
+import { useEffect } from 'react';
+import { connect } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { logoutUser } from '../../../redux/actions/auth';
+import NavLink from '../../shared/buttons/nav-link';
+import { fetchStudent } from '../../../redux/actions/student';
+import ButtonGroup from '../../shared/buttons/button-group';
+import Button from '../../shared/buttons/button';
+import { fetchUserData } from '../../../redux/actions/user';
+import { isAnonymous, isAuthenticated as isAuthenticatedFn } from '../../../redux/utils/auth';
+
+function AuthHeader(props) {
+  useEffect(() => props.fetchStudent(), []);
+  const history = useHistory();
+  const nextURL = `${history.location.pathname}${history.location.search.replace('&', ';')}`;
+
+  if (isAnonymous(props.authStatus)) {
+    return (
+      <ButtonGroup className={props.className}>
+        <NavLink
+          to={`/login?next=${nextURL}`}
+          color='blue'
+          content='ورود'
+          className={props.className}
+        />
+        <NavLink
+          to={`/register?next=${nextURL}`}
+          color='blue'
+          content='ثبت نام'
+          className={props.className}
+        />
+      </ButtonGroup>
+    );
+  }
+
+  const isAuthenticated = isAuthenticatedFn(props.authStatus);
+
+  return (
+    <ButtonGroup className={props.className}>
+      <NavLink
+        to='/profile'
+        content={props.name}
+        loading={!isAuthenticated || !props.name}
+        disabled={!isAuthenticated || !props.name}
+      />
+      <Button
+        content='خروج'
+        color='red'
+        onClick={props.logoutUser.bind(null, history)}
+        loading={!isAuthenticated}
+        disabled={!isAuthenticated}
+      />
+    </ButtonGroup>
+  );
+}
+
+AuthHeader.propTypes = {
+  authStatus: PropTypes.string.isRequired,
+  name: PropTypes.string,
+  mobile: PropTypes.string,
+  fetchUserData: PropTypes.func.isRequired,
+  fetchStudent: PropTypes.func.isRequired,
+  logoutUser: PropTypes.func.isRequired,
+  className: PropTypes.string
+};
+
+function mapStateToProps(state) {
+  return {
+    authStatus: state.auth.status,
+    name: state.user.data.name,
+    mobile: state.user.data.mobile
+  };
+}
+
+export default connect(mapStateToProps, { fetchUserData, fetchStudent, logoutUser })(AuthHeader);