/explore

.gitignore

@@ -32,4 +32,5 @@ yarn-error.log*
 # vercel
 .vercel
 
+#vs code workspace files
 *.code-workspace

components/CachedContextMultiLevelSelect.js

@@ -0,0 +1,139 @@
+
+import React, { useCallback, useEffect, useState } from 'react';
+import _ from 'lodash';
+
+import { useAuth } from '../lib/Auth';
+import { useMatrix } from '../lib/Matrix';
+import LoadingSpinnerInline from './UI/LoadingSpinnerInline';
+
+const CachedContextMultiLevelSelectSingleLevel = ({ parentSpaceRoomId, selectedContextRoomId, onSelect, onFetchedChildren, templatePlaceholderMapping, templatePrefixFilter, sortAlphabetically, showTopics }) => {
+    const auth = useAuth();
+    const matrixClient = auth.getAuthenticationProvider('matrix').getMatrixClient();
+    const matrix = useMatrix(auth.getAuthenticationProvider('matrix'));
+    const [isLoading, setIsLoading] = useState(true);
+    const [parentSpaceMetaEvent, setParentSpaceMetaEvent] = useState();
+    const [childContexts, setChildContexts] = useState();
+
+    useEffect(() => {
+        let isSubscribed = true;
+
+        // Fetch all child contexts from our storage
+        const fetchChildContexts = async () => {
+            let newChildContexts = [];
+            const spaceCache = await matrix.spaces.get(parentSpaceRoomId) || await matrix.rooms.get(parentSpaceRoomId);
+            if (!spaceCache) return;
+            setParentSpaceMetaEvent(spaceCache.meta);
+            for (const room of spaceCache.children) {
+                const roomObject = matrix.spaces.get(room) || matrix.rooms.get(room);
+                // // If this is not a context, ignore this space child
+                // if (metaEvent && metaEvent.type !== 'context') continue;
+                // // If we only want to show specific contexts, ignore this space child if its template doesn't have the given prefix
+                if (templatePrefixFilter && roomObject.meta && !_.startsWith(roomObject.meta.template, templatePrefixFilter)) continue;
+                // // ... otherwise show this space child:
+                newChildContexts.push(roomObject);
+            }
+            if (sortAlphabetically) {
+                newChildContexts = _.sortBy(newChildContexts, 'name');
+            }
+            if (!isSubscribed) return;
+            onFetchedChildren(newChildContexts.length > 0);
+            setChildContexts(newChildContexts);
+        };
+
+        const fetch = async () => {
+            setIsLoading(true);
+            await fetchChildContexts();
+            setIsLoading(false);
+        };
+
+        fetch();
+
+        return () => {
+            isSubscribed = false;
+        };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [matrixClient, parentSpaceRoomId, sortAlphabetically, templatePlaceholderMapping, templatePrefixFilter]);
+
+    if (isLoading) {
+        return <select key="loading" disabled><option><LoadingSpinnerInline /></option></select>;
+    }
+
+    if (!childContexts || childContexts.length < 1) {
+        return null;
+    }
+
+    return (
+        <select
+            value={selectedContextRoomId}
+            onChange={(e) => {
+                onSelect(parentSpaceRoomId, e.target.value);
+            }}
+        >
+            {
+                (templatePlaceholderMapping && parentSpaceMetaEvent && templatePlaceholderMapping[parentSpaceMetaEvent.template]
+                // If we have a template-specific placeholder, show that...
+                    ? <option disabled value="">{ templatePlaceholderMapping[parentSpaceMetaEvent.template] }</option>
+                // ... otherwise just show an empty placeholder
+                    : <option disabled value="">-- select --</option>
+                )
+            }
+            { Object.entries(childContexts).map(([key, room]) => {
+                // if room is undefined we jumop to the next one
+                // this can happen when for example a room was not removed as a space child from its parent but is already deleted
+                if (!room) return;
+
+                return <option key={key} value={room.roomId}>
+                    { room.name }
+                    { showTopics && room.topic && (` (${room.topic})`) }
+                </option>;
+            }) }
+        </select>
+    );
+};
+
+/**
+ * This component renders a multi-level <select> UI for an arbitrary set of contexts in the sense of Matrix spaces.
+ * `activeContexts` is the array of room IDs for the currently set context spaces.
+ *
+ * @param {Array} activeContexts
+ * @param {function} onChange (newActiveContexts, isLeaf)
+ * @param {boolean} showTopics - If the contents of m.room.topic should be displayed in parentheses next to the name
+ * @param {boolean} sortAlphabetically - If entries should be ordered alphabetically
+ * @param {Object} templatePlaceholderMapping - Optional object containing placeholders for each <select> based on the `dev.medienhaus.meta.template` of the parent context
+ * @param {string} templatePrefixFilter - Optional prefix to filter contexts by their templates
+ *
+ * @return {React.ReactElement}
+ */
+const CachedContextMultiLevelSelect = ({ activeContexts, onChange, showTopics, sortAlphabetically, templatePlaceholderMapping, templatePrefixFilter }) => {
+    const onSelect = useCallback((parentContextRoomId, selectedChildContextRoomId) => {
+        const newActiveContexts = [...activeContexts.splice(0, activeContexts.findIndex((contextRoomId) => contextRoomId === parentContextRoomId) + 1)];
+        if (selectedChildContextRoomId) newActiveContexts.push(selectedChildContextRoomId);
+        onChange(newActiveContexts, undefined);
+    }, [activeContexts, onChange]);
+
+    const onFinishedFetchingChildren = useCallback((hasChildren) => {
+        if (onChange.length > 1) {
+            onChange(activeContexts, !hasChildren);
+        }
+    }, [activeContexts, onChange]);
+
+    return (
+        <>
+            { activeContexts && activeContexts.map((contextRoomId, i) => (
+                <CachedContextMultiLevelSelectSingleLevel
+                    key={contextRoomId}
+                    onSelect={onSelect}
+                    onFetchedChildren={onFinishedFetchingChildren}
+                    parentSpaceRoomId={contextRoomId}
+                    selectedContextRoomId={activeContexts[i + 1] ?? ''}
+                    showTopics={showTopics}
+                    sortAlphabetically={sortAlphabetically}
+                    templatePlaceholderMapping={templatePlaceholderMapping}
+                    templatePrefixFilter={templatePrefixFilter}
+                />
+            )) }
+        </>
+    );
+};
+
+export default CachedContextMultiLevelSelect;

components/ContextMultiLevelSelect.js

@@ -1,15 +1,18 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import _ from 'lodash';
+import { useTranslation } from 'react-i18next';
 
 import { useAuth } from '../lib/Auth';
+import LoadingSpinner from './UI/LoadingSpinner';
 
-const ContextMultiLevelSelectSingleLevel = ({ parentSpaceRoomId, selectedContextRoomId, onSelect, onFetchedChildren, templatePlaceholderMapping, templatePrefixFilter, sortAlphabetically, showTopics }) => {
+const ContextMultiLevelSelectSingleLevel = ({ parentSpaceRoomId, selectedContextRoomId, onSelect, onFetchedChildren, templatePlaceholderMapping, templatePrefixFilter, sortAlphabetically, showTopics, setSelectedContextName }) => {
     const auth = useAuth();
     const matrix = auth.getAuthenticationProvider('matrix');
     const matrixClient = matrix.getMatrixClient();
     const [isLoading, setIsLoading] = useState(true);
     const [parentSpaceMetaEvent, setParentSpaceMetaEvent] = useState();
     const [childContexts, setChildContexts] = useState();
+    const { t } = useTranslation();
 
     useEffect(() => {
         let isSubscribed = true;
@@ -31,16 +34,19 @@ const ContextMultiLevelSelectSingleLevel = ({ parentSpaceRoomId, selectedContext
                 });
             if (!roomHierarchy) roomHierarchy = { rooms: [] };
 
+            // return name of selected context
+            setSelectedContextName && setSelectedContextName(roomHierarchy.rooms[0].name);
             // Remove the first entry, which is the context we retrieved the children for
+
             roomHierarchy.rooms.shift();
 
             // Ensure we're looking at contexts, and not spaces/rooms of other types
             for (const room of roomHierarchy.rooms) {
-                const metaEvent = await matrixClient.getStateEvent(room.room_id, 'dev.medienhaus.meta').catch(() => {});
+                const metaEvent = await matrixClient.getStateEvent(room.room_id, 'dev.medienhaus.meta').catch(() => { });
                 // If this space/room does not have a meta event we do not care about it
                 if (!metaEvent) continue;
                 // If this is not a context, ignore this space child
-                if (metaEvent && metaEvent.type !== 'context') continue;
+                // if (metaEvent && metaEvent.type !== 'context') continue;
                 // If we only want to show specific contexts, ignore this space child if its template doesn't have the given prefix
                 if (templatePrefixFilter && metaEvent && !_.startsWith(metaEvent.template, templatePrefixFilter)) continue;
                 // ... otherwise show this space child:
@@ -73,7 +79,7 @@ const ContextMultiLevelSelectSingleLevel = ({ parentSpaceRoomId, selectedContext
     }, [matrixClient, parentSpaceRoomId, sortAlphabetically, templatePlaceholderMapping, templatePrefixFilter]);
 
     if (isLoading) {
-        return <select key="loading" disabled><option>loading...</option></select>;
+        return <LoadingSpinner />;
     }
 
     if (childContexts.length < 1) {
@@ -92,7 +98,7 @@ const ContextMultiLevelSelectSingleLevel = ({ parentSpaceRoomId, selectedContext
                 // If we have a template-specific placeholder, show that...
                     ? <option disabled value="">{ templatePlaceholderMapping[parentSpaceMetaEvent.template] }</option>
                 // ... otherwise just show an empty placeholder
-                    : <option disabled value="" />
+                    : <option disabled value="">-- { t('select {{option}}', { option: parentSpaceMetaEvent?.type }) } --</option>
                 )
             }
             { Object.entries(childContexts).map(([key, room]) => (
@@ -115,12 +121,14 @@ const ContextMultiLevelSelectSingleLevel = ({ parentSpaceRoomId, selectedContext
  * @param {boolean} sortAlphabetically - If entries should be ordered alphabetically
  * @param {Object} templatePlaceholderMapping - Optional object containing placeholders for each <select> based on the `dev.medienhaus.meta.template` of the parent context
  * @param {string} templatePrefixFilter - Optional prefix to filter contexts by their templates
+ * @param {React.setState} setSelectedContextName- Oprional setter function for parent name
  *
  * @return {React.ReactElement}
  */
-const ContextMultiLevelSelect = ({ activeContexts, onChange, showTopics, sortAlphabetically, templatePlaceholderMapping, templatePrefixFilter }) => {
+const ContextMultiLevelSelect = ({ activeContexts, onChange, showTopics, sortAlphabetically, templatePlaceholderMapping, templatePrefixFilter, setSelectedContextName }) => {
     const onSelect = useCallback((parentContextRoomId, selectedChildContextRoomId) => {
         const newActiveContexts = [...activeContexts.splice(0, activeContexts.findIndex((contextRoomId) => contextRoomId === parentContextRoomId) + 1)];
+
         if (selectedChildContextRoomId) newActiveContexts.push(selectedChildContextRoomId);
         onChange(newActiveContexts, undefined);
     }, [activeContexts, onChange]);
@@ -144,6 +152,7 @@ const ContextMultiLevelSelect = ({ activeContexts, onChange, showTopics, sortAlp
                     sortAlphabetically={sortAlphabetically}
                     templatePlaceholderMapping={templatePlaceholderMapping}
                     templatePrefixFilter={templatePrefixFilter}
+                    setSelectedContextName={setSelectedContextName}
                 />
             )) }
         </>

components/UI/ErrorMessage.js

@@ -3,7 +3,6 @@ import styled from 'styled-components';
 const ErrorMessage = styled.p`
   position: relative;
   padding-left: calc(1.4 * var(--margin));
-  margin-top: calc(-0.5 * var(--margin));
   margin-bottom: var(--margin);
   font-size: 85%;
 

components/UI/InviteUsersToMatrixRoom/index.js

@@ -18,7 +18,7 @@ import { useTranslation } from 'react-i18next';
 import { debounce } from 'lodash';
 import { logger } from 'matrix-js-sdk/lib/logger';
 import styled from 'styled-components';
-import { CloseIcon } from 'next/dist/client/components/react-dev-overlay/internal/icons/CloseIcon';
+import { CloseIcon } from '@remixicons/react/line';
 
 import Form from '../Form';
 import { useAuth } from '../../../lib/Auth';
@@ -92,10 +92,12 @@ export default function InviteUserToMatrixRoom({ roomId, onSuccess }) {
                     errors.push(err);
                 });
         }
+
         if (errors.length !== 0) {
             // if something went wrong we display the errors and clear all inputs
             setErrorFeedback(errors.map(err => <ErrorMessage key={err.data?.error}>{ err.data?.error }</ErrorMessage>));
         }
+
         const successAmount = selectedUsers.length - errors.length;
 
         // if everything is okay, we let the user know and exit the modal view.

components/UI/LoadingSpinnerInline.js

@@ -6,6 +6,8 @@ const LoadingSpinnerInline = styled(LoadingSpinner)`
   display: inline-block;
   width: calc(var(--margin) * 1.4);
   height: calc(var(--margin) * 1.4);
+  margin: 0 calc(var(--margin) * 0.5);
+  vertical-align: middle;
 `;
 
 export default LoadingSpinnerInline;

components/UI/PreviousNextButtons.js

@@ -0,0 +1,62 @@
+import styled from 'styled-components';
+import { useTranslation } from 'react-i18next';
+
+const PreviousNextButtonsWrapper = styled.div`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: var(--margin);
+
+  &:not(:first-child) {
+    margin-top: var(--margin);
+  }
+`;
+
+const NextButton = styled.button`
+  color: var(--color-background);
+  background-color: ${props => props.warning ? 'var(--color-notification)' :'var(--color-foreground)'};
+  border-color: ${props => props.warning && 'var(--color-notification)'};
+
+  &:disabled {
+    color: var(--color-background);
+    background-color: var(--color-disabled);
+  }
+`;
+
+const PreviousButton = styled.button`
+  color: var(--color-foreground);
+  background-color: var(--color-background);
+
+  &:disabled {
+    color: var(--color-disabled);
+    background-color: var(--color-background);
+  }
+`;
+
+/**
+ * React Component which returns
+ *
+ * @param {Boolean} disabled disables both buttons if true
+ * @param {function} onClick onClick function to execute when clicking 'next'
+ * @param {function} onCancel function to execute when clicking 'previous'
+ * @param {Boolean} disableNext disables 'next' button if true
+ * @param {Boolean} disablePrev disables 'previous' button if true
+ * @returns {React.JSX} two inline buttons.  'previous' and 'next'
+ */
+const PreviousNextButtons = ({ children, disabled, onCancel, disableNext, disablePrev, warning }) => {
+    const { t } = useTranslation();
+
+    const handlePrevious = (e) => {
+        //@TODO check type submit thing
+        e.preventDefault();
+        onCancel();
+    };
+
+    return (
+        <PreviousNextButtonsWrapper>
+            <PreviousButton type="button" disabled={disabled || disablePrev} onClick={handlePrevious}>{ t('Previous') }</PreviousButton>
+            <NextButton type="submit" disabled={disabled || disableNext} warning={warning}> { children || t('Next') }</NextButton>
+        </PreviousNextButtonsWrapper>
+    );
+};
+
+export default PreviousNextButtons;