[#855] 5) wait for decision flow

invenio_communities/assets/semantic-ui/js/invenio_communities/api/CommunityLinksExtractor.js

@@ -35,4 +35,12 @@ export class CommunityLinksExtractor {
     }
     return this.#urls.invitations;
   }
+
+  url(key) {
+    const urlOfKey = this.#urls[key];
+    if (!urlOfKey) {
+      throw TypeError(`"${key}" link missing from resource.`);
+    }
+    return urlOfKey;
+  }
 }

invenio_communities/assets/semantic-ui/js/invenio_communities/api/RequestLinksExtractor.js

@@ -0,0 +1,29 @@
+// This file is part of Invenio-communities
+// Copyright (C) 2024 Northwestern University.
+//
+// Invenio-communities is free software; you can redistribute it and/or modify it
+// under the terms of the MIT License; see LICENSE file for more details.
+
+export class RequestLinksExtractor {
+  #urls;
+
+  constructor(request) {
+    if (!request?.links) {
+      throw TypeError("Request resource links are undefined");
+    }
+    this.#urls = request.links;
+  }
+
+  url(key) {
+    const urlOfKey = this.#urls[key];
+    if (!urlOfKey) {
+      throw TypeError(`"${key}" link missing from resource.`);
+    }
+    return urlOfKey;
+  }
+
+  get userDiscussionUrl() {
+    const result = this.url("self_html");
+    return result.replace("/requests/", "/me/requests/");
+  }
+}

invenio_communities/assets/semantic-ui/js/invenio_communities/api/membershipRequests/MembershipRequestsContextProvider.js

@@ -0,0 +1,33 @@
+// This file is part of Invenio-communities
+// Copyright (C) 2022 CERN.
+// Copyright (C) 2024 Northwestern University.
+//
+// Invenio-communities is free software; you can redistribute it and/or modify it
+// under the terms of the MIT License; see LICENSE file for more details.
+
+import { CommunityMembershipRequestsApi } from "./api";
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+export const MembershipRequestsContext = React.createContext({ api: undefined });
+
+export class MembershipRequestsContextProvider extends Component {
+  constructor(props) {
+    super(props);
+    const { community } = props;
+    this.apiClient = new CommunityMembershipRequestsApi(community);
+  }
+  render() {
+    const { children } = this.props;
+    return (
+      <MembershipRequestsContext.Provider value={{ api: this.apiClient }}>
+        {children}
+      </MembershipRequestsContext.Provider>
+    );
+  }
+}
+
+MembershipRequestsContextProvider.propTypes = {
+  community: PropTypes.object.isRequired,
+  children: PropTypes.node.isRequired,
+};

invenio_communities/assets/semantic-ui/js/invenio_communities/api/membershipRequests/api.js

@@ -0,0 +1,26 @@
+// This file is part of Invenio-communities
+// Copyright (C) 2022 CERN.
+// Copyright (C) 2024 Northwestern University.
+//
+// Invenio-communities is free software; you can redistribute it and/or modify it
+// under the terms of the MIT License; see LICENSE file for more details.
+
+import { CommunityLinksExtractor } from "../CommunityLinksExtractor";
+import { http } from "react-invenio-forms";
+
+/**
+ * API Client for community membership requests.
+ *
+ * It mostly uses the API links passed to it from initial community.
+ *
+ */
+export class CommunityMembershipRequestsApi {
+  constructor(community) {
+    this.community = community;
+    this.linksExtractor = new CommunityLinksExtractor(community);
+  }
+
+  requestMembership = async (payload) => {
+    return await http.post(this.linksExtractor.url("membership_requests"), payload);
+  };
+}

invenio_communities/assets/semantic-ui/js/invenio_communities/community/header/RequestMembershipButton.js

