counterweight/fullstackopen-notes
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

completed 1.11

Browse source
This commit is contained in:
Pablo Martin 2025-05-20 12:06:36 +02:00
parent 12163f9a90
commit c2ef1aaa7f
2 changed files with 50 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

2
parts/1/notes.md
View file

@ -12,7 +12,7 @@ Exercises:
* [X] 1.8 * [X] 1.8
* [X] 1.9 * [X] 1.9
* [X] 1.10 * [X] 1.10
* [ ] 1.11 * [X] 1.11
* [ ] 1.12 * [ ] 1.12
* [ ] 1.13 * [ ] 1.13
* [ ] 1.14 * [ ] 1.14

82
parts/1/uniCafe/src/App.jsx
View file

@ -8,16 +8,50 @@ const Button = (props) => {
return <button onClick={props.onClickCallback}>{props.buttonText} </button>; return <button onClick={props.onClickCallback}>{props.buttonText} </button>;
}; };
const StatisticDisplay = (props) => { const StatisticsTable = (props) => {
if (props.isThereAnyFeedback) {
return (
<>
<table>
<tbody>
<StatisticTableRowDisplay statisticName="good" statisticValue={props.good} />
<StatisticTableRowDisplay statisticName="neutral" statisticValue={props.neutral} />
<StatisticTableRowDisplay statisticName="bad" statisticValue={props.bad} />
<StatisticTableRowDisplay
statisticName="count"
statisticValue={props.totalCount}
/>
<StatisticTableRowDisplay
statisticName="average"
statisticValue={props.average}
/>
<StatisticTableRowDisplay
statisticName="positive"
statisticValue={props.percentagePositive * 100 + "%"}
/>
</tbody>
</table>
</>
);
} else {
return (
<>
<p>No feedback given.</p>
</>
);
}
}
const StatisticTableRowDisplay = (props) => {
return ( return (
<p> <tr>
{props.statisticName} {props.statisticValue} <td>{props.statisticName}</td>
</p> <td>{props.statisticValue}</td>
</tr>
); );
}; };
const App = () => { const App = () => {
// save clicks of each button to its own state
const [good, setGood] = useState(0); const [good, setGood] = useState(0);
const [neutral, setNeutral] = useState(0); const [neutral, setNeutral] = useState(0);
const [bad, setBad] = useState(0); const [bad, setBad] = useState(0);
@ -36,33 +70,14 @@ const App = () => {
return computeTotalCount() !== 0; return computeTotalCount() !== 0;
}; };
let feedbackSection; const feedbackStatisticsSnapshot = {
if (isThereAnyFeedback()) { good: good,
feedbackSection = ( neutral: neutral,
<> bad: bad,
<StatisticDisplay statisticName="good" statisticValue={good} /> totalCount: computeTotalCount(),
<StatisticDisplay statisticName="neutral" statisticValue={neutral} /> average: computeAverage(),
<StatisticDisplay statisticName="bad" statisticValue={bad} /> percentagePositive: computePercentagePositive(),
<StatisticDisplay isThereAnyFeedback: isThereAnyFeedback()
statisticName="count"
statisticValue={computeTotalCount()}
/>
<StatisticDisplay
statisticName="average"
statisticValue={computeAverage()}
/>
<StatisticDisplay
statisticName="positive"
statisticValue={computePercentagePositive() * 100 + "%"}
/>
</>
);
} else {
feedbackSection = (
<>
<p>No feedback given.</p>
</>
);
} }
return ( return (
@ -87,7 +102,8 @@ const App = () => {
buttonText="bad" buttonText="bad"
/> />
<Header headerText="statistics" /> <Header headerText="statistics" />
{feedbackSection}
<StatisticsTable {...feedbackStatisticsSnapshot}/>
</div> </div>
); );
// Buttons // Buttons