calendar / steps challenge

App.tsx

@@ -1,24 +1,14 @@
-import React, {useEffect} from 'react';
-import {SafeAreaView, ScrollView, StyleSheet, Text, View} from 'react-native';
-import {getStepsHistory} from './services/healthService';
+import React from 'react';
+import {SafeAreaView, ScrollView, StyleSheet} from 'react-native';
+import {Calendar} from './src/components/calendar';
 
 const App = () => {
-  useEffect(() => {
-    (async function () {
-      const steps = await getStepsHistory('2022-09-01', '2022-10-01');
-
-      console.log(steps);
-    })();
-  });
-
   return (
     <SafeAreaView>
       <ScrollView
         contentInsetAdjustmentBehavior="automatic"
         contentContainerStyle={styles.scrollContainer}>
-        <View>
-          <Text>Hello World !</Text>
-        </View>
+        <Calendar />
       </ScrollView>
     </SafeAreaView>
   );

Gemfile.lock

@@ -0,0 +1,113 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    CFPropertyList (3.0.7)
+      base64
+      nkf
+      rexml
+    activesupport (7.1.3)
+      base64
+      bigdecimal
+      concurrent-ruby (~> 1.0, >= 1.0.2)
+      connection_pool (>= 2.2.5)
+      drb
+      i18n (>= 1.6, < 2)
+      minitest (>= 5.1)
+      mutex_m
+      tzinfo (~> 2.0)
+    addressable (2.8.6)
+      public_suffix (>= 2.0.2, < 6.0)
+    algoliasearch (1.27.5)
+      httpclient (~> 2.8, >= 2.8.3)
+      json (>= 1.5.1)
+    atomos (0.1.3)
+    base64 (0.2.0)
+    bigdecimal (3.1.6)
+    claide (1.1.0)
+    cocoapods (1.15.2)
+      addressable (~> 2.8)
+      claide (>= 1.0.2, < 2.0)
+      cocoapods-core (= 1.15.2)
+      cocoapods-deintegrate (>= 1.0.3, < 2.0)
+      cocoapods-downloader (>= 2.1, < 3.0)
+      cocoapods-plugins (>= 1.0.0, < 2.0)
+      cocoapods-search (>= 1.0.0, < 2.0)
+      cocoapods-trunk (>= 1.6.0, < 2.0)
+      cocoapods-try (>= 1.1.0, < 2.0)
+      colored2 (~> 3.1)
+      escape (~> 0.0.4)
+      fourflusher (>= 2.3.0, < 3.0)
+      gh_inspector (~> 1.0)
+      molinillo (~> 0.8.0)
+      nap (~> 1.0)
+      ruby-macho (>= 2.3.0, < 3.0)
+      xcodeproj (>= 1.23.0, < 2.0)
+    cocoapods-core (1.15.2)
+      activesupport (>= 5.0, < 8)
+      addressable (~> 2.8)
+      algoliasearch (~> 1.0)
+      concurrent-ruby (~> 1.1)
+      fuzzy_match (~> 2.0.4)
+      nap (~> 1.0)
+      netrc (~> 0.11)
+      public_suffix (~> 4.0)
+      typhoeus (~> 1.0)
+    cocoapods-deintegrate (1.0.5)
+    cocoapods-downloader (2.1)
+    cocoapods-plugins (1.0.0)
+      nap
+    cocoapods-search (1.0.1)
+    cocoapods-trunk (1.6.0)
+      nap (>= 0.8, < 2.0)
+      netrc (~> 0.11)
+    cocoapods-try (1.2.0)
+    colored2 (3.1.2)
+    concurrent-ruby (1.2.3)
+    connection_pool (2.4.1)
+    drb (2.2.0)
+      ruby2_keywords
+    escape (0.0.4)
+    ethon (0.16.0)
+      ffi (>= 1.15.0)
+    ffi (1.16.3)
+    fourflusher (2.3.1)
+    fuzzy_match (2.0.4)
+    gh_inspector (1.1.3)
+    httpclient (2.8.3)
+    i18n (1.14.1)
+      concurrent-ruby (~> 1.0)
+    json (2.7.1)
+    minitest (5.22.2)
+    molinillo (0.8.0)
+    mutex_m (0.2.0)
+    nanaimo (0.3.0)
+    nap (1.1.0)
+    netrc (0.11.0)
+    nkf (0.2.0)
+    public_suffix (4.0.7)
+    rexml (3.2.6)
+    ruby-macho (2.5.1)
+    ruby2_keywords (0.0.5)
+    typhoeus (1.4.1)
+      ethon (>= 0.9.0)
+    tzinfo (2.0.6)
+      concurrent-ruby (~> 1.0)
+    xcodeproj (1.24.0)
+      CFPropertyList (>= 2.3.3, < 4.0)
+      atomos (~> 0.1.3)
+      claide (>= 1.0.2, < 2.0)
+      colored2 (~> 3.1)
+      nanaimo (~> 0.3.0)
+      rexml (~> 3.2.4)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  cocoapods (~> 1.11, >= 1.11.2)
+
+RUBY VERSION
+   ruby 2.7.5p203
+
+BUNDLED WITH
+   2.1.4

ios/AppHomework.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict/>
+</plist>

ios/Podfile

@@ -1,6 +1,8 @@
 require_relative '../node_modules/react-native/scripts/react_native_pods'
 require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
 
+IOS_VERSION = '12.4'
+
 platform :ios, '12.4'
 install! 'cocoapods', :deterministic_uuids => false
 
@@ -39,5 +41,21 @@ target 'AppHomework' do
       :mac_catalyst_enabled => false
     )
     __apply_Xcode_12_5_M1_post_install_workaround(installer)
