Cleanups

* PropType Validation * Cleanups
anudit · Sep 12, 2021 · 3bc4d41 · 3bc4d41 · vercel · Sep 12, 2021
1 parent 5adb564
commit 3bc4d41
Show file tree

Hide file tree

Showing 21 changed files with 385 additions and 303 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -26,8 +26,7 @@
         "react"
     ],
     "rules": {
-        "react/prop-types": 0,
-        "@next/next/no-document-import-in-page":0
+        "react/prop-types": 0
     },
     "globals": {
         "process": true

diff --git a/.prettierrc.js b/.prettierrc.js
@@ -1,6 +1,6 @@
 module.exports = {
     arrowParens: 'always',
-    singleQuote: 'false',
+    singleQuote: false,
     tabWidth: 4,
     trailingComma: 'none'
 }
diff --git a/components/CustomAvatar.js b/components/CustomAvatar.js
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Avatar, AvatarBadge  } from "@chakra-ui/react";
+import PropTypes from 'prop-types';
 
 import { getAvatar } from '@/utils/avatar';
 import fetcher from '@/utils/fetcher';
@@ -72,4 +73,13 @@ const CustomAvatar = (props) => {
 
 };
 
+
+CustomAvatar.propTypes = {
+    address: PropTypes.string,
+    ensName: PropTypes.string,
+    badgesize: PropTypes.string,
+    size: PropTypes.string,
+    mr: PropTypes.number
+}
+
 export default CustomAvatar;
diff --git a/components/CustomButtons.js b/components/CustomButtons.js
@@ -1,4 +1,5 @@
 import React from "react";
+import PropTypes from 'prop-types';
 import { Button, useColorModeValue } from "@chakra-ui/react";
 
 export const CustomButton = (props) => {
@@ -23,3 +24,9 @@ export const CustomButton = (props) => {
     </Button>
   );
 };
+
+CustomButton.propTypes = {
+  children: PropTypes.element
+}
+
+export default CustomButton;
diff --git a/components/DashboardShell.js b/components/DashboardShell.js
@@ -2,18 +2,20 @@ import React, { useContext } from 'react';
 import Head from 'next/head';
 import Link from 'next/link';
 import { useDisclosure, useColorMode, IconButton, Text, Flex, Heading, Tooltip, chakra, Button, Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalCloseButton, Spinner, Tag  } from "@chakra-ui/react";
+import { Wrap, WrapItem } from "@chakra-ui/react"
+import PropTypes from 'prop-types';
 
 import { Web3Context } from '@/contexts/Web3Context';
 import { GithubIcon, TheConvoSpaceIcon, DisconnectIcon, MetaMaskIcon, PortisIcon, WalletConnectIcon, ArgentIcon, ExternalIcon, DocsIcon, NearIcon } from '@/public/icons';
 import { InfoIcon, MoonIcon, SunIcon } from '@chakra-ui/icons';
 import { isAddress } from 'ethers/lib/utils';
 
