Skip to content

Commit 3078b22

Browse files
AgustinAllamanoCostaAgustinAllamanoCosta
committed
feat: 🎸 add spiner in inbox list
1 parent b95c400 commit 3078b22

File tree

3 files changed

+55
-39
lines changed

3 files changed

+55
-39
lines changed

‎index.html‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,18 @@
2424
name="theme-color"
2525
content="#070F2B"
2626
/>
27-
<meta name="apple-mobile-web-app-capable" content="yes">
28-
<meta name="mobile-web-app-capable" content="yes">
29-
<meta name="viewport" content="width=device-width, user-scalable=no" />
27+
<meta
28+
name="apple-mobile-web-app-capable"
29+
content="yes"
30+
/>
31+
<meta
32+
name="mobile-web-app-capable"
33+
content="yes"
34+
/>
35+
<meta
36+
name="viewport"
37+
content="width=device-width, user-scalable=no"
38+
/>
3039
</head>
3140
<body>
3241
<div id="root"></div>

‎src/components/itemButton/ItemButton.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { styled } from "styled-components";
2-
import { useRef, memo, useState } from "react";
3-
import faPlus from "../../assets/icons/faPlus.svg";
4-
import { THEME_ONE } from "../../constants/colors";
5-
import { ENTER_KEY_COE } from "../../constants/keys";
1+
import { styled } from 'styled-components';
2+
import { useRef, memo, useState } from 'react';
3+
import faPlus from '../../assets/icons/faPlus.svg';
4+
import { THEME_ONE } from '../../constants/colors';
5+
import { ENTER_KEY_COE } from '../../constants/keys';
66

77
type ItemAddButtonProps = {
88
action: (event: any) => void;
@@ -45,13 +45,13 @@ export const ItemAddButton = memo(
4545
data-cy={`task-add-button-icon`}
4646
onClick={focusInput}
4747
src={faPlus}
48-
alt={"Plus"}
48+
alt={'Plus'}
4949
/>
5050
<AddItemInput
5151
ref={newTaskInput}
5252
disabled={disable}
5353
data-cy={`task-add-button-input`}
54-
placeholder={"Add Task"}
54+
placeholder={'Add Task'}
5555
onBlur={(e) => {
5656
action(e);
5757
setShowCharacterLimit(false);
@@ -68,11 +68,11 @@ export const ItemAddButton = memo(
6868
)}
6969
</ItemContent>
7070
);
71-
}
71+
},
7272
);
7373

7474
const CharacterCount = styled.span`
75-
font-family: "InerNormal";
75+
font-family: 'InerNormal';
7676
margin-left: 10px;
7777
font-weight: 550;
7878
`;
@@ -91,7 +91,7 @@ const ItemContent = styled.div`
9191

9292
const AddItemInput = styled.input`
9393
border: 0px;
94-
font-family: "InerNormal";
94+
font-family: 'InerNormal';
9595
font-weight: 600;
9696
background-color: ${THEME_ONE.cardBackGround};
9797
color: ${THEME_ONE.fontColor};

‎src/components/itemList/ItemList.tsx‎

Lines changed: 33 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
1-
import { styled } from "styled-components";
2-
import { CardTitle } from "../cardWithTile/CardWithTitle";
3-
import { useContext, useState } from "react";
4-
import { ItemAddButton } from "../itemButton/ItemButton";
5-
import { ItemWithActions } from "../itemWithActions/ItemWithActions";
6-
import { TaskInformationContext } from "../../contexts/taskContext";
7-
import { Task } from "../../types/types";
8-
import { THEME_ONE } from "../../constants/colors";
9-
import { SIZE } from "../../constants/size";
10-
import { UserInformationContext } from "../../contexts/userContext";
11-
import { EventContext } from "../../contexts/eventContext";
12-
import { SUBSCRIBER_NAMES } from "../useEvent/useEvent";
1+
import { styled } from 'styled-components';
2+
import { CardTitle } from '../cardWithTile/CardWithTitle';
3+
import { useContext, useState } from 'react';
4+
import { ItemAddButton } from '../itemButton/ItemButton';
5+
import { ItemWithActions } from '../itemWithActions/ItemWithActions';
6+
import { TaskInformationContext } from '../../contexts/taskContext';
7+
import { Task } from '../../types/types';
8+
import { THEME_ONE } from '../../constants/colors';
9+
import { SIZE } from '../../constants/size';
10+
import { UserInformationContext } from '../../contexts/userContext';
11+
import { EventContext } from '../../contexts/eventContext';
12+
import { SUBSCRIBER_NAMES } from '../useEvent/useEvent';
13+
import { Spiner } from '../loadingSpiner/Spiner';
1314

