added redux and redux persist

.gitignore

@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+flow.md

package.json

@@ -3,12 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@reduxjs/toolkit": "^2.2.5",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-persist": "^1.0.2",
+    "react-redux": "^9.1.2",
+    "react-router-dom": "^6.23.1",
     "react-scripts": "5.0.1",
+    "redux-persist": "^6.0.0",
+    "redux-persist-transform-filter": "^0.0.22",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

public/index.html

@@ -14,7 +14,7 @@
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

public/svg/Arrow.js

@@ -0,0 +1,21 @@
+export default function ArrowIcon({ className }) {
+  return (
+    <svg
+      viewBox="0 0 8 12"
+      height={12}
+      width={8}
+      preserveAspectRatio="xMidYMid meet"
+      className={className}
+      version="1.1"
+      x="0px"
+      y="0px"
+      enableBackground="new 0 0 8 12"
+      xmlSpace="preserve"
+    >
+      <path
+        className={className}
+        d="M2.173,1l4.584,4.725L2.142,10.34L1.039,9.237l3.512-3.512L1,2.173L2.173,1z"
+      />
+    </svg>
+  );
+}

public/svg/Attachment.js

@@ -0,0 +1,12 @@
+function AttachmentIcon({ className }) {
+  return (
+    <svg width="24" height="24" x="0" y="0" viewBox="0 0 24 24">
+      <path
+        className={className}
+        d="M1.816 15.556v.002c0 1.502.584 2.912 1.646 3.972s2.472 1.647 3.974 1.647a5.58 5.58 0 003.972-1.645l9.547-9.548c.769-.768 1.147-1.767 1.058-2.817-.079-.968-.548-1.927-1.319-2.698-1.594-1.592-4.068-1.711-5.517-.262l-7.916 7.915c-.881.881-.792 2.25.214 3.261.959.958 2.423 1.053 3.263.215l5.511-5.512c.28-.28.267-.722.053-.936l-.244-.244c-.191-.191-.567-.349-.957.04l-5.506 5.506c-.18.18-.635.127-.976-.214-.098-.097-.576-.613-.213-.973l7.915-7.917c.818-.817 2.267-.699 3.23.262.5.501.802 1.1.849 1.685.051.573-.156 1.111-.589 1.543l-9.547 9.549a3.97 3.97 0 01-2.829 1.171 3.975 3.975 0 01-2.83-1.173 3.973 3.973 0 01-1.172-2.828c0-1.071.415-2.076 1.172-2.83l7.209-7.211c.157-.157.264-.579.028-.814L11.5 4.36a.572.572 0 00-.834.018l-7.205 7.207a5.577 5.577 0 00-1.645 3.971z"
+      ></path>
+    </svg>
+  );
+}
+
+export default AttachmentIcon;

public/svg/Call.js

@@ -0,0 +1,12 @@
+function CallIcon({ className }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="40">
+      <path
+        className={className}
+        d="M14.234 11.715a.98.98 0 01-1.386 0l-1.04-1.04-1.038-1.042a.974.974 0 010-1.387l.492-.492a6.832 6.832 0 00-6.535 0l.492.492a.974.974 0 010 1.387l-1.04 1.043-1.038 1.039a.98.98 0 01-1.387 0L.71 10.675a2.454 2.454 0 010-3.468l.348-.348c3.816-3.816 10.054-3.816 13.87 0l.348.348a2.454 2.454 0 010 3.469zm0 0"
+      ></path>
+    </svg>
+  );
+}
+
+export default CallIcon;

public/svg/Camera.js

@@ -0,0 +1,41 @@
+import React from "react";
+
+export default function CameraIcon() {
+  return (
+    <svg
+      viewBox="0 0 53 53"
+      height="53"
+      width="53"
+      preserveAspectRatio="xMidYMid meet"
+      class=""
+      version="1.1"
+      x="0px"
+      y="0px"
+      enable-background="new 0 0 53 53"
+    >
+      <g>
+        <defs>
+          <circle id="camera-SVGID_1_" cx="26.5" cy="26.5" r="25.5"></circle>
+        </defs>
+        <clipPath id="camera-SVGID_2_"></clipPath>
+        <g clip-path="url(#camera-SVGID_2_)">
+          <path
+            fill="#D3396D"
+            d="M26.5-1.1C11.9-1.1-1.1,5.6-1.1,27.6h55.2C54,8.6,41.1-1.1,26.5-1.1z"
+          ></path>
+          <path
+            fill="#EC407A"
+            d="M53,26.5H-1.1c0,14.6,13,27.6,27.6,27.6s27.6-13,27.6-27.6C54.1,26.5,53,26.5,53,26.5z"
+          ></path>
+          <rect x="17" y="24.5" fill="#D3396D" width="15" height="9"></rect>
+        </g>
+      </g>
+      <g fill="#F5F5F5">
+        <path
+          id="svg-camera"
+          d="M27.795 17C28.742 17 29.634 17.447 30.2 18.206L30.5 18.609C31.066 19.368 31.958 19.815 32.905 19.815L34.2 19.815C35.746 19.815 37 21.068 37 22.615L37 32C37 34.209 35.209 36 33 36L20 36C17.791 36 16 34.209 16 32L16 22.615C16 21.068 17.254 19.815 18.8 19.815L20.095 19.815C21.042 19.815 21.934 19.368 22.5 18.609L22.8 18.206C23.366 17.447 24.258 17 25.205 17L27.795 17ZM26.5 22.25C23.601 22.25 21.25 24.601 21.25 27.5 21.25 30.399 23.601 32.75 26.5 32.75 29.399 32.75 31.75 30.399 31.75 27.5 31.75 24.601 29.399 22.25 26.5 22.25ZM26.5 24C28.433 24 30 25.567 30 27.5 30 29.433 28.433 31 26.5 31 24.567 31 23 29.433 23 27.5 23 25.567 24.567 24 26.5 24Z"
+        ></path>
+      </g>
+    </svg>
+  );
+}