FeaturePanel: small refactorings of FHRS (#181)

zbycz · Sep 10, 2023 · 974d1ac · 974d1ac · vercel · Sep 10, 2023
1 parent 3c83713
commit 974d1ac
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 37 deletions.
diff --git a/src/components/FeaturePanel/renderers/FoodHygieneRatingScheme.tsx b/src/components/FeaturePanel/renderers/FoodHygieneRatingScheme.tsx
@@ -1,24 +1,9 @@
 import React, { useEffect, useState } from 'react';
-import { Typography } from '@material-ui/core';
+import { Tooltip, Typography } from '@material-ui/core';
 import { Restaurant } from '@material-ui/icons';
+import styled from 'styled-components';
 import { getEstablishmentRatingValue } from '../../../services/fhrsApi';
 
-interface StarRatingProps {
-  stars: number;
-  maxStars: number;
-}
-
-const StarRating = ({ stars, maxStars }: StarRatingProps) => {
-  const starArray = new Array(maxStars).fill(0);
-  return (
-    <div>
-      {starArray.map((_, i) => (
-        <span>{i < stars ? '★' : '☆'}</span>
-      ))}
-    </div>
-  );
-};
-
 const useLoadingState = () => {
   const [rating, setRating] = useState<number>();
   const [error, setError] = useState<string>();
@@ -43,6 +28,26 @@ const useLoadingState = () => {
   return { rating, error, loading, startRating, finishRating, failRating };
 };
 
+const Wrapper = styled.div`
+  display: flex;
+  gap: 0.5rem;
+
+  .MuiRating-root {
+    margin-top: -2px;
+  }
+`;
+
+const RatingRound = styled.span`
+  border-radius: 50%;
+  background-color: #1a6500;
+  color: #fff;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: bold;
+  position: relative;
+  top: -1px;
+`;
+
 export const FoodHygieneRatingSchemeRenderer = ({ v }) => {
   const { rating, error, loading, startRating, finishRating, failRating } =
     useLoadingState();
@@ -60,15 +65,6 @@ export const FoodHygieneRatingSchemeRenderer = ({ v }) => {
     loadData();
   }, []);
 
-  const linkStyle: React.CSSProperties = {
-    display: 'flex',
-    alignItems: 'center',
-    gap: '0.5rem',
-  };
-  const pStyle: React.CSSProperties = {
-    marginBlock: '0',
-  };
-
   return (
     <>
       {loading ? (
@@ -80,20 +76,28 @@ export const FoodHygieneRatingSchemeRenderer = ({ v }) => {
       ) : (
         <>
           <Restaurant fontSize="small" />
-          {Number.isNaN(rating) || error ? (
-            <Typography color="error">No rating available</Typography>
-          ) : (
-            <>
+          <Wrapper>
+            <Tooltip
+              arrow
+              interactive
+              title="Food Hygiene Rating Scheme (only in UK)"
+              placement="bottom-end"
+            >
               <a
                 href={`https://ratings.food.gov.uk/business/${v}`}
-                title="Food Hygiene Rating Scheme"
-                style={linkStyle}
+                className="colorInherit"
               >
-                <p style={pStyle}>FHRS</p>
-                <StarRating stars={rating} maxStars={5} />
+                FHRS{' '}
+                {Number.isNaN(rating) || error ? (
+                  <Typography color="textSecondary">
+                    (Error while fetching rating)
+                  </Typography>
+                ) : (
+                  <RatingRound>{rating}</RatingRound>
+                )}
               </a>
-            </>
-          )}
+            </Tooltip>
+          </Wrapper>
         </>
       )}
     </>

diff --git a/src/helpers/theme.tsx b/src/helpers/theme.tsx
@@ -24,6 +24,8 @@ const lightTheme = createMuiTheme({
     },
     text: {
       panelHeading: 'rgba(0, 0, 0, 0.7)',
+      primary: '#000',
+      primaryInvert: '#fff',
     },
     appBackground: '#f8f4f0',
     panelBackground: '#fafafa',
@@ -52,6 +54,8 @@ const darkTheme = createMuiTheme({
     },
     text: {
       panelHeading: 'rgba(255, 255, 255, 0.85)',
+      primary: '#fff',
+      primaryInvert: '#000',
     },
     appBackground: grey['900'],
     panelBackground: grey['800'],

diff --git a/src/services/__tests__/fhrsApi.test.ts b/src/services/__tests__/fhrsApi.test.ts
@@ -41,7 +41,7 @@ describe('fetchRating', () => {
       });
 
     const rating = await getEstablishmentRatingValue(269382);
-    expect(rating).toBeLessThanOrEqual(5);
+    expect(rating).toBe(5);
     fetchJsonMock.mockRestore();
   });
 });