@aarhus-university/au-lib-react-components 8.20.1 → 8.81.0

package/src/components/profile/AUProfileAvatarComponent.js

@@ -1,83 +1,83 @@
-/* eslint-env browser */
-import React, { useEffect } from 'react';
-// eslint-disable-next-line import/extensions
-// import whyDidYouRender from '@welldone-software/
-// why-did-you-render/dist/no-classes-transpile/umd/whyDidYouRender.min.js';
-import PropTypes from 'prop-types';
-import AUProfileWidgetComponent from './AUProfileWidgetComponent';
-import AUSubNavComponent from '../delphinus/AUSubNavComponent';
-
-// whyDidYouRender(React);
-
-const AUProfileAvatarComponent = React.memo(({
-  user,
-  settings,
-  onLoad,
-  onLoadAction,
-  profileLabels,
-  logoutUri,
-  changeLanguageUrl,
-}) => {
-  const {
-    chosenFirstNames,
-    chosenLastName,
-    preferredLanguage,
-    auId,
-    studentNumber,
-  } = user;
-
-  useEffect(() => {
-    onLoad(onLoadAction);
-  }, []);
-
-  return (
-    <AUSubNavComponent
-      id="profile-menu-toggle"
-      className="nav__item nav__item--icon nav__item--icon--right"
-      dataIcon=""
-      text={chosenFirstNames}
-      ariaLabel={`${profileLabels[preferredLanguage].profileFor} ${chosenFirstNames} ${chosenLastName}`}
-    >
-      <AUProfileWidgetComponent
-        lang={preferredLanguage}
-        name={`${chosenFirstNames} ${chosenLastName}`}
-        auid={auId}
-        studentNumber={studentNumber}
-        settings={settings}
-        profileLabels={profileLabels}
-        changeLanguageUrl={changeLanguageUrl}
-        logoutUri={logoutUri}
-      />
-    </AUSubNavComponent>
-  );
-});
-
-// AUProfileAvatarComponent.whyDidYouRender = true;
-
-AUProfileAvatarComponent.defaultProps = {
-  onLoadAction: () => {
-
-  },
-};
-
-AUProfileAvatarComponent.propTypes = {
-  user: PropTypes.shape({
-    chosenFirstNames: PropTypes.string.isRequired,
-    chosenLastName: PropTypes.string.isRequired,
-    preferredLanguage: PropTypes.string.isRequired,
-    auId: PropTypes.number.isRequired,
-    studentNumber: PropTypes.string.isRequired,
-  }).isRequired,
-  settings: PropTypes.arrayOf(PropTypes.shape({
-    url: PropTypes.string.isRequired,
-    text: PropTypes.string.isRequired,
-  })).isRequired,
-  onLoad: PropTypes.func.isRequired,
-  onLoadAction: PropTypes.func,
-  profileLabels: PropTypes.shape({}).isRequired,
-  logoutUri: PropTypes.string.isRequired,
-  changeLanguageUrl: PropTypes.string.isRequired,
-};
-
-AUProfileAvatarComponent.displayName = 'AUProfileAvatarComponent';
-export default AUProfileAvatarComponent;
+/* eslint-env browser */
+import React, { useEffect } from 'react';
+// eslint-disable-next-line import/extensions
+// import whyDidYouRender from '@welldone-software/
+// why-did-you-render/dist/no-classes-transpile/umd/whyDidYouRender.min.js';
+import PropTypes from 'prop-types';
+import AUProfileWidgetComponent from './AUProfileWidgetComponent';
+import AUSubNavComponent from '../delphinus/AUSubNavComponent';
+
+// whyDidYouRender(React);
+
+const AUProfileAvatarComponent = React.memo(({
+  user,
+  settings,
+  onLoad,
+  onLoadAction,
+  profileLabels,
+  logoutUri,
+  changeLanguageUrl,
+}) => {
+  const {
+    chosenFirstNames,
+    chosenLastName,
+    preferredLanguage,
+    auId,
+    studentNumber,
+  } = user;
+
+  useEffect(() => {
+    onLoad(onLoadAction);
+  }, []);
+
+  return (
+    <AUSubNavComponent
+      id="profile-menu-toggle"
+      className="nav__item nav__item--icon nav__item--icon--right"
+      dataIcon=""
+      text={chosenFirstNames}
+      ariaLabel={`${profileLabels[preferredLanguage].profileFor} ${chosenFirstNames} ${chosenLastName}`}
+    >
+      <AUProfileWidgetComponent
+        lang={preferredLanguage}
+        name={`${chosenFirstNames} ${chosenLastName}`}
+        auid={auId}
+        studentNumber={studentNumber}
+        settings={settings}
+        profileLabels={profileLabels}
+        changeLanguageUrl={changeLanguageUrl}
+        logoutUri={logoutUri}
+      />
+    </AUSubNavComponent>
+  );
+});
+
+// AUProfileAvatarComponent.whyDidYouRender = true;
+
+AUProfileAvatarComponent.defaultProps = {
+  onLoadAction: () => {
+
+  },
+};
+
+AUProfileAvatarComponent.propTypes = {
+  user: PropTypes.shape({
+    chosenFirstNames: PropTypes.string.isRequired,
+    chosenLastName: PropTypes.string.isRequired,
+    preferredLanguage: PropTypes.string.isRequired,
+    auId: PropTypes.number.isRequired,
+    studentNumber: PropTypes.string.isRequired,
+  }).isRequired,
+  settings: PropTypes.arrayOf(PropTypes.shape({
+    url: PropTypes.string.isRequired,
+    text: PropTypes.string.isRequired,
+  })).isRequired,
+  onLoad: PropTypes.func.isRequired,
+  onLoadAction: PropTypes.func,
+  profileLabels: PropTypes.shape({}).isRequired,
+  logoutUri: PropTypes.string.isRequired,
+  changeLanguageUrl: PropTypes.string.isRequired,
+};
+
+AUProfileAvatarComponent.displayName = 'AUProfileAvatarComponent';
+export default AUProfileAvatarComponent;

