feat: ui bug fixes

tewarig · Apr 10, 2022 · ccd82f3 · ccd82f3 · vercel · Apr 10, 2022
1 parent 728faaf
commit ccd82f3
Show file tree

Hide file tree

Showing 10 changed files with 170 additions and 23 deletions.
diff --git a/const.tsx b/const.tsx
@@ -5,5 +5,7 @@ const messageValues = {
   userNameSucessWarning: "Now that userName is yours forever",
   userNameEmptyWarning: "Don't leave the text input empty... like your heart",
   messageSendSucess: "Message Send Sucessfully",
+  copyToClipBoardSucess: "Yeah! Text have been copied",
+  userNameError: "Opps ! you don't have a userName",
 };
 export default messageValues;
diff --git a/lottie/cat.json b/lottie/cat.json
diff --git a/lottie/social.json b/lottie/social.json
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "next": "^11.1.4",
     "react": "17.0.2",
     "react-confetti": "^6.0.1",
+    "react-copy-to-clipboard": "^5.0.4",
     "react-dom": "17.0.2",
     "react-onesignal": "^2.0.3",
     "react-redux": "^7.2.8",

diff --git a/pages/Comp/messageDialog.tsx b/pages/Comp/messageDialog.tsx
@@ -1,10 +1,41 @@
 import React from "react";
 import getMessage from "../../hooks/getMessage";
 import MessageBox from "./messageBox";
