[V1.0] Deploy (#19)

* Profile and Landing Page (#17)

* Add pages for viewing articles, landing page, profile

* Refactor (#16)

* add authcheck + improving navigation

* Feature/ux (#18)

Co-authored-by: Niveditha Kani <34191104+NivedithaK@users.noreply.github.com>

components/Article/Comment.js

@@ -0,0 +1,41 @@
+import React from "react";
+import {
+  Link,
+  Flex,
+  HStack,
+  Text,
+  IconButton,
+  Divider,
+} from "@chakra-ui/react";
+import { FcLike } from "react-icons/fc";
+
+function Comment(props) {
+  return (
+    <div>
+      <Flex>
+        <HStack w="700px" spacing="20px">
+          <IconButton
+            w={6}
+            h={6}
+            bg="none"
+            aria-label="Like"
+            icon={<FcLike />}
+          />
+          <div>
+            <Text>{props.body}</Text>
+            <HStack>
+              <Link>
+                <Text>{props.commenter}</Text>
+              </Link>
+              <Text>{props.timestamp}</Text>
+            </HStack>
+          </div>
+        </HStack>
+      </Flex>
+      <br />
+      <Divider w="700px" />
+    </div>
+  );
+}
+
+export default Comment;

components/Article/CommentSection.js

@@ -0,0 +1,46 @@
+import React from "react";
+import { Container, Divider, Heading, VStack, Box } from "@chakra-ui/react";
+
+import Comment from "./Comment";
+
+function CommentSection() {
+  const listItems = [
+    {
+      commenter: "Bob Joe",
+      avatar: "https://bit.ly/dan-abramov",
+      body: "Cool comment body",
+      timestamp: "5 hours ago",
+    },
+    {
+      commenter: "Bob Joe",
+      avatar: "https://bit.ly/dan-abramov",
+      body: "Cool comment body",
+      timestamp: "5 hours ago",
+    },
+    {
+      commenter: "Bob Joe",
+      avatar: "https://bit.ly/dan-abramov",
+      body: "Cool comment body",
+      timestamp: "5 hours ago",
+    },
+  ];
+
+  return (
+    <Container size="xl" centerContent>
+      <Box w="700px">
+        <Heading as="h4" size="md">
+          Comments
+        </Heading>
+        <Divider w="700px" />
+        <br></br>
+        <VStack spacing="20px">
+          {listItems.map((item, index) => {
+            return <Comment key={index} {...item} />;
+          })}
+        </VStack>
+      </Box>
+    </Container>
+  );
+}
+
+export default CommentSection;

components/Article/Related.js

@@ -0,0 +1,40 @@
+import React from "react";
+import {
+  Link,
+  Box,
+  Flex,
+  Spacer,
+  HStack,
+  Image,
+  Text,
+  Divider,
+} from "@chakra-ui/react";
+
+function Related(props) {
+  return (
+    <div>
+      <HStack w="700px" spacing="20px">
+        <Image htmlWidth="100px" src={props.img} />
+        <div>
+          <Box w="550px">
+            <Flex>
+              <Link>
+                <Text fontWeight="bold"> {props.title} </Text>
+              </Link>
+              <Spacer />
+              <Text> {props.timestamp} </Text>
+            </Flex>
+          </Box>
+          <Box w="550px">
+            <Text> {props.subtitle} </Text>
+          </Box>
+        </div>
+        <Spacer />
+      </HStack>
+      <br />
+      <Divider />
+    </div>
+  );
+}
+
+export default Related;

components/Article/RelatedSection.js

@@ -0,0 +1,51 @@
+import React from "react";
+import { Container, Heading, VStack, Box, Divider } from "@chakra-ui/react";
+
+import Related from "./Related";
+
+function RelatedSection() {
+  const listItems = [
+    {
+      img:
+        "https://cdn.vox-cdn.com/thumbor/I2bFYczqDpiHcC1cUt_ptziX_t8=/0x0:4896x3264/1820x1213/filters:focal(2057x1241:2839x2023):format(webp)/cdn.vox-cdn.com/uploads/chorus_image/image/64715574/GettyImages_577660404.0.jpg",
+      title: "Cool article",
+      subtitle:
+        "The Dijkstra algorithm uses labels that are positive integers or real numbers, which are totally ordered. It can be generalized to use any labels.",
+      timestamp: "5 hours ago",
+    },
+    {
+      img:
+        "https://cdn.vox-cdn.com/thumbor/I2bFYczqDpiHcC1cUt_ptziX_t8=/0x0:4896x3264/1820x1213/filters:focal(2057x1241:2839x2023):format(webp)/cdn.vox-cdn.com/uploads/chorus_image/image/64715574/GettyImages_577660404.0.jpg",
+      title: "Cool article",
+      subtitle:
+        "The Dijkstra algorithm uses labels that are positive integers or real numbers, which are totally ordered. It can be generalized to use any labels.",
+      timestamp: "5 hours ago",
+    },
+    {
+      img:
+        "https://cdn.vox-cdn.com/thumbor/I2bFYczqDpiHcC1cUt_ptziX_t8=/0x0:4896x3264/1820x1213/filters:focal(2057x1241:2839x2023):format(webp)/cdn.vox-cdn.com/uploads/chorus_image/image/64715574/GettyImages_577660404.0.jpg",
+      title: "Cool article",
+      subtitle:
+        "The Dijkstra algorithm uses labels that are positive integers or real numbers, which are totally ordered. It can be generalized to use any labels.",
+      timestamp: "5 hours ago",
+    },
+  ];
+
+  return (
+    <Container size="xl" centerContent p="50px">
+      <Box w="700px">
+        <Heading as="h4" size="md">
+          Related Articles
+        </Heading>
+        <Divider />
+        <br />
+        <VStack spacing="20px">
+          {listItems.map((item, index) => {
+            return <Related key={index} {...item} />;
+          })}
+        </VStack>
+      </Box>
+    </Container>
+  );
+}
+export default RelatedSection;

components/AuthCheck/index.js

@@ -0,0 +1,23 @@
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import { connect } from "react-redux";
+
+import { isAuthenticatedSelector } from "../../stores/user/selectors";
+
+export const AuthCheck = ({ isAuthenticated }) => {
+  const router = useRouter();
+  const { pathname } = router;
+
+  useEffect(() => {
+    if (!isAuthenticated && pathname !== "/") {
+      //router.push("/");
+    }
+  }, [isAuthenticated, pathname, router]);
+  return null;
+};
+
+const mapState = (state) => ({
+  isAuthenticated: isAuthenticatedSelector(state),
+});
+
+export default connect(mapState, null)(AuthCheck);

components/Homepage/ListItem.js → components/Dashboard/ArticleItem.js

@@ -7,16 +7,19 @@ import {
   Image,
   Text,
   Divider,
+  Link,
 } from "@chakra-ui/react";
 
-function ListItem({ img, subtitle, timestamp, title }) {
+function ArticleItem({ img, subtitle, timestamp, title }) {
   return (
     <div>
       <HStack w="800px" spacing="20px">
         <div>
           <Box w="650px">
             <Flex>
-              <Text fontWeight="bold"> {title} </Text>
+              <Link href="/read">
+                <Text fontWeight="bold"> {title} </Text>
+              </Link>
               <Spacer />
               <Text> {timestamp} </Text>
             </Flex>
@@ -34,4 +37,4 @@ function ListItem({ img, subtitle, timestamp, title }) {
   );
 }
 
-export default ListItem;
+export default ArticleItem;

components/Dashboard/ArticleList.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { VStack, Box } from "@chakra-ui/react";
+
+import ArticleItem from "./ArticleItem";
+
+function ArticleList({ articles }) {
+  return (
+    <Box mt={4}>
+      <VStack spacing="20px">
+        {articles.map((article, index) => {
+          return <ArticleItem key={index} {...article} />;
+        })}
+      </VStack>
+    </Box>
+  );
+}
+export default ArticleList;

components/Dashboard/MegaFeature.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { Avatar, Box, Flex, HStack, Image, Text, Link } from "@chakra-ui/react";
+
+function MegaFeature({ avatar, desc, img, name, subtitle, title }) {
+  return (
+    <HStack justify="center">
+      <Image htmlWidth="400px" objectFit="cover" src={img} />
+      <div>
+        <Flex>
+          <HStack w="400px" spacing="20px">
+            <Avatar name={name} src={avatar} />
+            <div>
+              <Link href="/read">
+                <Text fontWeight="extrabold"> {subtitle} </Text>
+              </Link>
+              <Text> {title} </Text>
+            </div>
+          </HStack>
+        </Flex>
+        <Box w="400px">
+          <br />
+          {desc}
+        </Box>
+      </div>
+    </HStack>
+  );
+}
+
+export default MegaFeature;

components/Homepage/SingleEdit.js → components/Dashboard/SingleEdit.js

@@ -1,4 +1,6 @@
+import Link from "next/link";
 import React from "react";
+import { connect } from "react-redux";
 import {
   Button,
   Flex,
@@ -13,7 +15,9 @@ import { CheckIcon, CloseIcon } from "@chakra-ui/icons";
 import { BiDotsHorizontalRounded } from "react-icons/bi";
 import { AiOutlineUserAdd } from "react-icons/ai";
 
-function ChooseIcon({ iconindex }) {
+import { displaySuccessToast } from "../../stores/ui/actions";
+
+function ChooseIcon({ iconindex, name, displaySuccessToast }) {
   if (iconindex == 0) {
     return (
       <Button variant="ghost">
@@ -39,29 +43,43 @@ function ChooseIcon({ iconindex }) {
     return (
       <IconButton
         aria-label="Follow"
+        onClick={() => displaySuccessToast("", `Added @${name} as a friend`)}
         variant="ghost"
         icon={<AiOutlineUserAdd />}
       />
     );
   }
 }
 
-function SingleEdit({ avatar, iconindex, name, subtitle, title }) {
+function SingleEdit({
+  avatar,
+  iconindex,
+  name,
+  subtitle,
+  title,
+  displaySuccessToast,
+}) {
   return (
     <div>
       <Flex>
         <HStack w="300px" spacing="20px">
           <Avatar name={name} src={avatar} />
           <div>
-            <Text fontWeight="extrabold"> {title} </Text>
+            <Link href="/">{title}</Link>
             <Text> {subtitle} </Text>
           </div>
           <Spacer />
-          <ChooseIcon iconindex={iconindex} />
+          <ChooseIcon
+            name={name}
+            displaySuccessToast={displaySuccessToast}
+            iconindex={iconindex}
+          />
         </HStack>
       </Flex>
     </div>
   );
 }
 
-export default SingleEdit;
+export default connect(null, {
+  displaySuccessToast,
+})(SingleEdit);

components/Dashboard/index.js

@@ -0,0 +1,40 @@
+import styles from "../../styles/Home.module.css";
+import { Center, Grid, GridItem } from "@chakra-ui/react";
+import ArticleList from "../Dashboard/ArticleList";
+import MegaFeature from "../Dashboard/MegaFeature";
+import SidebarRecs from "../Dashboard/SidebarRecs";
+
+import {
+  mockRecommendedArticles,
+  mockRecommendations,
+  mockRequests,
+} from "../../testing/data";
+
+import { connect } from "react-redux";
+
+function Dashboard({ recommendedArticles, reviews, suggestedUsers }) {
+  return (
+    <Center className={styles.home}>
+      <Grid>
+        <Grid templateColumns="repeat(3, 1fr)" className={styles.main}>
+          <GridItem colSpan={2} mr={10}>
+            <MegaFeature {...recommendedArticles[0]} />
+            <ArticleList articles={recommendedArticles.slice(1)} />
+          </GridItem>
+          <GridItem colSpan={1} mb={28}>
+            <SidebarRecs title="Review Status" data={reviews} />
+            <SidebarRecs title="Who to Follow" data={suggestedUsers} />
+          </GridItem>
+        </Grid>
+      </Grid>
+    </Center>
+  );
+}
+
+const mapStateToProps = (state) => ({
+  recommendedArticles: mockRecommendedArticles,
+  reviews: mockRequests,
+  suggestedUsers: mockRecommendations,
+});
+
+export default connect(mapStateToProps, null)(Dashboard);

components/Footer/Footer.module.css

@@ -1,3 +1,4 @@
 .footer {
   border-top: 1px solid #eaeaea;
+  height: 5vw;
 }