+
+    installer.pods_project.targets.each do |target|
+      target.build_configurations.each do |config|
+      config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = IOS_VERSION
+      config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = "arm64"
+      config.build_settings["ONLY_ACTIVE_ARCH"] = "YES"
+  end
+
+  # Special case for 'RCT-Folly'
+  case target.name
+  when 'RCT-Folly'
+    target.build_configurations.each do |config|
+      config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '9.0'
+    end
+  end
+end
   end
 end

ios/Podfile.lock

@@ -368,7 +368,7 @@ PODS:
     - React-jsi (= 0.70.3)
     - React-logger (= 0.70.3)
     - React-perflogger (= 0.70.3)
-  - SocketRocket (0.6.0)
+  - SocketRocket (0.6.1)
   - Yoga (1.14.0)
   - YogaKit (1.18.1):
     - Yoga (~> 1.14)
@@ -569,10 +569,10 @@ SPEC CHECKSUMS:
   React-RCTVibration: b9a58ffdd18446f43d493a4b0ecd603ee86be847
   React-runtimeexecutor: e9b1f9310158a1e265bcdfdfd8c62d6174b947a2
   ReactCommon: 01064177e66d652192c661de899b1076da962fd9
-  SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
+  SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
   Yoga: 2ed968a4f060a92834227c036279f2736de0fce3
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
-PODFILE CHECKSUM: 5f52ba5d55551b4f0f4ab2f0f104d223ff78177b
+PODFILE CHECKSUM: fad904467f28af9ac847cef71055e85f7f21c0d7
 
-COCOAPODS: 1.11.2
+COCOAPODS: 1.15.2

src/Constants.ts

@@ -0,0 +1,24 @@
+export const MONTHS_FR = [
+  'Janvier',
+  'Février',
+  'Mars',
+  'Avril',
+  'Mai',
+  'Juin',
+  'Juillet',
+  'Août',
+  'Septembre',
+  'Octobre',
+  'Novembre',
+  'Décembre',
+];
+
+export const WEEK_DAYS = [
+  'Lun.',
+  'Mar.',
+  'Mer.',
+  'Jeu.',
+  'Ven.',
+  'Sam.',
+  'Dim.',
+];

src/components/calendar.tsx

@@ -0,0 +1,56 @@
+import React, {useCallback, useState, useMemo} from 'react';
+import {View} from 'react-native';
+import {CalendarHeader} from './calendarHeader';
+import moment from 'moment';
+import {CalendarDays} from './calendarDays';
+import {MONTHS_FR} from '../Constants';
+
+export const Calendar = () => {
+  const [currentDate, setCurrentDate] = useState(moment());
+
+  const firstCalendarDate = moment(currentDate)
+    .startOf('month')
+    .startOf('isoWeek');
+  const lastCalendarDate = moment(currentDate).endOf('month');
+
+  const monthArray = useMemo(() => {
+    const startWeekDate = firstCalendarDate.clone().subtract(1, 'day');
+    const calendarArray = [];
+    while (startWeekDate.isBefore(lastCalendarDate, 'day')) {
+      calendarArray.push(
+        Array(7)
+          .fill(0)
+          .map(() => startWeekDate.add(1, 'day').clone()),
+      );
+    }
+    return calendarArray;
+  }, [firstCalendarDate, lastCalendarDate]);
+
+  const onPressPreviousMonth = useCallback(() => {
+    setCurrentDate(moment(currentDate).subtract(1, 'month'));
+  }, [currentDate]);
+
+  const onPressNextMonth = useCallback(() => {
+    if (moment(currentDate).unix() >= moment().subtract(1, 'month').unix()) {
+      return;
+    }
+    setCurrentDate(moment(currentDate).add(1, 'month'));
+  }, [currentDate]);
+
+  const headerMonthName = useMemo(() => {
+    return `${MONTHS_FR[moment(currentDate).month()]} ${moment(
+      currentDate,
+    ).format('YYYY')} `;
+  }, [currentDate]);
+
+  return (
+    <View>
+      <CalendarHeader
+        month={headerMonthName}
+        onPressLeft={onPressPreviousMonth}
+        onPressRight={onPressNextMonth}
+      />
+      <CalendarDays currentDate={currentDate} monthArray={monthArray} />
+    </View>
+  );
+};