Task Complete - Jaber Ahmed

BeerApp - Senior/jest.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+    preset: 'ts-jest',
+    testEnvironment: 'node',
+    setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
+    moduleDirectories: ['node_modules', 'src'],
+    collectCoverage: true,
+    collectCoverageFrom: ['src/**/*.ts', 'src/**/*.tsx'],
+    coverageReporters: ['json-summary', 'text', 'lcov'],
+    extensionsToTreatAsEsm: ['.ts'],
+    transform: {
+        '^.+\\.tsx?$': 'ts-jest',
+      },
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+};

BeerApp - Senior/package.json

@@ -8,28 +8,37 @@
     "@fontsource/roboto": "^4.5.8",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.13.0",
+    "@popperjs/core": "^2.11.8",
     "axios": "^1.4.0",
+    "leaflet": "^1.9.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-leaflet": "^4.2.1",
     "react-router-dom": "^6.11.1"
   },
   "devDependencies": {
+    "@babel/preset-typescript": "^7.23.3",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
+    "@types/leaflet": "^1.9.8",
     "@types/node": "^16.18.28",
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",
+    "jest": "^27.4.7",
     "react-scripts": "5.0.1",
+    "react-test-renderer": "^18.0.0",
+    "ts-jest": "^27.0.7",
     "typescript": "^4.9.5",
-    "typescript-plugin-css-modules": "^5.0.1"
+    "typescript-plugin-css-modules": "^5.0.1",
+    "workbox-webpack-plugin": "^7.0.0"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!axios)/\""
   },
   "eslintConfig": {
     "extends": [

BeerApp - Senior/public/service-worker.js

@@ -0,0 +1,37 @@
+// public/service-worker.js
+const CACHE_NAME = 'beer-app-cache';
+self.addEventListener('install', (event) => {
+        const urlsToCache = [
+            '/',
+            '/index.html',
+            // Add other URLs you want to cache...
+        ];
+
+        event.waitUntil(
+            caches.open(CACHE_NAME).then((cache) => {
+                return cache.addAll(urlsToCache);
+            })
+        );
+    });
+
+  self.addEventListener('fetch', (event) => {
+    event.respondWith(
+        // Try to fetch the request from the network
+        fetch(event.request).then((response) => {
+            // If the fetch is successful, clone the response and cache it
+            if (response.ok) {
+                const clone = response.clone();
+                caches.open(CACHE_NAME).then((cache) => {
+                    cache.put(event.request, clone);
+                });
+            }
+            return response;
+        }).catch(() => {
+            // If the fetch fails (e.g., when offline), try to respond with the cached version
+            return caches.match(event.request).then((cachedResponse) => {
+                return cachedResponse || new Response('', { status: 404, statusText: 'Not Found' });
+            });
+        })
+    );
+  });
+

BeerApp - Senior/src/api/beer.ts

@@ -6,6 +6,8 @@ const getBeer = (id: string) => axios.get(`${API}breweries/${id}`);
 
 const getBeerList = (params?: ApiParams) => axios.get(`${API}breweries/`, { params });
 
+const getFavouriteListByIds = (by_ids: string) => axios.get(`${API}breweries`, { params: { by_ids } });
+
 /**
  * @param size Int between 1 and 50. Default is 3.
  * @returns New promise with api call for random beer list.
@@ -22,4 +24,4 @@ const searchBeerList = (query: string, isAutoComplete = false) =>
 
 const getBeerMetaData = (params?: ApiParams) => axios.get(`${API}breweries/meta`, { params });
 
-export { getBeer, getBeerList, getRandomBeerList, searchBeerList, getBeerMetaData };
+export { getBeer, getBeerList, getRandomBeerList, searchBeerList, getBeerMetaData, getFavouriteListByIds };

BeerApp - Senior/src/components/Map/Map.jsx

@@ -0,0 +1,22 @@
+import React, { useRef } from "react";
+import { MapContainer, TileLayer } from "react-leaflet";
+import "leaflet/dist/leaflet.css";
+
+const Map = ({lat, lang}) => {
+    const mapRef = useRef(null);
+    const latitude = lat;
+    const longitude = lang;
+
+    return ( 
+      // Make sure you set the height and width of the map container otherwise the map won't show
+        <MapContainer center={[latitude, longitude]} zoom={13} ref={mapRef} style={{height: "100vh", width: "100vw"}}>
+          <TileLayer
+            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+          />
+          {/* Additional map layers or components can be added here */}
+        </MapContainer>
+    );
+  };
+
+  export default Map;

BeerApp - Senior/src/components/TopBar/index.tsx

@@ -26,7 +26,7 @@ const TopBar = (props: Props) => {
           <MenuIcon />
         </IconButton>
         <Typography variant="h6" noWrap component="div">
-          V
+          BeerWiki
         </Typography>
       </Toolbar>
     </AppBar>

BeerApp - Senior/src/index.tsx

@@ -5,13 +5,16 @@ import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeProvider } from '@emotion/react';
 import { theme } from './styles/theme';
 import './styles/global.css';
+import { registerServiceWorker } from './registerServiceWorker';
+
+registerServiceWorker();
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(
-  <React.StrictMode>
-    <CssBaseline />
-    <ThemeProvider theme={theme}>
-      <Router />
-    </ThemeProvider>
-  </React.StrictMode>
+    <React.StrictMode>
+        <CssBaseline />
+        <ThemeProvider theme={theme}>
+            <Router />
+        </ThemeProvider>
+    </React.StrictMode>
 );

