Fix profile modals (#260)

src/components/Author/AuthorCard/AuthorCard.tsx

@@ -118,10 +118,6 @@ export const AuthorCard = (props: Props) => {
     }
   })
 
-  const handleCloseFollowModals = () => {
-    redirectPage(router, 'author', { slug: props.author.slug })
-  }
-
   if (props.isAuthorPage && props.author.userpic?.includes('assets.discours.io')) {
     setUserpicUrl(props.author.userpic.replace('100x', '500x500'))
   }
@@ -219,7 +215,7 @@ export const AuthorCard = (props: Props) => {
                       {(f) => <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} />}
                     </For>
                     <div class={styles.subscribersCounter}>
-                      {t('SubscriptionWithCount', { count: props.followers.length })}
+                      {t('SubscriberWithCount', { count: props.followers.length })}
                     </div>
                   </a>
                 </Match>
@@ -232,23 +228,35 @@ export const AuthorCard = (props: Props) => {
                 </Match>
               </Switch>
 
-              <Show when={props.following && props.following.length > 0}>
-                <a href="?modal=following" class={styles.subscribers}>
-                  <For each={props.following.slice(0, 3)}>
-                    {(f) => {
-                      if ('name' in f) {
-                        return <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} />
-                      } else if ('title' in f) {
-                        return <Userpic name={f.title} userpic={f.pic} class={styles.userpic} />
-                      }
-                      return null
-                    }}
-                  </For>
-                  <div class={styles.subscribersCounter}>
-                    {t('SubscriberWithCount', { count: props?.following.length ?? 0 })}
-                  </div>
-                </a>
-              </Show>
+              <Switch>
+                <Match when={!props.isCurrentUser && props.following && props.following.length > 0}>
+                  <a href="?modal=following" class={styles.subscribers}>
+                    <For each={props.following.slice(0, 3)}>
+                      {(f) => {
+                        if ('name' in f) {
+                          return <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} />
+                        } else if ('title' in f) {
+                          return <Userpic name={f.title} userpic={f.pic} class={styles.userpic} />
+                        }
+                        return null
+                      }}
+                    </For>
+                    <div class={styles.subscribersCounter}>
+                      {t('SubscriptionWithCount', { count: props?.following.length ?? 0 })}
+                    </div>
+                  </a>
+                </Match>
+                <Match when={props.isCurrentUser && props.following && props.following.length > 0}>
+                  <SharePopup
+                    containerCssClass={stylesHeader.control}
+                    title={props.author.name}
+                    description={props.author.bio}
+                    imageUrl={props.author.userpic}
+                    shareUrl={getShareUrl({ pathname: `/author/${props.author.slug}` })}
+                    trigger={<Button variant="secondary" value={t('Share')} />}
+                  />
+                </Match>
+              </Switch>
             </div>
           </Show>
         </div>
