feat(story): Story view (not finished)

Author: arthur-arslanov

.gitignore

@@ -1 +1,2 @@
-.idea
+.idea
+etc

app/.eslintrc.js

@@ -21,6 +21,7 @@ module.exports = {
 
     '@typescript-eslint/default-param-last': 0,
     'import/prefer-default-export': 0,
+    'react/no-danger': 0,
     'no-param-reassign': 0,
     'no-return-assign': 0,
     'no-plusplus': 0,

app/src/App.tsx

@@ -6,7 +6,8 @@ import {
   Navigate,
 } from 'react-router-dom';
 
-import StoriesList from 'pages/stories/List';
+import StoriesList from 'pages/stories';
+import Story from 'pages/story';
 
 import 'assets/styles/main.scss';
 
@@ -15,6 +16,7 @@ const App = () => (
     <Routes>
       <Route path="/" element={<Navigate to="/stories/top" />} />
       <Route path="/stories/:type" element={<StoriesList />} />
+      <Route path="/story/:id" element={<Story />} />
     </Routes>
   </Router>
 );

app/src/components/common/card/comment/list-item/CommentItemCard.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { CommentInterface } from 'types/comment';
+
+import { Wrapper, HeaderRow, Author, Content, Replies } from './styles';
+
+type Props = {
+  comment: CommentInterface;
+  storyId: number;
+};
+
+const CommentItemCard: React.FC<Props> = ({ comment, storyId }) => (
+  <Wrapper>
+    <HeaderRow>
+      <Author>{comment.by}</Author>
+      <div>5 hours ago</div>
+    </HeaderRow>
+    <Content dangerouslySetInnerHTML={{ __html: comment.text ?? '' }} />
+    {comment.kids.length > 0 && comment.parent === storyId && (
+      <Replies>{comment.kids.length} replies collapsed</Replies>
+    )}
+  </Wrapper>
+);
+
+export default CommentItemCard;

app/src/components/common/card/comment/list-item/styles.ts

@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+  font-size: 1.3rem;
+`;
+
+export const HeaderRow = styled.div`
+  display: flex;
+  align-items: center;
+
+  color: #828282;
+`;
+
+export const Author = styled.div`
+  margin-right: 0.5rem;
+
+  text-decoration: underline;
+`;
+
+export const Content = styled.div`
+  margin: 1rem 0;
+`;
+
+export const Replies = styled.div`
+  width: 100%;
+
+  padding: 0.5rem;
+
+  font-size: 1.2rem;
+
+  background-color: #fffbf2;
+  color: #828282;
+
+  border-radius: 0.4rem;
+
+  &:hover {
+    cursor: pointer;
+  }
+`;

app/src/components/common/card/comment/list/CommentListCard.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { CommentsTree } from 'types/comment';
+
+import CommentItemCard from 'components/common/card/comment/list-item/CommentItemCard';
+
+import { Wrapper } from './styles';
+
+type Props = {
+  comments: CommentsTree;
+  storyId: number;
+};
+
+const CommentListCard: React.FC<Props> = ({ comments, storyId }) => (
+  <Wrapper>
+    {comments.map((comment) => (
+      <CommentItemCard key={comment.id} storyId={storyId} comment={comment} />
+    ))}
+  </Wrapper>
+);
+
+export default CommentListCard;

app/src/components/common/card/comment/list/styles.ts

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+  padding: 1.5rem 3rem;
+
+  background-color: #fff;
+`;

app/src/components/common/card/item/CardItem.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { StoryInterface } from 'types/story';
+
+import {
+  Wrapper,
+  Score,
+  Title,
+  Source,
+  Author,
+  Line,
+  CommentsCount,
+  Row,
+  SourceLink,
+} from './styles';
+
+type Props = {
+  story: StoryInterface;
+};
+
+const StoryItemCard: React.FC<Props> = ({ story }) => (
+  <Wrapper>
+    <Score>{story.score}</Score>
+    <div>
+      {story.url ? (
+        <Source href={story.url} target="_blank">
+          <Row>
+            <Title>{story.title}</Title>
+            <Source href={story.url} target="_blank">
+              ({story.url})
+            </Source>
+          </Row>
+        </Source>
+      ) : (
+        <SourceLink to={`/story/${story.id}`}>
+          <Row>
+            <Title>{story.title}</Title>
+          </Row>
+        </SourceLink>
+      )}
+      <Row>
+        <Author>By {story.by}</Author>
+        {story.descendants && (
+          <>
+            <Line />
+            <CommentsCount>{story.descendants} comments</CommentsCount>
+          </>
+        )}
+      </Row>
+    </div>
+  </Wrapper>
+);
+
+export default StoryItemCard;

app/src/components/common/card/list/CardList.tsx

@@ -1,5 +1,7 @@
 import styled from 'styled-components';
 
+import { Link } from 'react-router-dom';
+
 export const Wrapper = styled.div`
   display: flex;
   align-items: center;
@@ -39,6 +41,10 @@ export const Source = styled.a`
   color: #828282;
 `;
 
+export const SourceLink = styled(Link)`
+  color: #828282;
+`;
+
 export const Description = styled.div`
   color: #828282;
 `;

app/src/components/common/card/story/list-item/StoryItemCard.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import CardItem from 'components/common/card/story/list-item/StoryItemCard';
+
+import { StoryInterface } from 'types/story';
+
+import { List, ListItem } from './styles';
+
+type Props = {
+  stories: StoryInterface[];
+};
+
+const StoryListCard: React.FC<Props> = ({ stories }) => (
+  <List>
+    {stories.map(
+      (item) =>
+        item && (
+          <ListItem key={item.id}>
+            <CardItem story={item} />
+          </ListItem>
+        )
+    )}
+  </List>
+);
+
+export default StoryListCard;

app/src/components/common/card/item/styles.ts renamed to app/src/components/common/card/story/list-item/styles.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { ItemInterface } from 'types/item';
+
+import { Wrapper, Title, Row, Score, Author, Time } from './styles';
+
+type Props = {
+  story: ItemInterface;
+};
+
+const StorySingleCard: React.FC<Props> = ({ story }) => (
+  <Wrapper>
+    <Title>{story.title}</Title>
+    <Row>
+      <Score>{story.score} points</Score>| by
+      <Author>{story.by}</Author>
+      <Time>6 hours ago</Time>
+    </Row>
+  </Wrapper>
+);
+
+export default StorySingleCard;

app/src/components/common/card/story/list/StoryListCard.tsx

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+  padding: 2rem 3rem;
+
+  background-color: #fff;
+`;
+
+export const Title = styled.h2`
+  margin-bottom: 1rem;
+
+  font-size: 2.4rem;
+  font-weight: 700;
+`;
+
+export const Row = styled.div`
+  display: flex;
+  align-items: center;
+
+  font-size: 1.5rem;
+
+  color: #828282;
+`;
+
+export const Score = styled.div`
+  margin-right: 0.5rem;
+`;
+
+export const Author = styled.div`
+  margin: 0 0.5rem;
+
+  text-decoration: underline;
+`;
+
+export const Time = styled.div``;

app/src/components/common/card/list/styles.ts renamed to app/src/components/common/card/story/list/styles.ts

@@ -2,4 +2,10 @@ import styled from 'styled-components';
 
 export const FullContent = styled.div`
   grid-column: col-start 1 / col-end 12;
+
+  & > * {
+    &:not(:last-of-type) {
+      margin-bottom: 1.5rem;
+    }
+  }
 `;

app/src/components/common/card/story/single/StorySingleCard.tsx

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
-import { actionCreators } from 'store/action-creators';
+import actionCreators from 'store/action-creators';
 
 export const useActions = () => {
   const dispatch = useDispatch();