Merge pull request #93 from muniz95/#89-simulate-calls

#89 simulate calls

package.json

@@ -85,6 +85,8 @@
     "predeploy": "npm run build"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/plugin-transform-private-property-in-object": "^7.23.4",
     "@babel/preset-env": "^7.23.3",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",

src/components/VoiceCall/index.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import service from "services/call.service";
+import S from "./styled";
+import { formatTime } from "utils/helpers";
+
+interface IProps {
+  type: "outgoing" | "received"
+  contactName: string;
+  phone: string;
+}
+
+const VoiceCall = ({ contactName, type, phone }: IProps) => {
+  const { t } = useTranslation();
+  const currentTimer = React.useRef<NodeJS.Timeout>();
+  const [isCallActive, setIsCallActive] = React.useState(false);
+  const [isConnecting, setIsConnecting] = React.useState(false);
+  const [callTime, setCallTime] = React.useState<number>(0);
+  const [callStartDate, setCallStartDate] = React.useState<number>(0);
+
+  const startCall = () => {
+    setIsConnecting(true);
+    setIsCallActive(true);
+    setTimeout(() => {
+      currentTimer.current = setInterval(() => {
+        setCallTime(state => state += 1);
+      }, 1000);
+      setCallStartDate(Date.now());
+      setIsConnecting(false);
+    }, 3000)
+  }
+
+  const endCall = () => {
+    clearInterval(currentTimer.current);
+    setIsCallActive(false);
+    service.insertCallRecord({
+      contactName,
+      startDate: callStartDate,
+      endDate: Date.now(),
+      phone,
+      type
+    });
+  }
+
+  return (
+    <>
+      <S.MainContainer>
+      {
+        isCallActive
+          ? isConnecting ? `Calling ${contactName}...` : formatTime(callTime)
+          : formatTime(callTime)
+      }      
+      </S.MainContainer>
+      <S.ButtonContainer>
+        {
+          isCallActive
+            ? <button onClick={() => endCall()}>{t("end")}</button>
+            : <button onClick={() => startCall()}>{t("start")}</button>
+        }
+      </S.ButtonContainer>
+    </>
+  )
+}
+
+export default VoiceCall;

src/components/VoiceCall/styled.ts

@@ -0,0 +1,46 @@
+import styled from "styled-components";
+
+export const MainContainer = styled.div`
+  height: 80%;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
+  overflow: auto;
+`;
+
+export const ButtonContainer = styled.div`
+  height: 20%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const ResultsBox = styled.div`
+  min-height: 30%;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+`;
+
+export const Item = styled.button`
+  min-height: 30%;
+  width: 100%;
+  border: none;
+
+  &:active, &:focus {
+    font-weight: bold;
+    background-color: #000000c6;
+    color: #ffffffc6;
+  }
+`;
+
+const S = {
+  ButtonContainer,
+  MainContainer,
+  Item,
+  ResultsBox,
+}
+
+export default S;

src/interfaces/callRecord.ts

@@ -0,0 +1,9 @@
+import { StorageEntity } from "./storageEntity";
+
+export interface CallRecord extends StorageEntity {
+  contactName: string
+  type: "received" | "outgoing"
+  phone: string
+  startDate: number
+  endDate: number
+}

src/interfaces/storageEntity.ts

@@ -1,4 +1,6 @@
-export interface StorageEntity {
-  id: string
-  date: string
+import { generateId } from "utils/helpers"
+
+export class StorageEntity {
+  id?: string = generateId().toString();
+  date?: number = Date.now();
 }

src/locales/en/global.json

@@ -6,5 +6,7 @@
   "no": "No",
   "done": "Done",
   "play": "Play",
-  "call": "Call"
+  "call": "Call",
+  "start": "Start",
+  "end": "End"
 }

src/redux/actions/profile.ts

@@ -1,4 +1,4 @@
-import { Profile } from "@interfaces/profile";
+import { Profile } from "interfaces/profile";
 
 export const setCurrentProfile = (payload: Profile) =>
   ({ type: "SET_CURRENT_PROFILE", payload });

src/services/call.service.ts

@@ -0,0 +1,12 @@
+import { CallRecord } from "interfaces/callRecord";
+import db from "../utils/db";
+
+export const insertCallRecord = (callRecord: CallRecord) => {
+  db.insert<CallRecord>("callRecords", callRecord);
+}
+
+const service = {
+  insertCallRecord,
+}
+
+export default service;

src/utils/db.ts

@@ -10,14 +10,16 @@ export const isOn = () => {
 export const checkDb = () =>
   Boolean(localStorage.getItem("simNumbers")) &&
   Boolean(localStorage.getItem("profiles")) &&
-  Boolean(localStorage.getItem("contacts"));
+  Boolean(localStorage.getItem("contacts")) &&
+  Boolean(localStorage.getItem("callRecords"));
 
 export const initDb = () => {
   localStorage.setItem("contacts", JSON.stringify(seed.contacts));
   localStorage.setItem("simNumbers", JSON.stringify(seed.simNumbers));
   localStorage.setItem("profiles", JSON.stringify(seed.profiles));
   localStorage.setItem("color", defaults.color);
   localStorage.setItem("currentProfile", JSON.stringify(defaults.profile));
+  localStorage.setItem("callRecords", "[]");
 }
 
 export function getPlain(key: string) {
@@ -35,9 +37,13 @@ export function set<T>(key: string, value: T) {
 }
 
 export function insert<T>(key: string, item: T) {
-  const collection = get<T[]>(key);
-  collection.push(item);
-  localStorage.setItem(key, JSON.stringify(collection));
+  try {
+    const collection = get<T[]>(key);
+    collection.push(item);
+    localStorage.setItem(key, JSON.stringify(collection));    
+  } catch (error) {
+    throw error;
+  }
 }
 
 export function update<T extends StorageEntity>(key: string, item: T) {

src/utils/helpers.ts

@@ -7,14 +7,17 @@ export const isPlainObject = (value: any) =>
   typeof value === 'boolean' ||
   typeof value === 'object';
 
-export const generateId = () => {
-  crypto.randomUUID ? crypto.randomUUID() : crypto.getRandomValues(new Uint16Array(16))
-}
+export const generateId = () =>
+  crypto.randomUUID ? crypto.randomUUID() : crypto.getRandomValues(new Uint16Array(16));
+
+export const formatTime = (seconds: number) =>
+  (seconds - (seconds %= 60)) / 60 + (9 < seconds ? ':' : ':0') + seconds;
 
 const helpers = {
   isBetween,
   isPlainObject,
   generateId,
+  formatTime,
 };
 
 export default helpers;

src/views/PhoneBook/PhoneBookAddName/index.tsx

@@ -29,8 +29,6 @@ const PhoneBookAddName = () => {
       service.insertContact({
         name,
         number: Date.now().toString(),
-        id: crypto.randomUUID(),
-        date: Date.now().toLocaleString(),
         isServiceNumber: false,
       });
       vibration.success();