feat: show qr code modal

thedevs-network · Jul 21, 2020 · 362b5ee · 362b5ee
1 parent 1fe218e
commit 362b5ee
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 12 deletions.
diff --git a/source/History/Modal.tsx b/source/History/Modal.tsx
@@ -2,7 +2,12 @@ import tw, {css} from 'twin.macro';
 import QRCode from 'qrcode.react';
 import React from 'react';
 
-const Modal: React.FC = () => {
+type Props = {
+  link: string;
+  setModalView: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+const Modal: React.FC<Props> = ({link, setModalView}) => {
   return (
     <>
       <div
@@ -25,11 +30,12 @@ const Modal: React.FC = () => {
           ]}
         >
           <div>
-            <QRCode size={196} value="%link%" />
+            <QRCode size={196} value={link} />
           </div>
 
           <div tw="flex justify-center mt-10">
             <button
+              onClick={(): void => setModalView(false)}
               css={[
                 tw`relative flex items-center justify-center h-10 px-8 py-0 mx-4 my-0 overflow-hidden text-sm leading-none text-center text-black transition-all ease-out cursor-pointer`,
 

diff --git a/source/History/Table.tsx b/source/History/Table.tsx
@@ -1,11 +1,14 @@
 import tw, {css, styled} from 'twin.macro';
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 
-import {useShortenedLinks} from '../contexts/shortened-links-context';
+import {
+  useShortenedLinks,
+  ShortenedLinksActionTypes,
+} from '../contexts/shortened-links-context';
 import {MAX_HISTORY_ITEMS} from '../Background/constants';
 
 import Icon from '../components/Icon';
-// import Modal from './Modal';
+import Modal from './Modal';
 
 const StyledTd = styled.td`
   ${tw`relative flex items-center px-0 py-4`}
@@ -33,7 +36,17 @@ const StyledIcon = styled(Icon)`
 `;
 
 const Table: React.FC = () => {
-  const [state] = useShortenedLinks();
+  const [shortenedLinksState, shortenedLinksDispatch] = useShortenedLinks();
+  const [QRView, setQRView] = useState<boolean>(false);
+
+  function handleQRCodeViewToggle(selectedItemId: string): void {
+    shortenedLinksDispatch({
+      type: ShortenedLinksActionTypes.TOGGLE_QRCODE_MODAL,
+      payload: selectedItemId,
+    });
+
+    setQRView(true);
+  }
 
   return (
     <>
@@ -124,8 +137,8 @@ const Table: React.FC = () => {
               </tr>
             </thead>
             <tbody tw="flex flex-col flex-auto">
-              {!(state.total === 0) ? (
-                state.items.map((item) => {
+              {!(shortenedLinksState.total === 0) ? (
+                shortenedLinksState.items.map((item) => {
                   return (
                     <tr
                       key={item.id}
@@ -233,9 +246,19 @@ const Table: React.FC = () => {
                       <StyledTd>
                         <div tw="flex items-center justify-end">
                           <StyledIcon className="icon" name="copy" />
-                          <StyledIcon className="icon" name="qrcode" />
+                          <StyledIcon
+                            onClick={(): void =>
+                              handleQRCodeViewToggle(item.id)
+                            }
+                            className="icon"
+                            name="qrcode"
+                          />
                         </div>
-                        {/* <Modal /> */}
+                        {QRView &&
+                          shortenedLinksState.selected !== null &&
+                          shortenedLinksState.selected.id === item.id && (
+                            <Modal link={item.link} setModalView={setQRView} />
+                          )}
                       </StyledTd>
                     </tr>
                   );

diff --git a/source/contexts/shortened-links-context.tsx b/source/contexts/shortened-links-context.tsx
@@ -5,6 +5,7 @@ import {UserShortenedLinkStats} from '../Background';
 
 export enum ShortenedLinksActionTypes {
   HYDRATE_SHORTENED_LINKS = 'hydrate-shortened-links',
+  TOGGLE_QRCODE_MODAL = 'toggle-qrcode-modal',
 }
 
 type HYDRATE_SHORTENED_LINKS = {
@@ -15,12 +16,17 @@ type HYDRATE_SHORTENED_LINKS = {
   };
 };
 
-type Action = HYDRATE_SHORTENED_LINKS;
+type TOGGLE_QRCODE_MODAL = {
+  type: ShortenedLinksActionTypes.TOGGLE_QRCODE_MODAL;
+  payload: string;
+};
+
+type Action = HYDRATE_SHORTENED_LINKS | TOGGLE_QRCODE_MODAL;
 
 type InitialValues = {
   items: UserShortenedLinkStats[];
   total: number;
-  selected: string | null;
+  selected: UserShortenedLinkStats | null;
 };
 
 const initialValues: InitialValues = {
@@ -46,6 +52,13 @@ const shortenedLinksReducer = (state: State, action: Action): State => {
       };
     }
 
+    case ShortenedLinksActionTypes.TOGGLE_QRCODE_MODAL: {
+      const selected: null | UserShortenedLinkStats =
+        state.items.filter((item) => item.id === action.payload)[0] || null;
+
+      return {...state, selected};
+    }
+
     default:
       return state;
   }