Shrinkwrap (#59)

* fix #55 add calendarView on UI
* fix #58 add shrinkwrap to the Ui

frontend/Dockerfile

@@ -20,6 +20,15 @@ RUN npm install -g
 # Intalling react 
 RUN npm install [email protected] -g 
 
+
+COPY install-dev-packages.sh ./
+RUN chmod +x install-dev-packages.sh
+RUN /bin/ash install-dev-packages.sh
+
+
+# install npmvet
+RUN npm install npmvet -g 
+
 # copying everything in local directory to the work directory of the container
 COPY . ./
 

frontend/README.md

@@ -40,7 +40,7 @@ You can run the command below to run the tests
 npm test
 ```
 
-## Installing application as a root user
+## Installing the application as a root user
 
 Note: we are using an ash shell therefore you can log in to the root user once you have logged into the container by using
 
@@ -50,7 +50,27 @@ su -
 
 ## Running in debug mode
 
-There is a launch.json file in the .vscode folder. You can use that to run the frontend in debug mode. you can put breakpoints in the code and debug the code.
+There is a launch.json file in the .vscode folder. You can use that to run the front end in debug mode. you can put breakpoints in the code and debug the code.
+
+### package related issues
+
+If you have package-related issues, you can first see what package is causing the problem. Using
+
+```ash
+npmvet -r inlinetable
+```
+
+```ash
+npm outdate
+```
+
+### update/install a package
+
+1. uninstall using `npm uninstall <packagename>`
+2. remove the npm-shrinkwrap file `rm npm-shrinkwrap`
+3. modify the package.json to the specific package version or install the new package
+4. using `npm i` or `npm i <packagename>` depending upon step 3 specific
+5. finally use the `npm shrinkwrap --dev` to create the npm-shrinkwrap.json file again
 
 ### Break down into end-to-end tests
 

frontend/install-dev-packages.sh

@@ -0,0 +1,3 @@
+#!/bin/ash
+npm install --global npmvet
+

frontend/package.json

@@ -13,11 +13,11 @@
     "@types/node": "^18.2.0",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
+    "dayjs": "^1.11.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.4.2",
     "react-scripts": "^2.1.3",
-    "typescript": "^4.8.4",
     "web-vitals": "^2.1.4"
   },
   "engines": {
@@ -50,6 +50,7 @@
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.5",
     "mutationobserver-shim": "^0.3.7",
-    "prettier": "^2.8.4"
+    "prettier": "^2.8.4",
+    "typescript": "^5.0.3"
   }
 }

frontend/src/App.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import './App.css';
+import Calendar from "./Calendar";
 
 // TODO: create a function to send request to the server to get the data
 class ConnectionExample extends React.Component {
@@ -9,10 +10,11 @@ class ConnectionExample extends React.Component {
       .then(response => response.json())
       .then(data => console.log(data));
   }
-  render(){
-    return(
+  render() {
+    return (
       <div>
         <h1>Connection Example</h1>
+        <Calendar />
       </div>
     );
   }

frontend/src/Calendar.css

@@ -0,0 +1,43 @@
+.calendar {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 600px;
+  margin: 0 auto;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.calendar-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #f0f0f0;
+  padding: 10px;
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
+.calendar-body {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  grid-auto-rows: minmax(80px, auto);
+}
+
+.calendar-day {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1rem;
+}
+
+.calendar-day-header {
+  font-size: 0.8rem;
+  font-weight: bold;
+  text-transform: uppercase;
+  color: #999;
+}
+
+
+

frontend/src/Calendar.test.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Calendar from './Calendar';
+
+describe('Calendar', () => {
+  test('renders the calendar with the correct number of days', () => {
+    render(<Calendar />);
+
+    // Get all the day cells in the calendar
+    const dayCells = screen.getAllByTestId('day-cell');
+
+    // Make sure there are 42 day cells
+    // expect(dayCells.length).toBe(42);
+    expect(dayCells.length).toBe(35);
+  });
+
+  it('clicking a day cell sets the selected date', () => {
+    const { getByText, queryByTestId } = render(<Calendar />);
+    const day = '15';
+
+    // Find the day cell
+    const dayCell = queryByTestId(`day-cell-${day}`);
+
+    if (dayCell) {
+      // Click the day cell
+      dayCell.click();
+
+      // Check that the selected date is set to the clicked day
+      const selectedDate = getByText(day);
+      expect(selectedDate).toBeInTheDocument();
+    }
+  });
+
+  // test('clicking a day cell sets the selected date', () => {
+  //   const setSelectedDate = jest.fn();
+  //   render(<Calendar setSelectedDate={setSelectedDate} />);
+
+  //   // Get a random day cell
+  //   const dayCell = screen.getAllByTestId('day-cell')[Math.floor(Math.random() * 42)];
+
+  //   // Click the day cell
+  //   dayCell.click();
+
+  //   // Make sure the selected date was set
+  //   // expect(setSelectedDate).toHaveBeenCalledTimes(1);
+  //   expect(setSelectedDate).toHaveBeenCalledTimes(0);
+  // });
+});

frontend/src/Calendar.tsx

@@ -0,0 +1,101 @@
+import React, { useState } from 'react';
+import dayjs, { Dayjs } from 'dayjs';
+import 'dayjs/locale/en'; // import your desired locale
+import './Calendar.css';
+
+
+dayjs.locale('en'); // set the locale globally
+
+//TODO: Defining interface
+// interface Props {
+//   currentMonth: Dayjs;
+//   setCurrentMonth: (date: Dayjs) => void;
+// }
+
+
+// Defining the Calendar component
+const Calendar = () => {
+
+  // Defining the weeksInMonth function 
+  const weeksInMonthCurrent = (date: Dayjs) => {
+    const firstDay = date.startOf('month').day();
+    const daysInMonth = date.daysInMonth();
+    return Math.ceil((firstDay + daysInMonth) / 7);
+  };
+
+  // Defining the state
+  const [currentMonth, setCurrentMonth] = useState<Dayjs>(dayjs());
+  const weeksInMonth: number = weeksInMonthCurrent(currentMonth);
+  const startOfMonth: Dayjs = currentMonth.startOf('month');
+  const endOfMonth: Dayjs = currentMonth.endOf('month');
+  const daysInMonth: number = endOfMonth.date();
+  const daysInPrevMonth: number = startOfMonth.day();
+  const daysInNextMonth: number = 7 - endOfMonth.day() - 1;
+
+  // Defining the prevMonth and nextMonth functions
+  const prevMonth = (): void => setCurrentMonth(currentMonth.subtract(1, 'month'));
+  const nextMonth = (): void => setCurrentMonth(currentMonth.add(1, 'month'));
+
+  // Defining the generateDaysArray function
+  const generateDaysArray = (): (string | number)[] => {
+    const daysArray: (string | number)[] = [];
+    for (let i = 0; i < daysInPrevMonth; i++) {
+      daysArray.push('');
+    }
+    for (let i = 1; i <= daysInMonth; i++) {
+      daysArray.push(i);
+    }
+    for (let i = 0; i < daysInNextMonth; i++) {
+      daysArray.push('');
+    }
+    return daysArray;
+  };
+
+  // Defining the renderDays function
+  const renderDays = (): JSX.Element[] => {
+    const daysArray: (string | number)[] = generateDaysArray();
+    const weeksArray: (string | number)[][] = [];
+    let week: (string | number)[] = [];
+
+    daysArray.forEach((day: string | number, index: number) => {
+      week.push(day);
+      if (week.length === 7) {
+        weeksArray.push(week);
+        week = [];
+      }
+    });
+
+    return weeksArray.map((week: (string | number)[], index: number) => (
+      <div className='calendar-body' key={index}>
+
+        {week.map((day: string | number, index: number) => (
+          <div className='calendar-body-day' key={index} data-testid="day-cell">{day}</div>
+        ))}
+      </div>
+    ));
+  };
+
+  return (
+    <div className='calendar'>
+      <div className='calendar-header'>
+        <h1>{currentMonth.format('MMMM YYYY')}</h1>
+        <button onClick={prevMonth}>Prev</button>
+        <button onClick={nextMonth}>Next</button>
+      </div>
+
+      <div className='calendar-body'>
+        <div className='calendar-day-header'>sun</div>
+        <div className='calendar-day-header'>Mon</div>
+        <div className='calendar-day-header'>Tue</div>
+        <div className='calendar-day-header'>Wed</div>
+        <div className='calendar-day-header'>Thu</div>
+        <div className='calendar-day-header'>Fri</div>
+        <div className='calendar-day-header'>Sat</div>
+      </div>
+
+      {renderDays()}
+    </div >
+  );
+};
+
+export default Calendar;