@@ -0,0 +1,148 @@
+/*
+ * This file is part of Invenio.
+ * Copyright (C) 2024 CERN.
+ * Copyright (C) 2024 Northwestern University.
+ *
+ * Invenio is free software; you can redistribute it and/or modify it
+ * under the terms of the MIT License; see LICENSE file for more details.
+ */
+
+import { i18next } from "@translations/invenio_communities/i18next";
+import { Formik } from "formik";
+import PropTypes from "prop-types";
+import React, { useState } from "react";
+import { TextAreaField } from "react-invenio-forms";
+import { Button, Form, Grid, Message, Modal } from "semantic-ui-react";
+
+import { CommunityMembershipRequestsApi } from "../../api/membershipRequests/api";
+import { communityErrorSerializer } from "../../api/serializers";
+import { RequestLinksExtractor } from "../../api/RequestLinksExtractor";
+
+export function RequestMembershipModal(props) {
+  const [errorMsg, setErrorMsg] = useState("");
+
+  const { community, isOpen, onClose } = props;
+
+  const onSubmit = async (values, { setSubmitting, setFieldError }) => {
+    /**Submit callback called from Formik. */
+    setSubmitting(true);
+
+    const client = new CommunityMembershipRequestsApi(community);
+
+    try {
+      const response = await client.requestMembership(values);
+      const linksExtractor = new RequestLinksExtractor(response.data);
+      window.location.href = linksExtractor.userDiscussionUrl;
+    } catch (error) {
+      setSubmitting(false);
+
+      console.log("Error");
+      console.dir(error);
+
+      const { errors, message } = communityErrorSerializer(error);
+
+      if (message) {
+        setErrorMsg(message);
+      }
+
+      if (errors) {
+        errors.forEach(({ field, messages }) => setFieldError(field, messages[0]));
+      }
+    }
+  };
+
+  return (
+    <Formik
+      initialValues={{
+        message: "",
+      }}
+      onSubmit={onSubmit}
+    >
+      {({ values, isSubmitting, handleSubmit }) => (
+        <Modal
+          open={isOpen}
+          onClose={onClose}
+          size="small"
+          closeIcon
+          closeOnDimmerClick={false}
+        >
+          <Modal.Header>{i18next.t("Request Membership")}</Modal.Header>
+          <Modal.Content>
+            <Message hidden={errorMsg === ""} negative className="flashed">
+              <Grid container>
+                <Grid.Column mobile={16} tablet={12} computer={8} textAlign="left">
+                  <strong>{errorMsg}</strong>
+                </Grid.Column>
+              </Grid>
+            </Message>
+
+            <Form>
+              <TextAreaField
+                fieldPath="message"
+                label={i18next.t("Message to managers (optional)")}
+              />
+            </Form>
+          </Modal.Content>
+          <Modal.Actions>
+            <Button onClick={onClose} floated="left">
+              {i18next.t("Cancel")}
+            </Button>
+            <Button
+              disabled={isSubmitting}
+              loading={isSubmitting}
+              onClick={handleSubmit}
+              positive
+              primary
+              type="button"
+            >
+              {i18next.t("Request Membership")}
+            </Button>
+          </Modal.Actions>
+        </Modal>
+      )}
+    </Formik>
+  );
+}
+
+RequestMembershipModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  community: PropTypes.object.isRequired,
+};
+
+export function RequestMembershipButton(props) {
+  const [isModalOpen, setModalOpen] = useState(false);
+  const { community } = props;
+
+  const handleClick = () => {
+    setModalOpen(true);
+  };
+
+  const handleClose = () => {
+    setModalOpen(false);
+  };
+
+  return (
+    <>
+      <Button
+        name="request-membership"
+        onClick={handleClick}
+        positive
+        icon="sign-in"
+        labelPosition="left"
+        content={i18next.t("Request Membership")}
+      />
+      {isModalOpen && (
+        <RequestMembershipModal
+          isOpen={isModalOpen}
+          onClose={handleClose}
+          community={community}
+        />
+      )}
+    </>
+  );
+}
+
+RequestMembershipButton.propTypes = {
+  community: PropTypes.object.isRequired,
+};

invenio_communities/assets/semantic-ui/js/invenio_communities/community/header/index.js

@@ -0,0 +1,21 @@
+/*
+ * This file is part of Invenio.
+ * Copyright (C) 2024 Northwestern University.
+ *
+ * Invenio is free software; you can redistribute it and/or modify it
+ * under the terms of the MIT License; see LICENSE file for more details.
+ */
+
+import ReactDOM from "react-dom";
+
+import React from "react";
+
+import { RequestMembershipButton } from "./RequestMembershipButton";
+
+const domContainer = document.getElementById("request-membership-app");
+
+const community = JSON.parse(domContainer.dataset.community);
+
+if (domContainer) {
+  ReactDOM.render(<RequestMembershipButton community={community} />, domContainer);
+}

invenio_communities/assets/semantic-ui/js/invenio_communities/members/Filters.js

@@ -49,6 +49,12 @@ export class Filters {
     return { ...rolesFilters, ...statusFilters };
   }
 
+  getMembershipRequestFilters() {
+    const statusFilters = this.getStatus();
+    const rolesFilters = this.getRoles();
+    return { ...rolesFilters, ...statusFilters };
+  }
+
   getMembersFilters() {
     const visibilityFilters = this.getVisibility();
     const rolesFilters = this.getRoles();

invenio_communities/assets/semantic-ui/js/invenio_communities/members/MemberRequestsResults.js

@@ -0,0 +1,58 @@
+/*
+ * This file is part of Invenio.
+ * Copyright (C) 2022 CERN.
+ * Copyright (C) 2024 Northwestern University.
+ *
+ * Invenio is free software; you can redistribute it and/or modify it
+ * under the terms of the MIT License; see LICENSE file for more details.
+ */
+
+import React from "react";
+import { Grid } from "semantic-ui-react";
+import { ResultsPerPage, Pagination, ResultsList } from "react-searchkit";
+import PropTypes from "prop-types";
+import { Trans } from "react-i18next";
+
+export const MemberRequestsResults = ({ paginationOptions, currentResultsState }) => {
+  const { total } = currentResultsState.data;
+  return (
+    total && (
+      <Grid>
+        <Grid.Row>
+          <Grid.Column width={16}>
+            <ResultsList />
+          </Grid.Column>
+        </Grid.Row>
+        <Grid.Row verticalAlign="middle">
+          <Grid.Column width={8} textAlign="right">
+            <Pagination
+              options={{
+                size: "mini",
+                showFirst: false,
+                showLast: false,
+              }}
+            />
+          </Grid.Column>
+          <Grid.Column textAlign="right" width={8}>
+            <ResultsPerPage
+              values={paginationOptions.resultsPerPage}
+              label={(cmp) => (
+                // kept key for translation purposes - it should be
+                // the same across members, invitations, membership requests
+                // and beyond
+                <Trans key="communitiesInvitationsResult" count={cmp}>
+                  {cmp} results per page
+                </Trans>
+              )}
+            />
+          </Grid.Column>
+        </Grid.Row>
+      </Grid>
+    )
+  );
+};
+
+MemberRequestsResults.propTypes = {
+  paginationOptions: PropTypes.object.isRequired,
+  currentResultsState: PropTypes.object.isRequired,
+};