Add community/public switch view in feed (#351)

public/locales/en/translation.json

@@ -295,6 +295,7 @@
   "PublicationsWithCount": "{count, plural, =0 {no publications} one {{count} publication} other {{count} publications}}",
   "Publish Album": "Publish Album",
   "Publish Settings": "Publish Settings",
+  "Published": "Published",
   "Punchline": "Punchline",
   "Quit": "Quit",
   "Quote": "Quote",

public/locales/ru/translation.json

@@ -311,6 +311,7 @@
   "Publish": "Опубликовать",
   "Publish Album": "Опубликовать альбом",
   "Publish Settings": "Настройки публикации",
+  "Published": "Опубликованные",
   "Punchline": "Панчлайн",
   "Quit": "Выйти",
   "Quote": "Цитата",

src/components/Nav/Header/Header.tsx

@@ -63,7 +63,6 @@ export const Header = (props: Props) => {
   const [isFeedVisible, setIsFeedVisible] = createSignal(false)
   const toggleFixed = () => {
     setFixed(!fixed())
-    console.log('!!! toggleFixed:')
   }
 
   const tag = (topic: Topic) =>
@@ -141,9 +140,6 @@ export const Header = (props: Props) => {
     clearTimeout(timer)
   }
 
-  createEffect(() => {
-    console.log('!!! mo:', modal())
-  })
   const hideSubnavigation = (event, time = 500) => {
     timer = setTimeout(() => {
       toggleSubnavigation(false)

src/components/Views/Feed/Feed.module.scss

@@ -1,6 +1,6 @@
 .feedFilter {
   @include media-breakpoint-down(md) {
-    margin-right: 4rem !important;
+    margin-right: 1rem !important;
   }
 }
 
@@ -195,15 +195,29 @@
   justify-content: space-between;
   align-items: center;
   margin-bottom: 4rem;
+  @include media-breakpoint-down(sm) {
+    flex-direction: column-reverse;
+    align-items: flex-start;
+    gap: 1rem;
+  }
 
   .feedFilter {
     margin-top: 0;
     margin-bottom: 0;
+    min-width: 300px;
 
     & > li {
       margin-bottom: 0;
     }
   }
+
+  .dropdowns {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    gap: 1rem;
+    justify-content: center;
+  }
 }
 
 .periodSwitcher {

src/components/Views/Feed/Feed.tsx

@@ -31,15 +31,22 @@ export const FEED_PAGE_SIZE = 20
 const UNRATED_ARTICLES_COUNT = 5
 
 type FeedPeriod = 'week' | 'month' | 'year'
+type VisibilityMode = 'all' | 'community' | 'public'
 
 type PeriodItem = {
   value: FeedPeriod
   title: string
 }
 
+type VisibilityItem = {
+  value: VisibilityMode
+  title: string
+}
+
 type FeedSearchParams = {
   by: 'publish_date' | 'rating' | 'last_comment'
   period: FeedPeriod
+  visibility: VisibilityMode
 }
 
 const getOrderBy = (by: FeedSearchParams['by']) => {
@@ -80,6 +87,7 @@ export const Feed = (props: Props) => {
   const { t } = useLocalize()
 
   const monthPeriod: PeriodItem = { value: 'month', title: t('This month') }
+  const visibilityAll = { value: 'public', title: t('All') }
 
   const periods: PeriodItem[] = [
     { value: 'week', title: t('This week') },
@@ -87,6 +95,11 @@ export const Feed = (props: Props) => {
     { value: 'year', title: t('This year') },
   ]
 
+  const visibilities: VisibilityItem[] = [
+    { value: 'community', title: t('All') },
+    { value: 'public', title: t('Published') },
+  ]
+
   const { page, searchParams, changeSearchParams } = useRouter<FeedSearchParams>()
   const [isLoading, setIsLoading] = createSignal(false)
   const [isRightColumnLoaded, setIsRightColumnLoaded] = createSignal(false)
@@ -100,14 +113,20 @@ export const Feed = (props: Props) => {
 
   const currentPeriod = createMemo(() => {
     const period = periods.find((p) => p.value === searchParams().period)
-
     if (!period) {
       return monthPeriod
     }
-
     return period
   })
 
+  const currentVisibility = createMemo(() => {
+    const visibility = visibilities.find((v) => v.value === searchParams().visibility)
+    if (!visibility) {
+      return visibilityAll
+    }
+    return visibility
+  })
+
   const {
     actions: { loadReactionsBy },
   } = useReactions()
@@ -130,7 +149,7 @@ export const Feed = (props: Props) => {
 
   createEffect(
     on(
-      () => page().route + searchParams().by + searchParams().period,
+      () => page().route + searchParams().by + searchParams().period + searchParams().visibility,
       () => {
         resetSortedArticles()
         loadMore()
@@ -146,17 +165,20 @@ export const Feed = (props: Props) => {
     }
 
     const orderBy = getOrderBy(searchParams().by)
-
     if (orderBy) {
       options.order_by = orderBy
     }
 
+    const visibilityMode = searchParams().visibility
+    if (visibilityMode && visibilityMode !== 'all') {
+      options.filters = { ...options.filters, visibility: visibilityMode }
+    }
+
     if (searchParams().by && searchParams().by !== 'publish_date') {
       const period = searchParams().period || 'month'
       const fromDate = getFromDate(period)
-      options.filters = { fromDate: getServerDate(fromDate) }
+      options.filters = { ...options.filters, fromDate: getServerDate(fromDate) }
     }
-
     return props.loadShouts(options)
   }
 
@@ -231,16 +253,24 @@ export const Feed = (props: Props) => {
                 </span>
               </li>
             </ul>
-            <Show when={searchParams().by && searchParams().by !== 'publish_date'}>
+            <div class={styles.dropdowns}>
-              <div>
+              <Show when={searchParams().by && searchParams().by !== 'publish_date'}>
                 <DropDown
                   options={periods}
                   currentOption={currentPeriod()}
                   triggerCssClass={styles.periodSwitcher}
-                  onChange={(period) => changeSearchParams({ period: period.value })}
+                  onChange={(period: PeriodItem) => changeSearchParams({ period: period.value })}
                 />
-              </div>
+              </Show>
-            </Show>
+              <DropDown
+                options={visibilities}
+                currentOption={currentVisibility()}
+                triggerCssClass={styles.periodSwitcher}
+                onChange={(visibility: VisibilityItem) =>
+                  changeSearchParams({ visibility: visibility.value })
+                }
+              />
+            </div>
           </div>
 
           <Show when={!isLoading()} fallback={<Loading />}>

src/components/_shared/DropDown/DropDown.module.scss

@@ -1,3 +1,6 @@
+.trigger {
+  white-space: nowrap;
+}
 .chevron {
   vertical-align: top;
 

src/components/_shared/DropDown/DropDown.tsx

@@ -43,7 +43,7 @@ export const DropDown = <TOption extends Option = Option>(props: Props<TOption>)
     <Show when={props.currentOption} keyed={true}>
       <Popup
         trigger={
-          <div class={props.triggerCssClass}>
+          <div class={clsx(styles.trigger, props.triggerCssClass)}>
             {props.currentOption.title}{' '}
             <Chevron
               class={clsx(styles.chevron, {