Merge branch 'main' of https://github.com/pjonatansr/ccsseraphini

sibelius · Apr 2, 2022 · cab8449 · cab8449
2 parents db924cc + 4400798
commit cab8449
Show file tree

Hide file tree

Showing 17 changed files with 386 additions and 234 deletions.
diff --git a/apps/vscode-ext/package.json b/apps/vscode-ext/package.json
@@ -35,7 +35,7 @@
     "@types/mocha": "^9.1.0",
     "@types/node": "^17.0.23",
     "@types/polka": "^0.5.1",
-    "@types/vscode": "^1.52.0",
+    "@types/vscode": "^1.66.0",
     "@typescript-eslint/eslint-plugin": "^5.17.0",
     "@typescript-eslint/parser": "^5.17.0",
     "concurrently": "^7.0.0",
@@ -45,7 +45,7 @@
     "rollup": "^2.3.4",
     "rollup-plugin-svelte": "^7.1.0",
     "rollup-plugin-terser": "^7.0.2",
-    "svelte": "^3.31.0",
+    "svelte": "^3.46.6",
     "svelte-check": "^2.4.6",
     "svelte-preprocess": "^4.6.1",
     "ts-loader": "^9.2.8",

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -23,9 +23,9 @@
     "ethers": "5.6.2",
     "fork-me-corner": "1.0.1",
     "framer-motion": "6.2.8",
-    "next": "12.1.2",
+    "next": "12.1.4",
     "next-auth": "4.3.1",
-    "qrcode.react": "3.0.0",
+    "qrcode.react": "3.0.1",
     "react": "18.0.0",
     "react-copy-to-clipboard": "5.0.4",
     "react-dom": "18.0.0",
