Save signature in localStorage and add button to clear it

vtemian · Mar 26, 2020 · d205f6a · d205f6a
1 parent 74da487
commit d205f6a
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
     "eject": "react-scripts eject"
   },
   "engines": {
-    "node": "12.15.0"
+    "node": "^12.15.0"
   },
   "eslintConfig": {
     "extends": "react-app"

diff --git a/src/components/Button.js b/src/components/Button.js
@@ -12,4 +12,18 @@ const Button = styled.button`
   padding: ${spacing.small} ${spacing.large};
 `;
 
-export default Button;
+const LightButton = styled.button`
+  color: ${color.black};
+  background-color: ${color.white};
+  border: 1px solid ${color.black};
+  cursor: pointer;
+  padding: ${spacing.extrasmall} ${spacing.small};
+  border-radius: ${borderRadius.small};
+  font-size: ${fontSize.medium};
+  &:hover{
+    background-color: ${color.black};
+    color: ${color.white};
+  }
+`;
+
+export { LightButton, Button };
diff --git a/src/components/Section.js b/src/components/Section.js
@@ -14,7 +14,7 @@ const Section = styled.div`
 Section.propTypes = {
   align: PropTypes.oneOf(["left", "right", "center"]),
   textSize: PropTypes.oneOf(["small", "medium", "large", "huge"]),
-  bottom: PropTypes.oneOf(["initial", "small", "medium", "large"]),
+  bottom: PropTypes.oneOf(["initial", "extrasmall", "small", "medium", "large"]),
 };
 
 Section.defaultProps = {

diff --git a/src/helpers/constants.js b/src/helpers/constants.js
@@ -4,6 +4,7 @@ export const color = {
 };
 
 export const spacing = {
+  extrasmall: "5px",
   small: "15px",
   medium: "35px",
   large: "65px",

diff --git a/src/pages/Main.js b/src/pages/Main.js
@@ -9,7 +9,7 @@ import downloadPDF from "../helpers/utils";
 
 import Link from "../components/Link";
 import Title from "../components/Title";
-import Button from "../components/Button";
+import { Button, LightButton } from "../components/Button";
 import Wrapper from "../components/Wrapper";
 import Section from "../components/Section";
 import TextField from "../components/TextField";
@@ -53,7 +53,7 @@ const CSSReset = createGlobalStyle`
 
 function Main() {
   const [isGenerated, setIsGenerated] = useState(false);
-  const [canvasWidth, setCanvasWidth] = useState(Math.min(window.screen.width, 760));
+  const [canvasSize, setCanvasSize] = useState({width: Math.min(window.screen.width, 760), height: 200});
 
   const emptyValues = {
     nume: undefined,
@@ -87,6 +87,7 @@ function Main() {
     deplasare_scurta: false,
     deplasare_animale: false,
     deplasare_urgenta: false,
+    signature: null,
   };
 
   const [initialValues, saveFormValues] = useLocalStorage('cachedForm', emptyValues);
@@ -110,13 +111,21 @@ function Main() {
 
   useEffect(() => {
     const onResizeWindow =() => {
-      setCanvasWidth(window.screen.width);
+      setCanvasSize({width: Math.min(window.screen.width, 760), height: canvasSize.height});
     };
     window.addEventListener('resize', onResizeWindow);
     return () => window.removeEventListener('resize', onResizeWindow)
   }, [])
 
-  const signature = useRef();
+  let signatureRef = useRef();
+  useEffect(() => {
+    signatureRef.fromDataURL(form.signature, canvasSize);
+  });
+
+  const onClearSignature = () => {
+    signatureRef.clear();
+    setForm({signature: null});
+  };
 
   return (
     <Wrapper>
@@ -192,23 +201,26 @@ function Main() {
         </CheckboxLabel>
       </Section>
 
-      <Section>
+      <Section bottom="extrasmall">
         Semnatura
         <Signature>
           <SignatureCanvas
             penColor={color.black}
-            ref={signature}
-            canvasProps={{width: canvasWidth, height: 200}}
+            onEnd={(e) => setForm({signature: signatureRef.toDataURL()})}
+            ref={(ref) => signatureRef = ref}
+            canvasProps={canvasSize}
           />
         </Signature>
-
+      </Section>
+      <Section>
+        <LightButton onClick={onClearSignature}>Șterge semnătura</LightButton>
       </Section>
 
       <Section align="center">
         <Button onClick={() => setIsGenerated(true)}>Descarcă PDF</Button>
 
         {isGenerated ? (
-          <PDFDownloadLink document={<Renderer form={form} signature={signature?.current?.toDataURL()} />}
+          <PDFDownloadLink document={<Renderer form={form} />}
                            fileName="declaratie_proprie_raspundere.pdf">
             {({ url }) => {
               url && downloadPDF(url) && setIsGenerated(false);

diff --git a/src/pdf/Renderer.js b/src/pdf/Renderer.js
@@ -49,7 +49,7 @@ const styles = StyleSheet.create({
   },
 });
 
-function Renderer({ form, signature }) {
+function Renderer({ form }) {
   const canSeeDomiciliu = form?.domiciliu_localitate && form?.domiciliu_judet && form?.domiciliu_strada;
 
   return (
@@ -167,9 +167,9 @@ function Renderer({ form, signature }) {
           </View>
           <View>
             <Text style={styles.text}>Semnatura</Text>
-            <View style={styles.signature} >
-              <Image src={signature} />
-            </View>
+              <View style={styles.signature} >
+                {form.signature && <Image src={form.signature} />}
+              </View>
           </View>
         </View>
       </Page>