BeerApp - Senior/src/registerServiceWorker.ts

@@ -0,0 +1,15 @@
+// registerServiceWorker.js or registerServiceWorker.ts
+
+export const registerServiceWorker = () => {
+    if ('serviceWorker' in navigator) {
+        navigator.serviceWorker
+            .register('/service-worker.js')
+            .then((registration) => {
+                console.log('Service Worker registered with scope:', registration.scope);
+            })
+            .catch((error) => {
+                console.error('Service Worker registration failed:', error);
+            });
+    }
+};
+

BeerApp - Senior/src/setupTests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

BeerApp - Senior/src/utils/favoritesUtils.ts

@@ -0,0 +1,14 @@
+const saveAsFavourite = (id: string, setFavourite: React.Dispatch<React.SetStateAction<string[]>>) => {
+    const favouriteList = JSON.parse(localStorage.getItem('favouriteList') || '[]');
+    if (favouriteList.indexOf(id) === -1) {
+      favouriteList.push(id);
+      localStorage.setItem('favouriteList', JSON.stringify(favouriteList));
+      setFavourite(favouriteList);
+    } else {
+      favouriteList.splice(favouriteList.indexOf(id), 1);
+      localStorage.setItem('favouriteList', JSON.stringify(favouriteList));
+      setFavourite(favouriteList);
+    }
+  };
+
+  export default saveAsFavourite;

BeerApp - Senior/src/views/Beer/Beer.module.css

@@ -0,0 +1,21 @@
+root {
+    margin: 'auto';
+    padding: '20px'
+  }
+  .title {
+    font-weight: 'bold';
+    font-size: '3rem';
+    margin-top: '10px';
+  }
+  .subtitle {
+    font-size: '2rem';
+    margin-bottom: '10px';
+  }
+  .subheading {
+    font-size: '1.75rem';
+    margin-top: '20px';
+  }
+  .cardContent {
+    display: 'flex';
+    padding: 1.5rem;
+  }

BeerApp - Senior/src/views/Beer/Map.tsx

@@ -0,0 +1,39 @@
+import "leaflet/dist/leaflet.css";
+import React, { useRef } from "react";
+import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";
+
+import L from "leaflet";
+
+const customIcon = L.icon({
+    iconUrl: `${window.location.origin}/images/marker-icon.png`,
+    iconSize: [25, 30],
+});
+
+interface MapProps {
+    lat: number;
+    lang: number;
+    name: string;
+}
+
+const Map: React.FC<MapProps> = ({ lat, lang, name }) => {
+    const mapRef = useRef(null);
+    const latitude = lat;
+    const longitude = lang;
+    const companyName = name;
+
+    return (
+        <MapContainer center={[latitude, longitude]} zoom={15} ref={mapRef} style={{height: "70vh", width: "70vw"}}>
+            <TileLayer
+                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+            />
+            <Marker position={[latitude, longitude]} icon={customIcon}>
+                <Popup>
+                    {companyName}
+                </Popup>
+            </Marker>
+        </MapContainer>
+    );
+};
+
+export default Map;

BeerApp - Senior/src/views/Beer/index.test.tsx

@@ -0,0 +1,79 @@
+// Beer.test.js
+
+import { render, screen } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import Beer from "./index";
+
+const beer = {
+  id: "5128df48-79fc-4f0f-8b52-d06be54d0cec",
+  name: "(405) Brewing Co",
+  brewery_type: "micro",
+  address_1: "1716 Topeka St",
+  address_2: null,
+  address_3: null,
+  city: "Norman",
+  state_province: "Oklahoma",
+  postal_code: "73069-8224",
+  country: "United States",
+  longitude: "-97.46818222",
+  latitude: "35.25738891",
+  phone: "4058160490",
+  website_url: "http://www.405brewing.com",
+  state: "Oklahoma",
+  street: "1716 Topeka St",
+};
+
+jest.mock("./utils", () => ({
+    fetchData: (setData: (data: typeof beer) => void) => {
+      setData(beer);
+    },
+  }));
+
+describe("Beer", () => {
+  beforeEach(() => {
+    // Mock route param
+    const mockBear = {
+      ...beer
+    };
+
+    jest.mock("react-router-dom", () => ({
+      ...jest.requireActual("react-router-dom"),
+      useParams: () => ({
+        id: mockBear.id,
+      }),
+    }));
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("displays beer details", async () => {
+    render(
+      <BrowserRouter>
+        <Beer />
+      </BrowserRouter>
+    );
+
+    // Check name
+    expect(
+      await screen.findByRole("heading", { name: beer.name })
+    ).toBeInTheDocument();
+
+    // Check type
+    expect(screen.getByText(`Type: ${beer.brewery_type}`)).toBeInTheDocument();
+
+    // Check website
+    expect(
+      screen.getByRole("link", { name: beer.website_url })
+    ).toBeInTheDocument();
+
+    // Check phone
+    expect(screen.getByText(beer.phone)).toBeInTheDocument();
+
+    // Check coordinates
+    expect(
+      screen.getByText(`Coordinate: ${beer.latitude}, ${beer.longitude}`)
+    ).toBeInTheDocument();
+  });
+});