From a7cee790383a4c5af4994d17f4953b0ff78be029 Mon Sep 17 00:00:00 2001 From: davinnchii Date: Mon, 21 Aug 2023 14:17:05 +0200 Subject: [PATCH 1/4] Add task solution --- src/App.jsx | 13 ++++++------- src/components/Person/Person.jsx | 12 +++++++++++- 2 files changed, 17 insertions(+), 8 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index dcf8509c8..262d87747 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,5 +1,6 @@ import React from 'react'; import './App.scss'; +import { Person } from './components/Person/Person'; export const misha = { name: 'Misha', @@ -25,13 +26,11 @@ export const alex = { export const App = () => (
-
-

My name is Misha

-

I am 37

-

Natasha is my wife

-
+ + + -
+ {/*

My name is Olya

Maksym is my husband

@@ -40,6 +39,6 @@ export const App = () => (

My name is Alex

I am 25

I am not married

-
+ */}
); diff --git a/src/components/Person/Person.jsx b/src/components/Person/Person.jsx index eccf156a3..25689ca33 100644 --- a/src/components/Person/Person.jsx +++ b/src/components/Person/Person.jsx @@ -1 +1,11 @@ -// export const Person = ({ person }) => (); +export const Person = ({ person }) => ( +
+

{`My name is ${person.name}`}

+ {person.age &&

{`I am ${person.age}`}

} +

+ {person.isMarried + ? (`${person.partnerName} is my ${person.sex === 'm' ? 'wife' : 'husband'}`) + : (`I am not married`)} +

+
+); From 0cadbed08bde8c3fd8ac798dcdab10431ae9d364 Mon Sep 17 00:00:00 2001 From: davinnchii Date: Mon, 21 Aug 2023 14:17:55 +0200 Subject: [PATCH 2/4] Updated README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 3424ccb86..b46ea6048 100644 --- a/README.md +++ b/README.md @@ -12,4 +12,4 @@ and use it 3 times inside the `App` instead of static markup. ## Instructions - Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline). - Open one more terminal and run tests with `npm test` to ensure your solution is correct. -- Replace `` with your Github username in the [DEMO LINK](https://.github.io/react_person/) and add it to the PR description. +- Replace `` with your Github username in the [DEMO LINK](davinnchii.github.io/react_person/) and add it to the PR description. From 56e9008c369ee567d706955d7969b10cf627c18d Mon Sep 17 00:00:00 2001 From: daviinnchi Date: Tue, 22 Aug 2023 21:27:52 +0100 Subject: [PATCH 3/4] Refactored code --- src/App.jsx | 11 --------- src/components/Person/Person.jsx | 39 +++++++++++++++++++++++--------- 2 files changed, 28 insertions(+), 22 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 262d87747..c09fddf21 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -29,16 +29,5 @@ export const App = () => ( - - {/*
-

My name is Olya

-

Maksym is my husband

-
- -
-

My name is Alex

-

I am 25

-

I am not married

-
*/} ); diff --git a/src/components/Person/Person.jsx b/src/components/Person/Person.jsx index 25689ca33..03fd8e172 100644 --- a/src/components/Person/Person.jsx +++ b/src/components/Person/Person.jsx @@ -1,11 +1,28 @@ -export const Person = ({ person }) => ( -
-

{`My name is ${person.name}`}

- {person.age &&

{`I am ${person.age}`}

} -

- {person.isMarried - ? (`${person.partnerName} is my ${person.sex === 'm' ? 'wife' : 'husband'}`) - : (`I am not married`)} -

-
-); +export const Person = ({ person }) => { + const { + name, + age, + isMarried, + partnerName, + sex, + } = person; + const partnerSex = sex === 'm' ? 'wife' : 'husband'; + + return ( +
+

+ {`My name is ${name}`} +

+ {age && ( +

+ {`I am ${age}`} +

+ )} +

+ {isMarried + ? (`${partnerName} is my ${partnerSex}`) + : (`I am not married`)} +

+
+ ); +}; From d27d97026c3f48bcde335f1a6eed2a3f0a422d0d Mon Sep 17 00:00:00 2001 From: daviinnchi Date: Wed, 23 Aug 2023 11:36:01 +0100 Subject: [PATCH 4/4] Refactored code v2 --- src/components/Person/Person.jsx | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/src/components/Person/Person.jsx b/src/components/Person/Person.jsx index 03fd8e172..627373632 100644 --- a/src/components/Person/Person.jsx +++ b/src/components/Person/Person.jsx @@ -6,22 +6,26 @@ export const Person = ({ person }) => { partnerName, sex, } = person; - const partnerSex = sex === 'm' ? 'wife' : 'husband'; + const parterMarriageStatus = sex === 'm' + ? 'wife' + : 'husband'; return (

{`My name is ${name}`}

- {age && ( -

- {`I am ${age}`} -

+ + {Boolean(age) && ( +

+ {`I am ${age}`} +

)}

{isMarried - ? (`${partnerName} is my ${partnerSex}`) - : (`I am not married`)} + ? `${partnerName} is my ${parterMarriageStatus}` + : `I am not married` + }

);