package/src/components/profile/AUProfileAvatarV2Component.js

@@ -0,0 +1,91 @@
+/* eslint-env browser */
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import AUProfileWidgetComponent from './AUProfileWidgetV2Component';
+import AUSubNavComponent from '../delphinus/AUSubNavComponent';
+
+const AUProfileAvatarComponent = React.memo(({
+  user,
+  settings,
+  onLoad,
+  onLoadAction,
+  profileLabels,
+  logoutUri,
+  changeLanguageUrl,
+}) => {
+  const {
+    person: {
+      auPerson: {
+        auId, foretrukketSprog, kaldeFornavne, kaldeEfternavn,
+      },
+    },
+  } = user;
+  const studentNumber = user.studerende?.auUddannelsesidentitet?.studienr;
+
+  useEffect(() => {
+    if (typeof onLoad === 'function') {
+      onLoad(onLoadAction);
+    }
+  }, []);
+
+  return (
+    <AUSubNavComponent
+      id="profile-menu-toggle"
+      className="nav__item nav__item--icon nav__item--icon--right"
+      dataIcon=""
+      text={kaldeFornavne}
+      ariaLabel={`${profileLabels[foretrukketSprog].profileFor} ${kaldeFornavne} ${kaldeEfternavn}`}
+    >
+      <AUProfileWidgetComponent
+        lang={foretrukketSprog}
+        name={`${kaldeFornavne} ${kaldeEfternavn}`}
+        auid={auId}
+        studentNumber={studentNumber}
+        settings={settings}
+        profileLabels={profileLabels}
+        changeLanguageUrl={changeLanguageUrl}
+        logoutUri={logoutUri}
+      />
+    </AUSubNavComponent>
+  );
+});
+
+AUProfileAvatarComponent.defaultProps = {
+  onLoad: null,
+  onLoadAction: () => {
+
+  },
+  changeLanguageUrl: '',
+};
+
+AUProfileAvatarComponent.propTypes = {
+  user: PropTypes.shape({
+    person: PropTypes.shape({
+      auPerson: PropTypes.shape({
+        kaldeFornavne: PropTypes.string.isRequired,
+        kaldeEfternavn: PropTypes.string.isRequired,
+        auId: PropTypes.number.isRequired,
+        foretrukketSprog: PropTypes.string.isRequired,
+      }).isRequired,
+    }).isRequired,
+    studerende: PropTypes.shape({
+      auUddannelsesidentitet: PropTypes.shape({
+        studienr: PropTypes.number.isRequired,
+      }),
+    }),
+  }).isRequired,
+  settings: PropTypes.arrayOf(PropTypes.shape({
+    type: PropTypes.string.isRequired,
+    url: PropTypes.string,
+    text: PropTypes.string.isRequired,
+    onClick: PropTypes.func,
+  })).isRequired,
+  onLoad: PropTypes.func,
+  onLoadAction: PropTypes.func,
+  profileLabels: PropTypes.shape({}).isRequired,
+  logoutUri: PropTypes.string.isRequired,
+  changeLanguageUrl: PropTypes.string,
+};
+
+AUProfileAvatarComponent.displayName = 'AUProfileAvatarComponent';
+export default AUProfileAvatarComponent;

package/src/components/profile/AUProfileAvatarV3Component.tsx

@@ -0,0 +1,42 @@
+/* eslint-env browser */
+import React, { FC, memo } from 'react';
+import AUProfileWidgetComponent from './AUProfileWidgetV3Component';
+import AUSubNavComponent from '../AUSubNavComponent';
+
+const AUProfileAvatarComponent: FC<AUProfileAvatarComponentProps> = memo(({
+  user,
+  settings,
+  profileLabels,
+  logoutUri,
+  changeLanguageUri,
+  lang,
+}: AUProfileAvatarComponentProps) => {
+  const {
+    auId,
+    firstNames,
+    lastName,
+  } = user;
+
+  return (
+    <AUSubNavComponent
+      id="profile-menu-toggle"
+      className="nav__item nav__item--icon nav__item--icon--right"
+      dataIcon=""
+      text={firstNames}
+      ariaLabel={`${profileLabels[lang].profileFor} ${firstNames} ${lastName}`}
+    >
+      <AUProfileWidgetComponent
+        lang={lang}
+        name={`${firstNames} ${lastName}`}
+        auId={auId}
+        settings={settings}
+        profileLabels={profileLabels}
+        changeLanguageUri={changeLanguageUri}
+        logoutUri={logoutUri}
+      />
+    </AUSubNavComponent>
+  );
+});
+
+AUProfileAvatarComponent.displayName = 'AUProfileAvatarComponent';
+export default AUProfileAvatarComponent;