1415
type ItemListProps = {
1516
id?: string;
@@ -21,18 +22,18 @@ const ItemList = ({ id }: ItemListProps): React.JSX.Element => {
2122
const userInformation = useContext(UserInformationContext);
2223
const { eventBus } = useContext(EventContext);
2324

24-
const [value, setValue] = useState<string>("");
25+
const [value, setValue] = useState<string>('');
2526
const activeTask = itemsInformation.getActiveTaskToMap();
2627
const inboxToMap = itemsInformation.getInboxTaskToMap();
2728

2829
const buttonAdd = (event: any) => {
29-
if (event.target.value !== "") {
30-
itemsInformation.addNewTask(event.target.value, "");
31-
setValue("");
30+
if (event.target.value !== '') {
31+
itemsInformation.addNewTask(event.target.value, '');
32+
setValue('');
3233
eventBus.publish({
3334
name: SUBSCRIBER_NAMES.METRICS,
3435
data: {
35-
name: "addItem",
36+
name: 'addItem',
3637
userId: userInformation.userData?.id,
3738
taskLenght: event.target.value.lenght,
3839
},
@@ -43,7 +44,7 @@ const ItemList = ({ id }: ItemListProps): React.JSX.Element => {
4344
const buttonAddSplitTask = (
4445
newTaskOne: string,
4546
newTaskTwo: string,
46-
parentTaskId: string
47+
parentTaskId: string,
4748
) => {
4849
const parentTask: Task | undefined =
4950
itemsInformation.getInboxTask(parentTaskId);
@@ -58,7 +59,7 @@ const ItemList = ({ id }: ItemListProps): React.JSX.Element => {
5859
eventBus.publish({
5960
name: SUBSCRIBER_NAMES.METRICS,
6061
data: {
61-
name: "splitTask",
62+
name: 'splitTask',
6263
userId: userInformation.userData?.id,
6364
taskId: parentTaskId,
6465
},
@@ -71,7 +72,7 @@ const ItemList = ({ id }: ItemListProps): React.JSX.Element => {
7172
eventBus.publish({
7273
name: SUBSCRIBER_NAMES.METRICS,
7374
data: {
74-
name: "cancelItem",
75+
name: 'cancelItem',
7576
userId: userInformation.userData?.id,
7677
taskId,
7778
},
@@ -84,7 +85,7 @@ const ItemList = ({ id }: ItemListProps): React.JSX.Element => {
8485
eventBus.publish({
8586
name: SUBSCRIBER_NAMES.METRICS,
8687
data: {
87-
name: "activeTask",
88+
name: 'activeTask',
8889
userId: userInformation.userData?.id,
8990
taskId,
9091
},
@@ -110,14 +111,20 @@ const ItemList = ({ id }: ItemListProps): React.JSX.Element => {
110111
buttonAddSplitTask(taskOne, taskTwo, item.id)
111112
}
112113
/>
113-
)
114+
),
114115
);
115116

116117
return (
117-
<InboxTaskContainer is_mobile={`${userInformation.isMobile}`} id={id}>
118-
<CardTitle title={"Inbox"} label={`total ${inboxToMap.length}`}>
118+
<InboxTaskContainer
119+
is_mobile={`${userInformation.isMobile}`}
120+
id={id}
121+
>
122+
<CardTitle
123+
title={'Inbox'}
124+
label={`total ${inboxToMap.length}`}
125+
>
119126
{itemsInformation.getIsLoading() ? (
120-
<></>
127+
<Spiner />
121128
) : (
122129
<>
123130
<ItemAddButton
@@ -149,7 +156,7 @@ const InboxContainer = styled.div`
149156

150157
const InboxTaskContainer = styled.div<{ is_mobile?: string }>`
151158
${(props) =>
152-
props.is_mobile === "true"
159+
props.is_mobile === 'true'
153160
? `
154161
height: ${SIZE.L};
155162
width: ${SIZE.L};

0 commit comments

Comments
 (0)