@@ -357,7 +365,7 @@ export const AuthorCard = (props: Props) => {
           </Show>
         </ShowOnlyOnClient>
         <Show when={props.followers}>
-          <Modal variant="medium" name="followers" onClose={handleCloseFollowModals} maxHeight>
+          <Modal variant="medium" name="followers" maxHeight>
             <>
               <h2>{t('Followers')}</h2>
               <div class={styles.listWrapper}>
@@ -372,22 +380,8 @@ export const AuthorCard = (props: Props) => {
             </>
           </Modal>
         </Show>
-
-        <Show when={props.isCurrentUser}>
-          <div class={styles.subscribersContainer}>
-            <SharePopup
-              containerCssClass={stylesHeader.control}
-              title={props.author.name}
-              description={props.author.bio}
-              imageUrl={props.author.userpic}
-              shareUrl={getShareUrl({ pathname: `/author/${props.author.slug}` })}
-              trigger={<Button variant="secondary" value={t('Share')} />}
-            />
-          </div>
-        </Show>
-
         <Show when={props.following}>
-          <Modal variant="medium" name="following" onClose={handleCloseFollowModals} maxHeight>
+          <Modal variant="medium" name="following" maxHeight>
             <>
               <h2>{t('Subscriptions')}</h2>
               <ul class="view-switcher">

src/components/Inbox/CreateModalContent.module.scss

@@ -1,6 +1,4 @@
 .CreateModalContent {
-  padding: 24px;
-
   .footer {
     padding-top: 12px;
     display: flex;

src/components/Inbox/DialogCard.tsx

@@ -6,7 +6,6 @@ import formattedTime from '../../utils/formatDateTime'
 import { clsx } from 'clsx'
 import styles from './DialogCard.module.scss'
 import { useLocalize } from '../../context/localize'
-import MD from '../Article/MD'
 
 type DialogProps = {
   online?: boolean
@@ -26,10 +25,11 @@ const DialogCard = (props: DialogProps) => {
     () => props.members && props.members.filter((member) => member.id !== props.ownId)
   )
 
-  const names = createMemo(() =>
-    companions()
-      ?.map((companion) => companion.name)
-      .join(', ')
+  const names = createMemo(
+    () =>
+      companions()
+        ?.map((companion) => companion.name)
+        .join(', ')
   )
 
   return (
@@ -55,7 +55,7 @@ const DialogCard = (props: DialogProps) => {
           <div class={styles.message}>
             <Switch>
               <Match when={props.message && !props.isChatHeader}>
-                <MD body={props.message} />
+                <div innerHTML={props.message} />
               </Match>
               <Match when={props.isChatHeader && companions().length > 1}>{names()}</Match>
             </Switch>

src/components/Inbox/Message.tsx

@@ -45,7 +45,7 @@ export const Message = (props: Props) => {
           <Show when={props.replyBody}>
             <QuotedMessage body={props.replyBody} variant="inline" isOwn={isOwn} />
           </Show>
-          <MD body={props.content.body} />
+          <div innerHTML={props.content.body} />
         </div>
       </div>
       <div class={styles.time}>{formattedTime(props.content.createdAt * 1000)()}</div>

src/components/Inbox/Search.module.scss

@@ -1,4 +1,5 @@
 .Search {
+  flex: 1;
   .field {
     position: relative;
     background: #fff;

src/components/Nav/Modal/Modal.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createMemo, createSignal, Show } from 'solid-js'
+import { createEffect, createMemo, createSignal, on, Show } from 'solid-js'
 import type { JSX } from 'solid-js'
 import { clsx } from 'clsx'
 import { hideModal, useModalStore } from '../../../stores/ui'
@@ -8,6 +8,7 @@ import styles from './Modal.module.scss'
 import { redirectPage } from '@nanostores/router'
 import { router } from '../../../stores/router'
 import { Icon } from '../../_shared/Icon'
+import { resetSortedArticles } from '../../../stores/zine/articles'
 
 interface Props {
   name: string
@@ -38,6 +39,7 @@ export const Modal = (props: Props) => {
   useEscKeyDownHandler(handleHide)
 
   createEffect(() => {
+    console.log('!!! modal:', modal())
     setVisible(modal() === props.name)
   })
 

src/components/Views/Author/Author.tsx

@@ -67,7 +67,6 @@ export const AuthorView = (props: Props) => {
   }
 
   onMount(async () => {
-    hideModal()
     try {
       const userSubscribers = await apiClient.getAuthorFollowers({ slug: props.authorSlug })
       setFollowers(userSubscribers)

src/context/inbox.tsx

@@ -33,7 +33,7 @@ export const InboxProvider = (props: { children: JSX.Element }) => {
       const newChats = await apiClient.getChats({ limit: 50, offset: 0 })
       setChats(newChats)
     } catch (error) {
-      console.log(error)
+      console.log('[loadChats]', error)
     }
   }
 

src/graphql/types.gen.ts

@@ -310,7 +310,7 @@ export type Notification = {
   reaction?: Maybe<Scalars['Int']>
   seen: Scalars['Boolean']
   shout?: Maybe<Scalars['Int']>
-  type?: Maybe<NotificationType>
+  type: NotificationType
 }
 
 export enum NotificationType {