diff --git a/src/assets/symbols.svg b/src/assets/symbols.svg index 0743fe0c67..b8a9d81f68 100644 --- a/src/assets/symbols.svg +++ b/src/assets/symbols.svg @@ -316,6 +316,8 @@ - + + + diff --git a/src/shared/components/common/time-interval-filter.tsx b/src/shared/components/common/time-interval-filter.tsx index 493a323e4e..5ffcf335ee 100644 --- a/src/shared/components/common/time-interval-filter.tsx +++ b/src/shared/components/common/time-interval-filter.tsx @@ -10,22 +10,6 @@ type Interval = { unit: IntervalUnit; }; -type Preset = { key: NoOptionI18nKeys; interval: Interval }; - -const presets: Preset[] = [ - { key: "all_time", interval: { num: undefined, unit: "days" } }, - { key: "one_hour", interval: { num: 1, unit: "hours" } }, - { key: "six_hours", interval: { num: 6, unit: "hours" } }, - { key: "twelve_hours", interval: { num: 12, unit: "hours" } }, - { key: "one_day", interval: { num: 1, unit: "days" } }, - { key: "one_week", interval: { num: 1, unit: "weeks" } }, - { key: "one_month", interval: { num: 1, unit: "months" } }, - { key: "three_months", interval: { num: 3, unit: "months" } }, - { key: "six_months", interval: { num: 6, unit: "months" } }, - { key: "nine_months", interval: { num: 9, unit: "months" } }, - { key: "one_year", interval: { num: 1, unit: "years" } }, -]; - type Props = { currentSeconds: number | undefined; onChange: (seconds: number) => void; @@ -68,18 +52,6 @@ export class TimeIntervalFilter extends Component { className="dropdown-menu dropdown-menu-end" id="time-interval-unit-dropdown" > - {/* Presets first, then the custom ones */} - {presets.map(p => ( -
  • - -
    • - ))} -
  • - {this.props.postOrCommentType === "post" ? ( - <> -
    - handleSortChange(this, val)} - showLabel - /> -
    -
    - handlePostTimeRangeChange(this, val)} - /> + {postOrCommentType === "post" && + myUserInfo && + !this.state.selectButtonsHidden && ( +
    +
    + handleShowHiddenChange(this, hidden)} + /> +
    +
    + handleHideReadChange(this, hideRead)} + /> +
    - - ) : ( -
    - handleCommentSortChange(this, val)} - showLabel - /> -
    - )} - {communityRss && ( -
    - - - - -
    - )} -
    + )} + ); } } @@ -1471,3 +1485,7 @@ function DeadInstanceOrCommunityWarning() { ); } + +function handleHideSelectButtons(i: Community) { + i.setState({ selectButtonsHidden: !i.state.selectButtonsHidden }); +} diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx index 64a0cd0a40..05ed12c6a0 100644 --- a/src/shared/components/home/home.tsx +++ b/src/shared/components/home/home.tsx @@ -26,7 +26,7 @@ import { scrollMixin } from "../mixins/scroll-mixin"; import type { ItemIdAndRes, QueryParams } from "@utils/types"; import { itemLoading, RouteDataResponse } from "@utils/types"; import { NoOptionI18nKeys } from "i18next"; -import { Component, InfernoNode } from "inferno"; +import { Component, FormEvent, InfernoNode } from "inferno"; import { T } from "inferno-i18next-dess"; import { Link } from "inferno-router"; import { @@ -113,7 +113,6 @@ import { IRoutePropsWithFetch } from "@utils/routes"; import { isBrowser } from "@utils/browser"; import { DonationDialog } from "./donation-dialog"; import { nowBoolean } from "@utils/date"; -import { TimeIntervalFilter } from "@components/common/time-interval-filter"; import { BannedDialog } from "./banned-dialog"; import { PostListingModeDropdown } from "@components/common/post-listing-mode-dropdown"; import { MultiCommunityLink } from "@components/multi-community/multi-community-link"; @@ -123,6 +122,7 @@ import { FilterChipCheckbox, } from "@components/common/filter-chip-checkbox"; import { RouterContext } from "inferno-router/dist/Router"; +import { TimeIntervalFilter } from "@components/common/time-interval-filter"; interface HomeState { postsRes: RequestState>; @@ -140,13 +140,14 @@ interface HomeState { isIsomorphic: boolean; markPageAsReadLoading: boolean; postListingMode: PostListingMode; + selectButtonsHidden: boolean; } interface HomeProps { listingType?: ListingType; postOrCommentType: PostOrCommentType; sort: PostSortType | CommentSortType; - postTimeRange: number; + postTimeRange?: number; showHidden?: boolean; showRead?: boolean; cursor?: PaginationCursor; @@ -289,6 +290,7 @@ export class Home extends Component { isIsomorphic: false, markPageAsReadLoading: false, postListingMode: defaultPostListingMode(this.isoData), + selectButtonsHidden: true, }; loadingSettled(): boolean { @@ -680,7 +682,7 @@ export class Home extends Component { listingType, cursor, sort, - postTimeRange: postTimeRange.toString(), + postTimeRange: postTimeRange?.toString(), showHidden: showHidden?.toString(), showRead: showRead?.toString(), }; @@ -871,106 +873,138 @@ export class Home extends Component { const { showSubscribedMobile, showSidebarMobile } = this.state; + const hidePostTimeRange = sort === "new" || sort === "old"; return ( -
    - {/* Only show these two selects on mobile */} - {this.hasFollows && ( +
    +
    + {/* Only show these two selects on mobile */} + {this.hasFollows && ( +
    + handleShowSubscribedMobile(this, show)} + /> +
    + )}
    handleShowSubscribedMobile(this, show)} + option="show_sidebar" + isChecked={showSidebarMobile} + onCheck={show => handleShowSidebarMobile(this, show)} />
    - )} -
    - handleShowSidebarMobile(this, show)} - /> -
    -
    - handlePostOrCommentTypeChange(this, val)} - /> -
    - {postOrCommentType === "post" && this.isoData.myUserInfo && ( - <> -
    - handleShowHiddenChange(this, hidden)} - /> -
    -
    - handleHideReadChange(this, hideRead)} - /> -
    - - )} - {/** TODO add show read posts also **/} -
    - handleListingTypeChange(this, val)} - /> -
    -
    - handlePostListingModeChange(this, val)} - showLabel - /> -
    - {this.props.postOrCommentType === "post" ? ( - <> + {this.props.postOrCommentType === "post" ? ( + <> +
    + handleSortChange(this, val)} + showLabel + /> +
    + + ) : (
    - handleSortChange(this, val)} + handleCommentSortChange(this, val)} showLabel />
    -
    - handlePostTimeRangeChange(this, seconds)} - /> -
    - - ) : ( + )} + {/** TODO add show read posts also **/}
    - handleCommentSortChange(this, val)} + handleListingTypeChange(this, val)} />
    - )} -
    - {getRss( - listingType ?? - this.state.siteRes.site_view.local_site.default_post_listing_type, - sort, +
    + handlePostListingModeChange(this, val)} + showLabel + /> +
    +
    + handlePostOrCommentTypeChange(this, val)} + /> +
    +
    + {getRss( + listingType ?? + this.state.siteRes.site_view.local_site + .default_post_listing_type, + sort, + )} +
    + + {!hidePostTimeRange && ( + )}
    + {postOrCommentType === "post" && + this.isoData.myUserInfo && + !this.state.selectButtonsHidden && ( +
    +
    + handleShowHiddenChange(this, hidden)} + /> +
    +
    + handleHideReadChange(this, hideRead)} + /> +
    +
    + handlePostTimeRangeChange2(this, val)} + /> +
    +
    + )} + {!hidePostTimeRange && ( + x.seconds === postTimeRange) + ?.step ?? POST_TIME_RANGE_STEPS.length - 1 + } + onInput={e => handlePostTimeRangeChange(this, e)} + /> + )}
    ); } @@ -1137,10 +1171,42 @@ function handleSortChange(i: Home, val: PostSortType) { i.updateUrl({ sort: val, cursor: undefined }); } -function handlePostTimeRangeChange(i: Home, val: number) { +const HOUR = 60 * 60; +const DAY = 24 * HOUR; +const MONTH = 30 * DAY; + +const POST_TIME_RANGE_STEPS = [ + { step: 0, label: "1 Hour", seconds: HOUR }, + { step: 1, label: "6 Hours", seconds: 6 * HOUR }, + { step: 2, label: "12 Hours", seconds: 12 * HOUR }, + { step: 3, label: "1 Day", seconds: DAY }, + { step: 4, label: "1 Week", seconds: 7 * DAY }, + { step: 5, label: "1 Month", seconds: MONTH }, + { step: 6, label: "3 Months", seconds: 3 * MONTH }, + { step: 7, label: "6 Months", seconds: 6 * MONTH }, + { step: 8, label: "1 Year", seconds: 365 * DAY }, + { step: 9, label: "All", seconds: undefined }, +]; + +function handlePostTimeRangeChange( + i: Home, + event: FormEvent, +) { + event.preventDefault(); + const postTimeRange = POST_TIME_RANGE_STEPS.find( + x => x.step === Number(event.target.value), + )?.seconds; + i.updateUrl({ postTimeRange, cursor: undefined }); +} + +function handlePostTimeRangeChange2(i: Home, val: number) { i.updateUrl({ postTimeRange: val, cursor: undefined }); } +function postTimeRangeValue(value?: number): string { + return POST_TIME_RANGE_STEPS.find(x => x.seconds === value)?.label ?? "All"; +} + function handleCommentSortChange(i: Home, val: CommentSortType) { i.updateUrl({ sort: val, cursor: undefined }); } @@ -1494,3 +1560,7 @@ async function handleHideDonationDialog(myUserInfo?: MyUserInfo) { } } } + +function handleHideSelectButtons(i: Home) { + i.setState({ selectButtonsHidden: !i.state.selectButtonsHidden }); +}