@@ -37,7 +37,7 @@
   "devDependencies": {
     "@babel/core": "7.17.8",
     "@testing-library/jest-dom": "5.16.3",
-    "@testing-library/react": "12.1.4",
+    "@testing-library/react": "13.0.0",
     "@types/node": "17.0.23",
     "@types/react": "17.0.43",
     "@types/react-copy-to-clipboard": "5.0.2",
@@ -46,7 +46,7 @@
     "@typescript-eslint/parser": "5.17.0",
     "babel-jest": "27.5.1",
     "eslint": "8.12.0",
-    "eslint-config-next": "12.1.2",
+    "eslint-config-next": "12.1.4",
     "jest": "27.5.1",
     "jest-fetch-mock": "3.0.3",
     "typescript": "4.6.3",

diff --git a/apps/web/src/components/Error.tsx b/apps/web/src/components/Error.tsx
@@ -0,0 +1,89 @@
+import { ChakraNextLinkButton } from '../components/ChakraNextLinkButton';
+import { Flex, Image, Heading, Text } from '@chakra-ui/react';
+import { FaHome } from 'react-icons/fa';
+
+type Props = {
+  errorCode: string;
+  message: string;
+};
+export const Error = ({ errorCode, message }: Props) => {
+  return (
+    <Flex
+      flex={1}
+      maxW={'100%'}
+      height="100vh"
+      alignItems="center"
+      justifyContent="center"
+      flexDirection="column"
+      pb="10px"
+      style={{
+        backgroundColor: '#e5e5f7',
+        opacity: '0.8',
+        backgroundImage:
+          'linear-gradient(#444cf7 1px, transparent 1px), linear-gradient(to right, #444cf7 1px, #e5e5f7 1px)',
+        backgroundSize: '20px 20px',
+      }}
+    >
+      <Flex
+        alignItems="center"
+        flexDirection="column"
+        px={'12px'}
+        style={{
+          width: '100%',
+          position: 'sticky',
+          top: '0',
+        }}
+      >
+        <Flex
+          borderWidth="1px"
+          borderColor="gray.500"
+          borderRadius="lg"
+          overflow="hidden"
+          p="7"
+          flexDirection="column"
+          bg="white"
+          width={'100%'}
+          maxW={'fit-content'}
+          minW={{ md: 'unset', base: 'calc(100vw - 24px)' }}
+          alignItems="center"
+          paddingTop="55px"
+        >
+          <Image
+            borderRadius="full"
+            boxSize="100px"
+            objectFit="cover"
+            src="https://unavatar.io/twitter/sseraphini"
+            alt="Sibelius Seraphini"
+            m="3"
+            position="absolute"
+            top="-33%"
+          />
+          <Heading
+            as="h1"
+            size="2xl"
+            marginBottom="7px"
+            background="linear-gradient(130deg, #ED964A, #D78742)"
+            backgroundClip="text"
+            textColor="transparent"
+          >
+            {errorCode}
+          </Heading>
+          <Text fontSize="xl" marginBottom="5px">
+            {message}
+          </Text>
+          <ChakraNextLinkButton
+            href="/"
+            backgroundColor="#3940CC"
+            textColor="white"
+            _hover={{ bg: '#2B3099' }}
+            leftIcon={<FaHome />}
+            width="100%"
+            size="sm"
+          >
+            Back to Home
+          </ChakraNextLinkButton>
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/apps/web/src/components/__tests__/TweetInfo.test.tsx b/apps/web/src/components/__tests__/TweetInfo.test.tsx
@@ -157,7 +157,7 @@ describe('TweetInfo', () => {
       'https://twitter.com/tgmarinho/status/1497210444875972609/retweets',
     );
 
-    expect(screen.getByText('Quote Tweets').closest('a')).toHaveAttribute(
+    expect(screen.getByText('Quote Tweet').closest('a')).toHaveAttribute(
       'href',
       'https://twitter.com/tgmarinho/status/1497210444875972609/retweets/with_comments',
     );

diff --git a/apps/web/src/components/home/Home.tsx b/apps/web/src/components/home/Home.tsx
@@ -54,8 +54,8 @@ export const Home = () => {
           flexDirection="column"
           bg="white"
           width={'100%'}
-          maxW={'fit-content'}
-          minW={{ md: 'unset', base: 'calc(100vw - 24px)' }}
+          minW={'300px'}
+          maxW={'430px'}
         >
           <TweetComposer />
           <ActionButtons />

diff --git a/apps/web/src/components/home/TweetComposer.tsx b/apps/web/src/components/home/TweetComposer.tsx
@@ -16,9 +16,13 @@ export const TweetComposer = () => {
       <Textarea
         size="sm"
         resize="none"
-        minHeight={'9rem'}
+        minHeight="2.5rem"
+        _focus={{ minHeight: '9rem' }}
         placeholder="Write your tweet concept/question here"
         value={text}
+        transitionProperty="min-height"
+        transitionDuration=".3s"
+        transitionTimingFunction="ease"
         onChange={(e) => setText(e.target.value)}
       />
       <Flex direction={'row'} justifyContent={'space-between'}>

diff --git a/apps/web/src/components/tweet/TweetPublicMetrics.tsx b/apps/web/src/components/tweet/TweetPublicMetrics.tsx
@@ -1,77 +1,95 @@
-import { Flex, Text, LinkOverlay, LinkBox } from '@chakra-ui/react';
+import { Flex, Text, LinkOverlay, LinkBox, Button } from '@chakra-ui/react';
+import { useState } from 'react';
+import { FaReply } from 'react-icons/fa';
 import { TweetData } from 'types/Tweet';
 import { twitterBaseUrl, twitterEndpointSufix } from './Tweet';
+import { TweetReplyModal } from './TweetReplyModal';
 
 interface TweetInfoProps {
   tweet: TweetData;
   key?: string;
 }
+
+interface TweetMetricProps {
+  href: string;
+  count: number;
+  labels: string[];
+}
+
+const TweetMetric = ({ href, count, labels }: TweetMetricProps) => {
+  return (
+    <LinkBox cursor="pointer">
+      <LinkOverlay
+        href={href}
+        target="blank"
+        display="flex"
+        _hover={{ textDecor: 'underline' }}
+      >
+        <Text color="gray.500" fontWeight="bold" marginRight={1}>
+          {count}
+        </Text>
+        <Text color="gray.500" marginRight={2}>
+          {count < 2 ? labels[0] : labels[1]}
+        </Text>
+      </LinkOverlay>
+    </LinkBox>
+  );
+};
+
 const TweetPublicMetrics = ({ tweet }: TweetInfoProps) => {
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+  const openModal = () => setIsModalOpen(true);
+  const closeModal = () => setIsModalOpen(false);
   return (
-    <Flex paddingY={3} borderY="1px solid" mt={4} borderColor="gray.300">
-      <LinkBox>
-        <LinkOverlay
-          href={`${twitterBaseUrl}${tweet.userInfo.username}/status/${tweet.id}`}
-          target="blank"
-          display="flex"
-          _hover={{ textDecor: 'underline' }}
-        >
-          <Text color="gray.500" fontWeight="bold" marginRight={1}>
-            {tweet.public_metrics.reply_count}
-          </Text>
-          <Text color="gray.500" marginRight={2}>
-            {tweet.public_metrics.reply_count === 1 ? 'Reply' : 'Replies'}
-          </Text>
-        </LinkOverlay>
-      </LinkBox>
-      <LinkBox>
-        <LinkOverlay
-          href={`${twitterBaseUrl}${tweet.userInfo.username}/status/${tweet.id}${twitterEndpointSufix.retweet}`}
-          target="blank"
-          display="flex"
-          _hover={{ textDecor: 'underline' }}
-        >
-          <Text color="gray.500" fontWeight="bold" marginRight={1}>
-            {tweet.public_metrics.retweet_count}
-          </Text>
-          <Text color="gray.500" marginRight={2}>
-            {tweet.public_metrics.retweet_count === 1 ? 'Retweet' : 'Retweets'}
-          </Text>
-        </LinkOverlay>
-      </LinkBox>
-      <LinkBox>
-        <LinkOverlay
-          href={`${twitterBaseUrl}${tweet.userInfo.username}/status/${tweet.id}${twitterEndpointSufix.quote}`}
-          target="blank"
-          display="flex"
-          _hover={{ textDecor: 'underline' }}
-        >
-          <Text color="gray.500" fontWeight="bold" marginRight={1}>
-            {tweet.public_metrics.quote_count}
-          </Text>
-          <Text color="gray.500" marginRight={2}>
-            {tweet.public_metrics.quote_count === 1
-              ? 'Quote Tweet'
-              : 'Quote Tweets'}
-          </Text>
-        </LinkOverlay>
-      </LinkBox>
-      <LinkBox>
-        <LinkOverlay
-          href={`${twitterBaseUrl}${tweet.userInfo.username}/status/${tweet.id}${twitterEndpointSufix.like}`}
-          target="blank"
-          display="flex"
-          _hover={{ textDecor: 'underline' }}
-        >
-          <Text color="gray.500" fontWeight="bold" marginRight={1}>
-            {tweet.public_metrics.like_count}
-          </Text>
-          <Text color="gray.500">
-            {tweet.public_metrics.like_count === 1 ? 'Like' : 'Likes'}
-          </Text>
-        </LinkOverlay>
-      </LinkBox>
-    </Flex>
+    <>
+      <Flex
+        paddingY={3}
+        borderY="1px solid"
+        mt={4}
+        borderColor="gray.300"
+        alignItems="center"
+        justifyContent="space-between"
+        flexWrap="wrap"
+      >
+        <Flex>
+          <Button
+            size={'sm'}
+            leftIcon={<FaReply />}
+            onClick={openModal}
+            color="gray.600"
+          >
+            Reply Here
+          </Button>
+        </Flex>
+        <Flex>
+          <TweetMetric
+            href={`${twitterBaseUrl}${tweet.userInfo.username}/status/${tweet.id}`}
+            count={tweet.public_metrics.reply_count}
+            labels={['Reply', 'Replies']}
+          />
+          <TweetMetric
+            href={`${twitterBaseUrl}${tweet.userInfo.username}/status/${tweet.id}${twitterEndpointSufix.retweet}`}
+            count={tweet.public_metrics.retweet_count}
+            labels={['Retweet', 'Retweets']}
+          />
+          <TweetMetric
+            href={`${twitterBaseUrl}${tweet.userInfo.username}/status/${tweet.id}${twitterEndpointSufix.quote}`}
+            count={tweet.public_metrics.quote_count}
+            labels={['Quote Tweet', 'Quote Tweets']}
+          />
+          <TweetMetric
+            href={`${twitterBaseUrl}${tweet.userInfo.username}/status/${tweet.id}${twitterEndpointSufix.like}`}
+            count={tweet.public_metrics.like_count}
+            labels={['Like', 'Likes']}
+          />
+        </Flex>
+      </Flex>
+      <TweetReplyModal
+        isOpen={isModalOpen}
+        closeModal={closeModal}
+        tweet={tweet}
+      />
+    </>
   );
 };