-const PageShell = (props) => {
+const PageShell = ({title, children}) => {
 
   return (
     <>
       <Head>
-            <title>{props.title}</title>
+            <title>{title}</title>
             <meta name='twitter:image' content='https://theconvo.space/images/poster.webp' />
             <meta property='og:image' content='https://theconvo.space/images/poster.webp' />
             <meta property="og:image:type" content="image/webp" />
@@ -28,11 +30,15 @@ const PageShell = (props) => {
         minH="100vh"
         m="0"
       >
-        {props.children}
+        {children}
       </Flex>
     </>
   );
 };
+PageShell.propTypes = {
+    title:PropTypes.string,
+    children:PropTypes.element
+}
 
 const DashboardShell = ({title, active, children}) => {
 
@@ -100,10 +106,11 @@ const DashboardShell = ({title, active, children}) => {
                     What is a wallet?
                 </Text>
                 <br/>
-                <Flex w="100%" direction={{base:"column", md:"row"}} alignItems="center" justifyContent="center">
+                <Wrap w="100%" display="flex" alignItems="center" direction={{base:"column", md:"row"}} justifyContent="center">
+                    <WrapItem>
                     <Flex
                         minHeight="170px"
-                        w={{base:"80vw", md:"30vw"}}
+                        minW={{base:"80vw", md:"300px"}}
                         maxW={{base:"80vw", md:"300px"}}
                         mx={{base:0, md:2}}
                         my={{base:2, md:0}}
@@ -125,9 +132,11 @@ const DashboardShell = ({title, active, children}) => {
                         <Text fontSize="xl" mb={2} color={colorMode === "light"? "black": "white"} fontWeight={800}>MetaMask</Text>
                         <Text fontSize="md" color={colorMode === 'light' ? "#4c4c4c": "whiteAlpha.700"}>One of the most Secure and Flexible Wallets.</Text>
                     </Flex>
+                    </WrapItem>
+                    <WrapItem>
                     <Flex
                         minHeight="170px"
-                        w={{base:"80vw", md:"30vw"}}
+                        minW={{base:"80vw", md:"300px"}}
                         maxW={{base:"80vw", md:"300px"}}
                         mx={{base:0, md:2}}
                         my={{base:2, md:0}}
@@ -150,9 +159,11 @@ const DashboardShell = ({title, active, children}) => {
                         <Text fontSize="xl" mb={2} color={colorMode === "light"? "black": "white"} fontWeight={800}>Portis</Text>
                         <Text fontSize="md" color={colorMode === 'light' ? "#4c4c4c": "whiteAlpha.700"}>Connect with your Email and Password.</Text>
                     </Flex>
+                    </WrapItem>
+                    <WrapItem>
                     <Flex
                         minHeight="170px"
-                        w={{base:"80vw", md:"30vw"}}
+                        minW={{base:"80vw", md:"300px"}}
                         maxW={{base:"80vw", md:"300px"}}
                         mx={{base:0, md:2}}
                         my={{base:2, md:0}}
@@ -176,9 +187,11 @@ const DashboardShell = ({title, active, children}) => {
                         <Text fontSize="xl" mb={2} color={colorMode === "light"? "black": "white"} fontWeight={800}>WalletConnect</Text>
                         <Text fontSize="md" color={colorMode === 'light' ? "#4c4c4c": "whiteAlpha.700"}>Connect with Rainbow, Argent and others.</Text>
                     </Flex>
+                    </WrapItem>
+                    <WrapItem>
                     <Flex
                         minHeight="170px"
-                        w={{base:"80vw", md:"30vw"}}
+                        minW={{base:"80vw", md:"300px"}}
                         maxW={{base:"80vw", md:"300px"}}
                         mx={{base:0, md:2}}
                         my={{base:2, md:0}}
@@ -202,7 +215,8 @@ const DashboardShell = ({title, active, children}) => {
                             </Tag>
                         </Text>
                     </Flex>
-                </Flex>
+                    </WrapItem>
+                </Wrap>
                 <br/>
                 <Text  color={colorMode === 'light' ? "#4c4c4c": "whiteAlpha.700"} align="center">
                 <InfoIcon mr={1}/> We do not own your private keys and cannot access your funds without your confirmation.
@@ -323,7 +337,7 @@ const DashboardShell = ({title, active, children}) => {
                                 _hover={{backgroundColor:colorMode === "light" ? "#eee" : "#212121"}}
                             >
                                 <Text fontSize="2xl">
-                                    🧑‍💻
+                                    🔮
                                 </Text>
                                 <Text mt={1} display={{base:"none", md:"block"}} fontSize="xs">
                                     Developer
@@ -422,7 +436,11 @@ const DashboardShell = ({title, active, children}) => {
             </PageShell>
         );
     }
-
 };
+DashboardShell.propTypes = {
+    title:PropTypes.string,
+    active: PropTypes.string,
+    children:PropTypes.element
+}
 
 export default DashboardShell;
diff --git a/components/PageShell.js b/components/PageShell.js
@@ -1,20 +1,21 @@
 import React from "react";
 import { Flex } from "@chakra-ui/react";
 import Head from 'next/head';
+import PropTypes from 'prop-types';
 
 import NavBar from '@/components/NavBar';
 
-const PageShell = (props) => {
+const PageShell = ({title, metaImageLink, align, children}) => {
 
   return (
     <>
       <Head>
-        <title>{props.title}</title>
+        <title>{title}</title>
         {
-          Boolean(props?.metaImageLink) === true ? (
+          Boolean(metaImageLink) === true ? (
             <>
-              <meta name='twitter:image' content={props?.metaImageLink} />
-              <meta property='og:image' content={props?.metaImageLink} />
+              <meta name='twitter:image' content={metaImageLink} />
+              <meta property='og:image' content={metaImageLink} />
               <meta property="og:image:type" content="image/jpg" />
               <meta property="og:image:width" content="1920" />
               <meta property="og:image:height" content="1080" />
@@ -34,16 +35,23 @@ const PageShell = (props) => {
       <NavBar/>
       <Flex
         direction="column"
-        align={Boolean(props?.align) === true ? props.align : "center"}
+        align={Boolean(align) === true ? align : "center"}
         maxW="1600px"
         w={{ base: "95%", md: "80%", lg: "90%"}}
         m="0 auto"
         mt="10vh"
       >
-        {props.children}
+        {children}
       </Flex>
     </>
   );
 };
 
+PageShell.propTypes = {
+  title:PropTypes.string,
+  metaImageLink:PropTypes.string,
+  align:PropTypes.string,
+  children:PropTypes.element
+}
+
 export default PageShell;
diff --git a/components/ThreadCard.js b/components/ThreadCard.js
@@ -1,14 +1,15 @@
 import React from "react";
 import { motion } from 'framer-motion';
+import PropTypes from 'prop-types';
 
 import { CheckIcon, CopyIcon } from "@chakra-ui/icons";
 import { Flex, Skeleton, Box, Link, Text, useColorModeValue, IconButton, Tooltip, useClipboard } from "@chakra-ui/react";
 import timeAgo from "@/utils/timeAgo";
 import { truncateAddress } from '@/utils/stringUtils';
 
-export const ThreadCard = (props) => {
+export const ThreadCard = ({threadData}) => {
 
-    const { hasCopied, onCopy } = useClipboard(`https://theconvo.space/thread/${props.threadData._id}`);
+    const { hasCopied, onCopy } = useClipboard(`https://theconvo.space/thread/${threadData._id}`);
 
     return (
         <motion.div
@@ -32,7 +33,7 @@ export const ThreadCard = (props) => {
 
             <Box>
                 <Link
-                    href={`/thread/${props.threadData._id}`}
+                    href={`/thread/${threadData._id}`}
                     textDecoration="none"
                     fontSize="xl"
                     fontWeight="700"
@@ -46,7 +47,7 @@ export const ThreadCard = (props) => {
                     prefetch="true"
                     align="left"
                 >
-                    {decodeURI(props.threadData?.title)}
+                    {decodeURI(threadData?.title)}
                 </Link>
             </Box>
 
@@ -64,9 +65,9 @@ export const ThreadCard = (props) => {
                         pl={1}
                         href="/#"
                     >
-                        {truncateAddress(props.threadData?.creator)}
+                        {truncateAddress(threadData?.creator)}
                     </ Link>
-                    , {timeAgo(props.threadData?.createdOn)}.
+                    , {timeAgo(threadData?.createdOn)}.
                 </Text>
                 <Tooltip label="Copy Link to Thread" placement="top">
                     <IconButton
@@ -82,8 +83,11 @@ export const ThreadCard = (props) => {
         </Box>
       </motion.div>
     );
-  };
+};
 
+ThreadCard.propTypes = {
+    threadData: PropTypes.object
+}
 
 export const ThreadCardSkeleton = () => {
 

diff --git a/components/ThreadView.js b/components/ThreadView.js
@@ -2,6 +2,7 @@ import React, { useState, useEffect, useContext, useRef } from "react";
 import { useRouter } from 'next/router';
 import { useDisclosure, useToast, Link, InputGroup, Stack, InputLeftElement,InputRightElement ,  Input,Text, Flex, Modal, ModalOverlay, ModalContent, ModalHeader, ModalFooter, ModalBody, ModalCloseButton, FormControl, FormLabel, Button} from "@chakra-ui/react";
 import { SearchIcon } from "@chakra-ui/icons";
+import PropTypes from 'prop-types';
 
 import { Web3Context } from '@/contexts/Web3Context'
 import { createThread } from "@/lib/thread-db";
@@ -219,3 +220,8 @@ export const ThreadView = ({link, threads, exploreAll}) => {
 
 };
 
+ThreadView.propTypes ={
+    link: PropTypes.string,
+    threads: PropTypes.array,
+    exploreAll: PropTypes.bool
+}
diff --git a/components/TweetCard.js b/components/TweetCard.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Avatar, useColorMode, Flex, Text, Tooltip, Link } from "@chakra-ui/react";
+import PropTypes from 'prop-types';
 
 import { TwitterIcon } from "@/public/icons";
 import { prettyTimeParse } from "@/utils/stringUtils"
@@ -77,4 +78,8 @@ const TweetCard = ({tweet}) => {
 
 };
 
+TweetCard.propTypes = {
+  tweet: PropTypes.object.isRequired,
+}
+
 export default TweetCard;
diff --git a/lib/thread-db.js b/lib/thread-db.js
@@ -112,7 +112,7 @@ export async function getComments(query, page = undefined, pageSize = undefined)
     }
 
     for (let index = 0; index < snapshot.length; index++) {
-        snapshot[index].authorENS = addToENS[snapshot[index].author];
+        snapshot[index].authorENS = Boolean(addToENS[snapshot[index].author]) === true ? addToENS[snapshot[index].author] : false;
     }
     // ENS Resolution :: End