Merge pull request #24 from knowankit/feat/refine-ui-2

Refine image selection unsplash

Author: knowankit

package.json

@@ -1,6 +1,6 @@
 {
   "name": "email-editor",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "private": true,
   "scripts": {
     "dev": "next dev",

src/components/drop-container/create-template-button.tsx

@@ -8,6 +8,7 @@ import Tooltip from "@mui/material/Tooltip";
 import TextField from "@mui/material/TextField";
 import IconButton from "@mui/material/IconButton";
 import useTemplatesStore from "@/store/templates";
+import { v4 as uuidv4 } from "uuid";
 
 const CreateTemplateButton = () => {
   const [isOpen, setOpen] = useState(false);
@@ -26,7 +27,7 @@ const CreateTemplateButton = () => {
   };
 
   const handleCreateTemplate = () => {
-    createNewTemplate({ ...emailData, templateName });
+    createNewTemplate({ ...emailData, templateName, templateId: uuidv4() });
 
     handleClose();
   };

src/components/left-sidebar/accordions/templates/echip.tsx

@@ -1,21 +1,26 @@
 import Chip from "@mui/material/Chip";
-import Stack from "@mui/material/Stack";
-import DoneIcon from "@mui/icons-material/Done";
 import DeleteIcon from "@mui/icons-material/Delete";
+import useEmailStore from "@/store/email";
 
 interface IEChip {
   handleClick: () => void;
   handleDelete: () => void;
   template: {
-    templateName: string;
+    templateName?: string;
+    templateId?: string;
   };
 }
 
 const EChip = ({ handleClick, handleDelete, template }: IEChip) => {
+  const { emailData } = useEmailStore();
+
   return (
     <Chip
       label={template.templateName}
       onClick={handleClick}
+      color={
+        template.templateId === emailData.templateId ? "primary" : "default"
+      }
       sx={{ mr: 1 }}
       onDelete={handleDelete}
       deleteIcon={<DeleteIcon />}

src/components/left-sidebar/accordions/templates/index.tsx

@@ -6,7 +6,6 @@ import {
 import Typography from "@mui/material/Typography";
 import { useState } from "react";
 import Box from "@mui/material/Box";
-import Paper from "@mui/material/Paper";
 import Alert from "@mui/material/Alert";
 
 import useTemplatesStore from "@/store/templates";

src/components/right-sidebar/hero-attributes/settings.tsx

@@ -14,7 +14,7 @@ import { Button } from "@mui/material";
 import { useState } from "react";
 import React from "react";
 import UnsplashModel from "@/lib/ui/unsplash/model";
-
+import ImagePreview from "@/lib/ui/image-preview";
 interface ISetting {
   expanded: HeroAttributesAccordionType;
   changeTab: (value: HeroAttributesAccordionType) => void;
@@ -67,15 +67,7 @@ const Settings = ({ expanded, changeTab }: ISetting) => {
       <AccordionDetails>
         <Box>
           <Box display="flex">
-            <Box
-              sx={{
-                height: "100px",
-                width: "100px",
-                marginRight: "1rem",
-                backgroundImage: `url("${activeNode?.section.attributes["background-url"]}")`,
-                backgroundSize: "cover"
-              }}
-            />
+            <ImagePreview formData={formData} />
             <UnsplashModel
               handleImageChange={data => handleImageChange(data)}
               field="background-url"

src/hooks/useInternetConnectionStatus.tsx

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+
+const useInternetConnectionStatus = () => {
+  const [isConnected, setConnection] = useState(false);
+
+  useEffect(() => {
+    window.addEventListener("offline", () => {
+      setConnection(false);
+    });
+
+    window.addEventListener("online", () => {
+      setConnection(true);
+    });
+
+    setConnection(navigator.onLine);
+  }, []);
+
+  return [isConnected];
+};
+
+export default useInternetConnectionStatus;

src/lib/ui/image-preview/index.tsx

@@ -0,0 +1,49 @@
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+
+interface ImagePreview {
+  formData: {
+    "background-url": string;
+  };
+  height?: string;
+  width?: string;
+}
+
+const ImagePreview = ({
+  formData,
+  height = "100px",
+  width = "100px"
+}: ImagePreview) => {
+  return (
+    <Box
+      sx={{
+        height,
+        width,
+        marginRight: "1rem",
+        backgroundImage: `url("${formData["background-url"]}")`,
+        backgroundSize: "cover",
+        opacity: "0.8"
+      }}
+    >
+      <Box
+        height="inherit"
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+      >
+        <IconButton
+          aria-label="view image"
+          size="small"
+          onClick={() => {
+            alert("Show model with full image");
+          }}
+        >
+          <VisibilityIcon fontSize="small" color="info" />
+        </IconButton>
+      </Box>
+    </Box>
+  );
+};
+
+export default ImagePreview;

src/lib/ui/unsplash/model.tsx

@@ -1,26 +1,42 @@
 import { useState } from "react";
 import Dialog from "@/lib/ui/model";
 import Unsplash from "@/lib/ui/unsplash";
-import { Button } from "@mui/material";
+import { Button, Box } from "@mui/material";
 import CollectionsIcon from "@mui/icons-material/Collections";
-
+import Tooltip from "@mui/material/Tooltip";
+import useInternetConnectionStatus from "@/hooks/useInternetConnectionStatus";
 interface IUnsplashModel {
   field: string;
   handleImageChange: (data: any) => void;
 }
 
 const UnsplashModel = ({ handleImageChange, field }: IUnsplashModel) => {
   const [isOpen, setOpen] = useState(false);
+  const [isConnected] = useInternetConnectionStatus();
 
   const handleClick = () => {
     setOpen(prev => !prev);
   };
 
+  const getTitle = () => {
+    if (isConnected) return "Unsplash gallery";
+
+    return "You are not connected to the internet";
+  };
+
   return (
     <>
-      <Button startIcon={<CollectionsIcon />} onClick={handleClick}>
-        Gallery
-      </Button>
+      <Tooltip title={getTitle()} placement="top" arrow>
+        <Box component="div" display="flex">
+          <Button
+            disabled={!isConnected}
+            startIcon={<CollectionsIcon />}
+            onClick={handleClick}
+          >
+            Gallery
+          </Button>
+        </Box>
+      </Tooltip>
       <Dialog isOpen={isOpen} handleClick={handleClick} title="Image Gallery">
         <Unsplash
           handleImageChange={data => handleImageChange(data)}

src/store/email.ts

@@ -9,6 +9,7 @@ interface StoreState {
     tagName: string;
     attributes: any;
     children: any;
+    templateId?: string;
   };
   activeNode: any | null;
 }

src/store/templates.ts

@@ -9,7 +9,8 @@ interface MJMLNodeAttributes {
 }
 
 interface MJMLNode {
-  templateName: string
+  templateName?: string
+  templateId?: string;
   tagName: string;
   attributes: MJMLNodeAttributes;
   children: MJMLNode[];