+import Lottie from "lottie-react";
+import Cat from "../../lottie/cat.json";
+import { Box, Center, Text } from "@chakra-ui/react";
 
 function MessageDialog() {
   const { data, error } = getMessage();
 
+  if (data.length === 0) {
+    return (
+      <React.Fragment>
+        <Center>
+          <Text>
+            {" "}
+            You Don't have any Message Click on the Link Button get your url and
+            share it.
+          </Text>
+        </Center>
+        <Center>
+          <Box
+            width={{
+              md: "50%",
+              lg: "25%",
+            }}
+            height={{
+              md: "50%",
+              lg: "25%",
+            }}
+          >
+            <Lottie animationData={Cat} loop={true} autoPlay={true} />
+          </Box>
+        </Center>
+      </React.Fragment>
+    );
+  }
+
   return (
     <React.Fragment>
       {data.map((message, index) => (

diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
@@ -17,7 +17,10 @@ import {
   Flex,
 } from "@chakra-ui/react";
 import User from "./Comp/user";
+import Lottie from "lottie-react";
+import copy from "copy-to-clipboard";
 import { withAuthRequired } from "@supabase/supabase-auth-helpers/nextjs";
+
 import { useAppSelector, useAppDispatch } from "../hooks/store";
 
 import { getUser } from "../slices/userSlice";
@@ -27,6 +30,9 @@ import MessageDialog from "./Comp/messageDialog";
 import getUserName from "../hooks/getUserName";
 import { setUserName } from "../slices/userNameSlice";
 import { LinkIcon, CopyIcon } from "@chakra-ui/icons";
+import { ToastContainer, toast } from "react-toastify";
+import Share from "../lottie/social.json";
+import messageValues from "../const";
 
 export default function Dashboard() {
   const userData = useAppSelector((state) => state.user);
@@ -38,6 +44,14 @@ export default function Dashboard() {
 
   dispatch(getUser());
   dispatch(setUserName());
+  const copyToClipBoard = () => {
+    if (userName === "") {
+      toast.error(messageValues.userNameError);
+    } else {
+      copy(siteUrl);
+      toast.success(messageValues.copyToClipBoardSucess);
+    }
+  };
 
   return (
     <Box bg="#fdfaff" w="100%" height={"100%"} p={10} alignContent={"center"}>
@@ -79,6 +93,8 @@ export default function Dashboard() {
           <DrawerCloseButton />
           <DrawerHeader backgroundColor={"#fdfaff"}>Share </DrawerHeader>
 
+          <Lottie animationData={Share} loop={true} autoPlay={true} />
+
           <DrawerBody backgroundColor={"#fdfaff"}>
             Hello👋 , {userData.fullName} <br />
             Share this url with your friends , family or on Social Media to get
@@ -95,7 +111,17 @@ export default function Dashboard() {
               <Center>
                 {" "}
                 {siteUrl.slice(0, 32)}...{" "}
-                <Button colorScheme={"purple"} ml="2" >
+                <Button
+                  colorScheme={"purple"}
+                  ml={{
+                    sm: "40px",
+                    md: "40px",
+                    lg: "60px",
+                  }}
+                  onClick={() => {
+                    copyToClipBoard();
+                  }}
+                >
                   {" "}
                   <Icon as={CopyIcon} />
                 </Button>

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -18,7 +18,8 @@ import think from "../lottie/think.json";
 const LoginPage = () => {
   const { user, error } = useUser();
   const [data, setData] = useState({});
-  const [isLargerThan1000] = useMediaQuery("(min-width: 1000px)");
+  const [isLargerThan1000] = useMediaQuery("(min-width: 800px)");
+  console.log(isLargerThan1000);
 
   useEffect(() => {
     async function loadData() {
@@ -53,35 +54,49 @@ const LoginPage = () => {
 
   return (
     <React.Fragment>
-      <Flex flexDirection={isLargerThan1000 ? "row" : "column"}>
+      <Flex flexDirection={isLargerThan1000 ? "row" : "column-reverse"}>
         <Box
-          width={isLargerThan1000 ? "50%" : "100%"}
-          height={isLargerThan1000 ? "50%" : "100%"}
+          width={{
+            md: "100%",
+            lg: "50%",
+          }}
+          height={{
+            md: "100",
+            lg: "50%",
+          }}
         >
           <Flex flexDirection={"column"} margin="5%" mt="30%">
-            <Text fontSize={"2xl"}> Give and Receive </Text>
+            <Text fontSize={"2xl"} ml={isLargerThan1000 ? "0%" : "25%"}>
+              {" "}
+              Give and Receive{" "}
+            </Text>
 
             <Text
               bgGradient="linear(to-l, #8000ff ,#8000f0)"
               bgClip="text"
-              fontSize={isLargerThan1000 ? "8xl" : "3xl"}
+              fontSize={{
+                sm: "5xl",
+                md: "5xl",
+                lg: "8xl",
+              }}
+              ml={isLargerThan1000 ? "0%" : "25%"}
             >
               {" "}
               Anonymous Feedbacks
             </Text>
           </Flex>
         </Box>
         <Box
-          width={isLargerThan1000 ? "50%" : "100%"}
-          height={isLargerThan1000 ? "50%" : "100%"}
+          width={{
+            md: "100%",
+            lg: "50%",
+          }}
+          height={{
+            md: "100%",
+            lg: "50%",
+          }}
         >
-          <Lottie
-            animationData={UserGraph}
-            loop={false}
-            autoPlay={false}
-            width={isLargerThan1000 ? "50%" : "100%"}
-            height={isLargerThan1000 ? "50%" : "100%"}
-          />
+          <Lottie animationData={UserGraph} loop={false} autoPlay={false} />
         </Box>
       </Flex>
       <Divider height={1} />

diff --git a/pages/message/[...userName].tsx b/pages/message/[...userName].tsx
@@ -9,6 +9,9 @@ import {
   Fade,
   Spinner,
   useMediaQuery,
+  SkeletonCircle,
+  SkeletonText,
+  Skeleton,
 } from "@chakra-ui/react";
 import { Avatar, Wrap, WrapItem, Text } from "@chakra-ui/react";
 import { supabaseClient } from "@supabase/supabase-auth-helpers/nextjs";
@@ -20,6 +23,8 @@ import Confetti from "react-confetti";
 import useWindowSize from "react-use/lib/useWindowSize";
 import messageValues from "../../const";
 import axios from "axios";
+import Lottie from "lottie-react";
+import Cat from "../../lottie/cat.json";
 
 import "react-toastify/dist/ReactToastify.css";
 
@@ -71,13 +76,13 @@ function Message() {
         .insert([{ message: message, hint: hint, userName: userName?.[0] }]);
 
       setShowConfetti(true);
-    
+
       axios({
         method: "post",
         url: "https://fcm.googleapis.com/fcm/send",
         headers: {
           "Content-Type": "application/json",
-         "Authorization": authKey,
+          Authorization: authKey,
         },
         data: {
           to: userData.userToken,
@@ -104,11 +109,46 @@ function Message() {
   }
 
   if (userData === null) {
-    return <React.Fragment>Loading...</React.Fragment>;
+    return (
+      <React.Fragment>
+        <Box padding="6" boxShadow="lg" bg="white">
+          <Center>
+            <SkeletonCircle size="10" />
+          </Center>
+          <Skeleton height="20px" mt="1%" />
+          <Skeleton height="20px" mt="1%" />
+          <Skeleton height="20px" mt="1%" />
+          <Skeleton height="20px" mt="1%" />
+          <Skeleton height="20px" mt="1%" />
+        </Box>
+      </React.Fragment>
+    );
   }
-  if (userData === []) {
-    return <React.Fragment>Nothing Found</React.Fragment>;
+  if (userData === [] || userData === undefined) {
+    return (
+      <React.Fragment>
+        {" "}
+        <Center>
+          <Text> Opps! No user With such userName...</Text>
+        </Center>
+        <Center>
+          <Box
+            width={{
+              md: "50%",
+              lg: "25%",
+            }}
+            height={{
+              md: "50%",
+              lg: "25%",
+            }}
+          >
+            <Lottie animationData={Cat} loop={true} autoPlay={true} />
+          </Box>
+        </Center>
+      </React.Fragment>
+    );
   }
+  console.log(userData);
   return (
     <Box bg="#fdfaff" w="100%" p={10} alignContent={"center"}>
       {showConfetti && <Confetti width={width} height={height} />}

diff --git a/yarn.lock b/yarn.lock
@@ -2292,7 +2292,7 @@
   dependencies:
     "safe-buffer" "~5.1.1"
 
-"copy-to-clipboard@^3.3.1", "[email protected]":
+"copy-to-clipboard@^3", "copy-to-clipboard@^3.3.1", "[email protected]":
   "integrity" "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw=="
   "resolved" "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz"
   "version" "3.3.1"
@@ -4171,7 +4171,7 @@
   "resolved" "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-8.1.3.tgz"
   "version" "8.1.3"
 
-"prop-types@^15.6.2", "prop-types@^15.7.2":
+"prop-types@^15.5.8", "prop-types@^15.6.2", "prop-types@^15.7.2":
   "integrity" "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="
   "resolved" "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
   "version" "15.8.1"
@@ -4311,6 +4311,14 @@
   dependencies:
     "tween-functions" "^1.2.0"
 
+"react-copy-to-clipboard@^5.0.4":
+  "integrity" "sha512-IeVAiNVKjSPeGax/Gmkqfa/+PuMTBhutEvFUaMQLwE2tS0EXrAdgOpWDX26bWTXF3HrioorR7lr08NqeYUWQCQ=="
+  "resolved" "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.4.tgz"
+  "version" "5.0.4"
+  dependencies:
+    "copy-to-clipboard" "^3"
+    "prop-types" "^15.5.8"
+
 "react-dom@*", "react-dom@^16.13.1 || ^17.0.1", "react-dom@^16.8.0  || ^17.0.0", "react-dom@^16.8.0 || ^17.0.0", "react-dom@^16.8.0 || 17.x", "react-dom@^17.0.2", "react-dom@>=16", "react-dom@>=16.8 || ^17.0.0 || ^18.0.0", "react-dom@>=16.8.6", "[email protected]":
   "integrity" "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA=="
   "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz"