For review

sublinks · Jan 4, 2024 · dc173ef · dc173ef
1 parent 9c99ca0
commit dc173ef
Show file tree

Hide file tree

Showing 5 changed files with 163 additions and 65 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -21,7 +21,6 @@
     "import/prefer-default-export": "off",
     "react/jsx-filename-extension": [1, { "extensions": [".tsx", ".jsx"] }],
     "react/function-component-definition": [2, { "namedComponents": "arrow-function" }],
-    "react/require-default-props": [2, { "functions": "ignore" }],
-    "react/jsx-props-no-spreading": "off"
+    "react/require-default-props": [2, { "functions": "ignore" }]
   }
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,50 +1,22 @@
-'use client';
+import React from 'react';
 
-import React, { useEffect, useState } from 'react';
-
-import PostFeed from '@/components/post-feed';
 import sublinksClient from '@/utils/client';
 
-import {
-  GetPostsResponse, ListingType, SortType
-} from 'sublinks-js-client';
-import PostFeedOptions from '@/components/post-feed-sort';
+import { GetPostsResponse } from 'sublinks-js-client';
+import Feed from '@/components/front-page-feed';
 import * as testData from '../../test-data.json';
 
-const Feed = () => {
+const page = async () => {
   // @todo: Allow test data when in non-docker dev env
   // as Sublinks Core doesn't yet handle all post features
-  const [postFeed, setPostFeed] = useState<GetPostsResponse>(
-    testData as unknown as GetPostsResponse
-  );
-
-  // @todo: Set this to the users default feed type
-  const [postFeedType, setPostFeedType] = useState<ListingType>();
-  const [postFeedSort, setPostFeedSort] = useState<SortType>();
-
-  useEffect(() => {
-    async function getPosts() {
-      setPostFeed(process.env.SUBLINKS_API_BASE_URL ? await sublinksClient().getPosts({
-        type_: postFeedType,
-        sort: postFeedSort
-      }) : testData as unknown as GetPostsResponse);
-    }
-    getPosts();
-  }, [postFeedSort, postFeedType]);
+  const posts = process.env.SUBLINKS_API_BASE_URL ? await sublinksClient().getPosts()
+    : testData as unknown as GetPostsResponse;
 
   return (
     <div>
-      <div className="mb-16 ml-4">
-        <PostFeedOptions
-          currentType={postFeedType}
-          onSortChange={setPostFeedSort}
-          onTypeChange={setPostFeedType}
-          currentSort={postFeedSort}
-        />
-      </div>
-      <PostFeed data={postFeed.posts} />
+      <Feed posts={posts} />
     </div>
   );
 };
 
-export default Feed;
+export default page;
diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx
@@ -3,19 +3,31 @@ import cx from 'classnames';
 
 interface ButtonProps {
   children: React.ReactNode;
-  type: 'button' | 'submit' | 'reset';
+  type: 'button' | 'submit' | 'reset' | undefined;
   id?: string;
   ariaLabel?: string;
+  active?: boolean;
   className?: string;
   onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
 const Button = ({
-  ariaLabel, children, className, id, type, onClick
+  ariaLabel, children, className, id, type, active, onClick
 }: ButtonProps) => (
   // Rule doesn't like type being a variable even though types force it to be a valid option
-  // eslint-disable-next-line react/button-has-type
-  <button type={type} aria-label={ariaLabel} id={id} onClick={onClick} className={cx('bg-brand dark:bg-brand-dark hover:bg-opacity-90 rounded-md px-23 py-12', className)}>{children}</button>
+  <button
+    // eslint-disable-next-line react/button-has-type
+    type={type}
+    aria-label={ariaLabel}
+    id={id}
+    onClick={onClick}
+    className={cx('bg-brand dark:bg-brand-dark hover:bg-opacity-90 rounded-md px-23 py-12', {
+      'bg-blue-300 dark:bg-blue-500': active,
+      'bg-gray-200 dark:bg-gray-400': !active
+    }, className)}
+  >
+    {children}
+  </button>
 );
 
 export default Button;
diff --git a/src/components/front-page-feed/index.tsx b/src/components/front-page-feed/index.tsx
@@ -0,0 +1,52 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+
+import PostFeed from '@/components/post-feed';
+import sublinksClient from '@/utils/client';
+
+import {
+  GetPostsResponse, ListingType, SortType
+} from 'sublinks-js-client';
+import PostFeedOptions from '@/components/post-feed-sort';
+import * as testData from '../../../test-data.json';
+
+interface FeedProps {
+  posts: GetPostsResponse
+}
+
+const Feed = ({ posts }: FeedProps) => {
+  // @todo: Allow test data when in non-docker dev env
+  // as Sublinks Core doesn't yet handle all post features
+  const [postFeed, setPostFeed] = useState<GetPostsResponse>(posts);
+
+  // @todo: Set this to the users default feed type
+  const [postFeedType, setPostFeedType] = useState<ListingType>();
+  const [postFeedSort, setPostFeedSort] = useState<SortType>();
+
+  useEffect(() => {
+    async function getPosts() {
+      setPostFeed(process.env.SUBLINKS_API_BASE_URL ? await sublinksClient().getPosts({
+        type_: postFeedType,
+        sort: postFeedSort
+      }) : testData as unknown as GetPostsResponse);
+    }
+    getPosts();
+  }, [postFeedSort, postFeedType]);
+
+  return (
+    <div>
+      <div className="mb-16 ml-4">
+        <PostFeedOptions
+          currentType={postFeedType}
+          onSortChange={setPostFeedSort}
+          onTypeChange={setPostFeedType}
+          currentSort={postFeedSort}
+        />
+      </div>
+      <PostFeed data={postFeed?.posts || []} />
+    </div>
+  );
+};
+
+export default Feed;
diff --git a/src/components/post-feed-sort/index.tsx b/src/components/post-feed-sort/index.tsx
@@ -15,39 +15,102 @@ const buttonGroupClass = 'px-12 py-4';
 
 const PostFeedType = ({ currentType, onTypeChange }: PostFeedTypeProps) => (
   <ButtonGroup>
-    <Button id="post-feed-type-all" type="button" onClick={() => onTypeChange('All')} className={`${currentType === 'All' ? 'bg-blue-300 dark:bg-blue-500' : 'bg-gray-200 dark:bg-gray-400'} ${buttonGroupClass}`}>All</Button>
-    <Button id="post-feed-type-local" type="button" onClick={() => onTypeChange('Local')} className={`${currentType === 'Local' ? 'bg-blue-300 dark:bg-blue-500' : 'bg-gray-200 dark:bg-gray-400'} ${buttonGroupClass}`}>Local</Button>
-    <Button id="post-feed-type-modview" type="button" onClick={() => onTypeChange('ModeratorView')} className={`${currentType === 'ModeratorView' ? 'bg-blue-300 dark:bg-blue-500' : 'bg-gray-200 dark:bg-gray-400'} ${buttonGroupClass}`}>Moderator View</Button>
-    <Button id="post-feed-type-subscribed" type="button" onClick={() => onTypeChange('Subscribed')} className={`${currentType === 'Subscribed' ? 'bg-blue-300 dark:bg-blue-500' : 'bg-gray-200 dark:bg-gray-400'} ${buttonGroupClass}`}>Subscribed</Button>
+    <Button id="post-feed-type-all" type="button" active={currentType === 'All'} onClick={() => onTypeChange('All')} className={buttonGroupClass}>All</Button>
+    <Button id="post-feed-type-local" type="button" active={currentType === 'Local'} onClick={() => onTypeChange('Local')} className={buttonGroupClass}>Local</Button>
+    <Button id="post-feed-type-modview" type="button" active={currentType === 'ModeratorView'} onClick={() => onTypeChange('ModeratorView')} className={buttonGroupClass}>Moderator View</Button>
+    <Button id="post-feed-type-subscribed" type="button" active={currentType === 'Subscribed'} onClick={() => onTypeChange('Subscribed')} className={buttonGroupClass}>Subscribed</Button>
   </ButtonGroup>
 );
 
+const sortOptions: { label: string, value: string }[] = [
+  {
+    label: 'Active',
+    value: 'Active'
+  },
+  {
+    label: 'Hot',
+    value: 'Hot'
+  },
+  {
+    label: 'New',
+    value: 'New'
+  },
+  {
+    label: 'Old',
+    value: 'Old'
+  },
+  {
+    label: 'Top Hour',
+    value: 'TopHour'
+  },
+  {
+    label: 'Top Six Hour',
+    value: 'TopSixHour'
+  },
+  {
+    label: 'Top Twelve Hour',
+    value: 'TopTwelveHour'
+  },
+  {
+    label: 'Top Day',
+    value: 'TopDay'
+  },
+  {
+    label: 'Top Week',
+    value: 'TopWeek'
+  },
+  {
+    label: 'Top Month',
+    value: 'TopMonth'
+  },
+  {
+    label: 'Top Three Months',
+    value: 'TopThreeMonths'
+  },
+  {
+    label: 'Top Six Months',
+    value: 'TopSixMonths'
+  },
+  {
+    label: 'Top Nine Months',
+    value: 'TopNineMonths'
+  },
+  {
+    label: 'Top Year',
+    value: 'TopYear'
+  },
+  {
+    label: 'Top All',
+    value: 'TopAll'
+  },
+  {
+    label: 'Most Comments',
+    value: 'MostComments'
+  },
+  {
+    label: 'New Comments',
+    value: 'NewComments'
+  },
+  {
+    label: 'Controversial',
+    value: 'Controversial'
+  },
+  {
+    label: 'Scaled',
+    value: 'Scaled'
+  }
+];
+
 interface PostFeedSortProps {
   currentSort?: SortType
   onSortChange: (type: SortType) => void
 }
 
 const PostFeedSort = ({ currentSort, onSortChange: onTypeChange }: PostFeedSortProps) => (
   <Select value={currentSort} aria-label="Sort Select" className="h-full rounded-md bg-gray-200 dark:bg-gray-400 pl-4" onChange={newValue => onTypeChange(newValue.currentTarget.value as SortType)}>
-    <Option value="Active" selected={currentSort === 'Active'}>Active</Option>
-    <Option value="Hot" selected={currentSort === 'Hot'}>Hot</Option>
-    <Option value="New" selected={currentSort === 'New'}>New</Option>
-    <Option value="Old" selected={currentSort === 'Old'}>Old</Option>
-    <Option value="TopHour" selected={currentSort === 'TopHour'}>Top Hour</Option>
-    <Option value="TopSixHour" selected={currentSort === 'TopSixHour'}>Top Six Hour</Option>
-    <Option value="TopTwelveHour" selected={currentSort === 'TopTwelveHour'}>Top Twelve Hour</Option>
-    <Option value="TopDay" selected={currentSort === 'TopDay'}>Top Day</Option>
-    <Option value="TopWeek" selected={currentSort === 'TopWeek'}>Top Week</Option>
-    <Option value="TopMonth" selected={currentSort === 'TopMonth'}>Top Month</Option>
-    <Option value="TopThreeMonths" selected={currentSort === 'TopThreeMonths'}>Top Three Months</Option>
-    <Option value="TopSixMonths" selected={currentSort === 'TopSixMonths'}>Top Six Months</Option>
-    <Option value="TopNineMonths" selected={currentSort === 'TopNineMonths'}>Top Nine Months</Option>
-    <Option value="TopYear" selected={currentSort === 'TopYear'}>Top Year</Option>
-    <Option value="TopAll" selected={currentSort === 'TopAll'}>Top All</Option>
-    <Option value="MostComments" selected={currentSort === 'MostComments'}>Most Comments</Option>
-    <Option value="NewComments" selected={currentSort === 'NewComments'}>New Comments</Option>
-    <Option value="Controversial" selected={currentSort === 'Controversial'}>Controversial</Option>
-    <Option value="Scaled" selected={currentSort === 'Scaled'}>Scaled</Option>
+    {sortOptions.map(({ label, value }) => (
+      <Option key={value} value={value}>{label}</Option>
+    ))}
   </Select>
 );