From e0c8dcbe5cffca5e94334367aabbc14c79a3515b Mon Sep 17 00:00:00 2001
From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com>
Date: Mon, 17 Jul 2023 20:14:34 +0300
Subject: [PATCH] Solid Swiper in FullArticle.tsx (#127)

---
 src/components/Article/FullArticle.tsx | 103 +++++++++++++------------
 1 file changed, 52 insertions(+), 51 deletions(-)

diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx
index 5f24ea34..d898bebb 100644
--- a/src/components/Article/FullArticle.tsx
+++ b/src/components/Article/FullArticle.tsx
@@ -24,6 +24,7 @@ import article from '../Editor/extensions/Article'
 import { createEffect, For, createMemo, onMount, Show, createSignal, Switch, Match } from 'solid-js'
 import { MediaItem } from '../../pages/types'
 import { AudioHeader } from './AudioHeader'
+import { SolidSwiper } from '../_shared/SolidSwiper'
 
 interface ArticleProps {
   article: Shout
@@ -105,6 +106,7 @@ export const FullArticle = (props: ArticleProps) => {
     actions: { loadReactionsBy }
   } = useReactions()
 
+  console.log('!!! props.s:', JSON.parse(props.article.media))
   return (
     <>
       <Title>{props.article.title}</Title>
@@ -112,52 +114,58 @@ export const FullArticle = (props: ArticleProps) => {
         <div class="row">
           <article class="col-md-16 col-lg-14 col-xl-12 offset-md-5">
             {/*TODO: Check styles.shoutTopic*/}
-            <Switch>
-              <Match when={props.article.layout !== 'audio'}>
-                <div class={styles.shoutHeader}>
-                  <Show when={mainTopic()}>
-                    <div class={styles.shoutTopic}>
-                      <a
-                        href={getPagePath(router, 'topic', { slug: props.article.mainTopic })}
-                        class={styles.mainTopicLink}
-                      >
-                        {mainTopic().title}
-                      </a>
-                    </div>
-                  </Show>
-
-                  <h1>{props.article.title}</h1>
-                  <Show when={props.article.subtitle}>
-                    <h4>{capitalize(props.article.subtitle, false)}</h4>
-                  </Show>
-
-                  <div class={styles.shoutAuthor}>
-                    <For each={props.article.authors}>
-                      {(a: Author, index) => (
-                        <>
-                          <Show when={index() > 0}>, </Show>
-                          <a href={getPagePath(router, 'author', { slug: a.slug })}>{a.name}</a>
-                        </>
-                      )}
-                    </For>
+            <Show when={props.article.layout !== 'audio'}>
+              <div class={styles.shoutHeader}>
+                <Show when={mainTopic()}>
+                  <div class={styles.shoutTopic}>
+                    <a
+                      href={getPagePath(router, 'topic', { slug: props.article.mainTopic })}
+                      class={styles.mainTopicLink}
+                    >
+                      {mainTopic().title}
+                    </a>
                   </div>
-                  <Show when={props.article.cover && props.article.layout !== 'video'}>
-                    <div
-                      class={styles.shoutCover}
-                      style={{ 'background-image': `url('${imageProxy(props.article.cover)}')` }}
-                    />
-                  </Show>
+                </Show>
+
+                <h1>{props.article.title}</h1>
+                <Show when={props.article.subtitle}>
+                  <h4>{capitalize(props.article.subtitle, false)}</h4>
+                </Show>
+
+                <div class={styles.shoutAuthor}>
+                  <For each={props.article.authors}>
+                    {(a: Author, index) => (
+                      <>
+                        <Show when={index() > 0}>, </Show>
+                        <a href={getPagePath(router, 'author', { slug: a.slug })}>{a.name}</a>
+                      </>
+                    )}
+                  </For>
                 </div>
-              </Match>
-              <Match when={props.article.layout === 'audio'}>
-                <AudioHeader
-                  title={props.article.title}
-                  cover={props.article.cover}
-                  artistData={media()[0]}
-                  topic={mainTopic()}
-                />
-              </Match>
-            </Switch>
+                <Show when={props.article.cover && props.article.layout !== 'video'}>
+                  <div
+                    class={styles.shoutCover}
+                    style={{ 'background-image': `url('${imageProxy(props.article.cover)}')` }}
+                  />
+                </Show>
+              </div>
+            </Show>
+            <Show when={props.article.layout === 'audio'}>
+              <AudioHeader
+                title={props.article.title}
+                cover={props.article.cover}
+                artistData={media()?.[0]}
+                topic={mainTopic()}
+              />
+              <Show when={media().length > 0}>
+                <div class="media-items">
+                  <AudioPlayer media={media()} articleSlug={props.article.slug} body={body()} />
+                </div>
+              </Show>
+            </Show>
+            <Show when={props.article.layout === 'image'}>
+              <SolidSwiper images={media()} />
+            </Show>
 
             <Show when={media() && props.article.layout === 'video'}>
               <div class="media-items">
@@ -173,13 +181,6 @@ export const FullArticle = (props: ArticleProps) => {
                 </For>
               </div>
             </Show>
-
-            <Show when={media().length > 0 && props.article.layout !== 'image'}>
-              <div class="media-items">
-                <AudioPlayer media={media()} articleSlug={props.article.slug} body={body()} />
-              </div>
-            </Show>
-
             <Show when={body()}>
               <div class={styles.shoutBody}>
                 <Show when={!body().startsWith('<')} fallback={<div innerHTML={body()} />}>