Browse Source

Add sitewide sticky posts using the most recent sticky post from main and announcements communities

main
GreatBearShark 2 years ago
parent
commit
a509aef613
  1. 1
      package.json
  2. 15
      src/components/icon.tsx
  3. 106
      src/components/main.tsx
  4. 1
      src/interfaces.ts
  5. 5
      src/utils.ts
  6. 9
      yarn.lock

1
package.json

@ -19,6 +19,7 @@
"@pika/react-dom": "^16.13.1",
"@reach/combobox": "^0.10.5",
"@reach/dialog": "^0.11.2",
"@reach/disclosure": "^0.11.2",
"@reach/menu-button": "^0.10.5",
"@reach/portal": "^0.11.2",
"@reach/tabs": "^0.11.2",

15
src/components/icon.tsx

@ -219,6 +219,21 @@ const icons = {
/>
</svg>
),
chevronDown: (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M19 9l-7 7-7-7"
/>
</svg>
),
};
interface IconProps {

106
src/components/main.tsx

@ -36,6 +36,13 @@ import { ListingTypeSelect } from './listing-type-select';
import { DataTypeSelect } from './data-type-select';
import { SiteForm } from './site-form';
import { UserListing } from './user-listing';
import { alpha } from '@theme-ui/color';
import {
Disclosure,
DisclosureButton,
DisclosurePanel,
} from '@reach/disclosure';
import { CommunityLink } from './community-link';
import {
wsJsonToRes,
@ -58,6 +65,7 @@ import {
isPostChanged,
api,
fetcher,
toQueryString,
} from '../utils';
import { BASE_PATH } from '../isProduction';
import { i18n } from '../i18next';
@ -907,6 +915,28 @@ class Main extends Component<MainProps & RouteComponentProps, MainState> {
}
}
const CustomDisclosureButton = props => {
console.log({ props });
const [open, setOpen] = useState(true);
return (
<Button
variant="borderless"
onClick={() => setOpen(prev => !prev)}
as={DisclosureButton}
css={{ width: '100%', textAlign: 'right' }}
// css={{ position: 'absolute', top: 0, right: 0 }}
>
<Icon
name="chevronDown"
style={{
transition: 'all 280ms ease',
transform: `rotate(${open ? 180 : 0}deg)`,
}}
/>
</Button>
);
};
function DataWrapper({
page,
sort,
@ -926,16 +956,90 @@ function DataWrapper({
params.append('auth', UserService.Instance.auth);
}
const latestMegathreadParams = toQueryString({
page: 1,
limit: 1,
sort: SortType[SortType.New],
type_: ListingType[ListingType.Community],
community_name: 'main',
auth: UserService.Instance.auth,
});
const { data, error } = useSWR(`post/list?${params.toString()}`, fetcher);
const { data: latestMegathread } = useSWR(
`post/list?${latestMegathreadParams}`,
fetcher,
{
revalidateOnFocus: false,
}
);
const latestAnnouncementParams = toQueryString({
page: 1,
limit: 1,
sort: SortType[SortType.New],
type_: ListingType[ListingType.Community],
community_name: 'announcements',
auth: UserService.Instance.auth,
});
const { data: latestAnnouncement } = useSWR(
`post/list?${latestAnnouncementParams}`,
fetcher,
{
revalidateOnFocus: false,
}
);
if (!data) {
return <SpinnerSection />;
}
const posts: Post[] = data.posts;
return (
<>
<Box
sx={{
// backgroundColor: alpha('text', 0.1),
width: 'calc(100% + 15px)',
position: 'relative',
borderRadius: '0.25rem',
}}
bg="muted"
>
{!latestMegathread || !latestAnnouncement ? (
<SpinnerSection />
) : (
<Disclosure>
<CustomDisclosureButton />
<DisclosurePanel>
<PostListings
{...props}
posts={[
latestMegathread?.posts?.[0],
latestAnnouncement?.posts?.[0],
]}
sort={SortType.New}
/>
</DisclosurePanel>
</Disclosure>
)}
</Box>
{/* @ts-ignore */}
<PostListings posts={data.posts} sort={sort} {...props} />
<PostListings
// filter out sticky posts from main and announcements otherwise they show up twice
posts={posts.filter(
post =>
!post.stickied &&
(post.community_name === 'main' ||
post.community_name === 'announcements')
)}
sort={sort}
{...props}
/>
<Box my={4}>
{page > 1 && (
<Button mr={1} variant="muted" onClick={prevPage}>

1
src/interfaces.ts

@ -868,6 +868,7 @@ export interface GetPostsForm {
page?: number;
limit?: number;
community_id?: number;
community_name?: string;
auth?: string;
}

5
src/utils.ts

@ -1190,3 +1190,8 @@ export const api = axios.create({
});
export const fetcher = url => api.get(url).then(res => res.data);
export function toQueryString(options: Record<string, any>): string {
const params = new URLSearchParams(options);
return params.toString();
}

9
yarn.lock

@ -1796,6 +1796,15 @@
react-remove-scroll "^2.3.0"
tslib "^2.0.0"
"@reach/[email protected]^0.11.2":
version "0.11.2"
resolved "https://registry.yarnpkg.com/@reach/disclosure/-/disclosure-0.11.2.tgz#d572dfe22166646044a5e66d6b495f8eb081ed82"
integrity sha512-wCNBiWOVPbhyfUEQo0ixP5nTsXhQKhtfSpNCo/eZXQ+34R4tRqVfnTqf1qVHPdz0rpwW9Td5wgXyqLrpn8SGhw==
dependencies:
"@reach/auto-id" "0.11.2"
"@reach/utils" "0.11.2"
tslib "^2.0.0"
"@reach/[email protected]^0.10.5":
version "0.10.5"
resolved "https://registry.yarnpkg.com/@reach/menu-button/-/menu-button-0.10.5.tgz#b023044fa199bc256572830740049a50fea1d690"

Loading…
Cancel
Save