/explore

.gitignore

@@ -34,4 +34,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,15 +34,18 @@ 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:
@@ -70,7 +76,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) {
@@ -89,7 +95,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]) => (
@@ -112,12 +118,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]);
@@ -141,6 +149,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/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;

components/UI/ServiceIframeHeader.js

@@ -0,0 +1,55 @@
+import styled from 'styled-components';
+import { useTranslation } from 'react-i18next';
+
+import IframeLayout from '../../components/layouts/iframe';
+import BinIcon from '../../assets/icons/bin.svg';
+import CopyToClipboard from '../../components/UI/CopyToClipboard';
+import LoadingSpinnerInline from '../../components/UI/LoadingSpinnerInline';
+import FolderIcon from '../../assets/icons/folder.svg';
+import ListSettingsIcon from '../../assets/icons/list-settings.svg';
+import InviteUsersToMatrixRoom from './InviteUsersToMatrixRoom';
+
+const ToggleButton = styled.button`
+  /* unset globally defined button styles; set height to line-height */
+  width: unset;
+  height: calc(var(--margin) * 1.3);
+  padding: unset;
+  background-color: unset;
+  border: unset;
+`;
+
+const ServiceIframeHeader = ({ isDeletingPad, deleteContent, title, roomId, mypadsPadObject, content, myPowerLevel, setManageContextActionToggle, manageContextActionToggle }) => {
+    const { t } = useTranslation('write');
+
+    return (
+        <IframeLayout.IframeHeader>
+            <h2>{ title }</h2>
+            <IframeLayout.IframeHeaderButtonWrapper>
+                <CopyToClipboard content={content} />
+                { deleteContent && <button title={t(mypadsPadObject ? 'Delete pad' : 'Remove pad from my library')} onClick={deleteContent}>
+                    { isDeletingPad ? <LoadingSpinnerInline /> : <BinIcon fill="var(--color-foreground)" /> }
+                </button> }
+                <InviteUsersToMatrixRoom roomId={roomId} name={title} />
+                { myPowerLevel && (
+                    manageContextActionToggle ? (
+                        <ToggleButton onClick={() => { setManageContextActionToggle(false); }}>
+                            <FolderIcon
+                                title={t('Browse the selected context')}
+                                fill="var(--color-foreground)"
+                            />
+                        </ToggleButton>
+                    ) : (
+                        <ToggleButton onClick={() => { setManageContextActionToggle(true); }}>
+                            <ListSettingsIcon
+                                title={t('Manage the selected context')}
+                                fill="var(--color-foreground)"
+                            />
+                        </ToggleButton>
+
+                    )
+                ) }
+            </IframeLayout.IframeHeaderButtonWrapper>
+        </IframeLayout.IframeHeader>
+    );
+};
+export default ServiceIframeHeader;

components/UI/ServiceLink.js

@@ -11,13 +11,13 @@ const LockIconResized = styled(LockIcon)`
   transform: scale(0.9);
 `;
 
-const ServiceLink = forwardRef(({ name, href, selected, passwordProtected }, ref) => {
+const ServiceLink = forwardRef(({ roomId, name, selected, path, passwordProtected }, ref) => {
     const { t } = useTranslation();
 
     return (
         <ServiceTable.Row>
             <ServiceTable.Cell selected={selected}>
-                <Link ref={ref} href={href}>{ name }</Link>
+                <Link ref={ref} disabled href={`/${path}/${roomId}`}>{ name }</Link>
             </ServiceTable.Cell>
             { /* Show a lock icon if this Link is password protected */ }
             { passwordProtected && (