chore(app): lägg till prettier och ta bort oanvänd kod (#125)

packages/app/.prettierrc

@@ -0,0 +1,10 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false
+}

packages/app/App.js

@@ -1,14 +1,14 @@
 import React from 'react'
-import {ApplicationProvider, IconRegistry} from '@ui-kitten/components'
-import {EvaIconsPack} from '@ui-kitten/eva-icons'
+import { ApplicationProvider, IconRegistry } from '@ui-kitten/components'
+import { EvaIconsPack } from '@ui-kitten/eva-icons'
 import * as eva from '@eva-design/eva'
 import customization from './design/customization.json'
-import {AppNavigator} from './components/navigation.component'
+import { AppNavigator } from './components/navigation.component'
 import init from '@skolplattformen/embedded-api'
-import {ApiProvider} from '@skolplattformen/api-hooks'
+import { ApiProvider } from '@skolplattformen/api-hooks'
 import CookieManager from '@react-native-community/cookies'
 import AsyncStorage from '@react-native-async-storage/async-storage'
-import {StatusBar} from 'react-native'
+import { StatusBar } from 'react-native'
 
 const api = init(fetch, () => {
   CookieManager.clearAll()
@@ -19,7 +19,7 @@ export default () => {
     <ApiProvider api={api} storage={AsyncStorage}>
       <StatusBar barStyle="dark-content" />
       <IconRegistry icons={EvaIconsPack} />
-      <ApplicationProvider {...eva} theme={{...eva.light, ...customization}}>
+      <ApplicationProvider {...eva} theme={{ ...eva.light, ...customization }}>
         <AppNavigator />
       </ApplicationProvider>
     </ApiProvider>

packages/app/components/__tests__/Notification.test.js

@@ -1,7 +1,7 @@
 import React from 'react'
-import {render} from '@testing-library/react-native'
-import {Notification} from '../notification.component.js'
-import {ApplicationProvider} from '@ui-kitten/components'
+import { render } from '@testing-library/react-native'
+import { Notification } from '../notification.component.js'
+import { ApplicationProvider } from '@ui-kitten/components'
 import * as eva from '@eva-design/eva'
 import MockDate from 'mockdate'
 
@@ -20,7 +20,7 @@ const setup = (customProps = {}) => {
   return render(
     <ApplicationProvider {...eva} theme={eva.light}>
       <Notification {...props} />
-    </ApplicationProvider>,
+    </ApplicationProvider>
   )
 }
 
@@ -40,7 +40,7 @@ test('renders subtitle without date', () => {
     dateCreated: undefined,
   }
 
-  const screen = setup({item: itemWithoutDate})
+  const screen = setup({ item: itemWithoutDate })
 
   expect(screen.getByText('Bedömning')).toBeTruthy()
 })
@@ -51,7 +51,7 @@ test('renders subtitle without category', () => {
     category: undefined,
   }
 
-  const screen = setup({item: itemWithoutCategory})
+  const screen = setup({ item: itemWithoutCategory })
 
   expect(screen.getByText('(för 17 minuter sedan)')).toBeTruthy()
 })

packages/app/components/calendar.component.js

@@ -1,29 +1,15 @@
-import React from 'react'
-import {StyleSheet, Image, View} from 'react-native'
-import {
-  Divider,
-  List,
-  ListItem,
-  Icon,
-  Text,
-  Layout,
-} from '@ui-kitten/components'
-import {DateTime} from 'luxon'
+import { Divider, Icon, List, ListItem, Text } from '@ui-kitten/components'
 import moment from 'moment'
 import 'moment/locale/sv'
+import React from 'react'
+import { Image, StyleSheet, View } from 'react-native'
 
 moment.locale('sv')
 
-// is not as versatile as moment.calendar()
-const displayDate = (date) =>
-  DateTime.fromISO(date).toRelative({locale: 'sv', style: 'long'})
-
-export const Calendar = ({calendar}) => {
-  const renderItemIcon = (startDate, endDate) => (props) => (
-    <Icon {...props} name={'calendar'} />
-  )
+export const Calendar = ({ calendar }) => {
+  const renderItemIcon = () => (props) => <Icon {...props} name={'calendar'} />
 
-  const renderItem = ({item}) => (
+  const renderItem = ({ item }) => (
     <ListItem
       disabled={true}
       title={`${item.title}`}
@@ -33,10 +19,10 @@ export const Calendar = ({calendar}) => {
   )
 
   return !calendar?.length ? (
-    <View style={{flex: 1}}>
+    <View style={{ flex: 1 }}>
       <Image
         source={require('../assets/girls.png')}
-        style={{height: 200, width: '100%'}}
+        style={{ height: 200, width: '100%' }}
       />
       <Text category="h5">Det ser lite tomt ut i kalendern</Text>
     </View>

packages/app/components/child.component.js

@@ -1,29 +1,29 @@
-import React from 'react'
-import { StyleSheet } from 'react-native'
+import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'
 import {
-  TopNavigation,
-  TopNavigationAction,
+  useCalendar,
+  useClassmates,
+  useNews,
+  useNotifications,
+  useSchedule,
+} from '@skolplattformen/api-hooks'
+import {
+  Icon,
+  Layout,
   Tab,
   TabBar,
-  Layout,
   Text,
-  Icon,
+  TopNavigation,
+  TopNavigationAction,
 } from '@ui-kitten/components'
 import { DateTime } from 'luxon'
-import { NewsList } from './newsList.component'
+import React from 'react'
+import { StyleSheet } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
 import { Calendar } from './calendar.component'
+import { ChildProvider, useChild } from './childContext.component'
 import { Classmates } from './classmates.component'
+import { NewsList } from './newsList.component'
 import { NotificationsList } from './notificationsList.component'
-import { SafeAreaView } from 'react-native-safe-area-context'
-import {
-  useNotifications,
-  useNews,
-  useClassmates,
-  useCalendar,
-  useSchedule,
-} from '@skolplattformen/api-hooks'
-import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'
-import { ChildProvider, useChild } from './childContext.component'
 
 const { Navigator, Screen } = createMaterialTopTabNavigator()
 
@@ -41,7 +41,7 @@ const NewsScreen = () => {
 const NotificationsScreen = () => {
   const child = useChild()
   const { data: notifications, status: notificationsStatus } = useNotifications(
-    child,
+    child
   )
 
   return (
@@ -60,7 +60,7 @@ const CalendarScreen = () => {
   const { data: schedule } = useSchedule(
     child,
     DateTime.local(),
-    DateTime.local().plus({ days: 7 }),
+    DateTime.local().plus({ days: 7 })
   )
 
   return (
@@ -97,7 +97,8 @@ const ClassIcon = (props) => <Icon {...props} name="people-outline" />
 const TopTabBar = ({ navigation, state }) => (
   <TabBar
     selectedIndex={state.index}
-    onSelect={(index) => navigation.navigate(state.routeNames[index])}>
+    onSelect={(index) => navigation.navigate(state.routeNames[index])}
+  >
     <Tab
       title={(props) => <TabTitle {...props}>Nyheter</TabTitle>}
       icon={NewsIcon}
@@ -117,19 +118,20 @@ const TopTabBar = ({ navigation, state }) => (
   </TabBar>
 )
 
-const TabNavigator = ({initialRouteName = 'Nyheter'}) => (
+const TabNavigator = ({ initialRouteName = 'Nyheter' }) => (
   <Navigator
     initialRouteName={initialRouteName}
-    tabBar={(props) => <TopTabBar {...props} />}>
+    tabBar={(props) => <TopTabBar {...props} />}
+  >
     <Screen name="Nyheter" component={NewsScreen} />
     <Screen name="Notifieringar" component={NotificationsScreen} />
     <Screen name="Kalender" component={CalendarScreen} />
     <Screen name="Klassen" component={ClassmatesScreen} />
   </Navigator>
 )
 
-export const Child = ({route, navigation}) => {
-  const {child, color, initialRouteName} = route.params
+export const Child = ({ route, navigation }) => {
+  const { child, color, initialRouteName } = route.params
 
   const BackIcon = (props) => <Icon {...props} name="arrow-back" />
 

packages/app/components/childContext.component.js

@@ -4,11 +4,7 @@ export const ChildContext = createContext({})
 
 export const ChildProvider = ({ child, children }) => {
   console.log('Provider', child)
-  return (
-    <ChildContext.Provider value={child}>
-      {children}
-    </ChildContext.Provider>
-  )
+  return <ChildContext.Provider value={child}>{children}</ChildContext.Provider>
 }
 
 export const useChild = () => useContext(ChildContext)

packages/app/components/childListItem.component.js

@@ -1,16 +1,15 @@
-import React, { useEffect } from 'react'
-import { StyleSheet, View } from 'react-native'
-import { DateTime } from 'luxon'
-import moment from 'moment'
 import {
-  useNotifications,
-  useNews,
-  useClassmates,
   useCalendar,
-  useMenu,
+  useClassmates,
+  useNews,
+  useNotifications,
   useSchedule,
 } from '@skolplattformen/api-hooks'
-import { Button, Icon, Text, Card, Avatar } from '@ui-kitten/components'
+import { Avatar, Button, Card, Icon, Text } from '@ui-kitten/components'
+import { DateTime } from 'luxon'
+import moment from 'moment'
+import React, { useEffect } from 'react'
+import { StyleSheet, View } from 'react-native'
 
 const NotificationsIcon = (props) => (
   <Icon {...props} name="alert-circle-outline" />
@@ -24,19 +23,18 @@ const PeopleIcon = (props) => <Icon {...props} name="people-outline" />
 
 export const ChildListItem = ({ navigation, child, color }) => {
   // Forces rerender when child.id changes
-  useEffect(() => { }, [child.id])
+  useEffect(() => {}, [child.id])
 
   const { data: notifications, status: notificationsStatus } = useNotifications(
-    child,
+    child
   )
   const { data: news, status: newsStatus } = useNews(child)
   const { data: classmates, status: classmatesStatus } = useClassmates(child)
   const { data: calendar, status: calendarStatus } = useCalendar(child)
-  const { data: menu, status: menuStatus } = useMenu(child)
-  const { data: schedule, status: scheduleStatus } = useSchedule(
+  const { data: schedule } = useSchedule(
     child,
     DateTime.local(),
-    DateTime.local().plus({ days: 7 }),
+    DateTime.local().plus({ days: 7 })
   )
 
   const getClassName = () => {
@@ -58,18 +56,18 @@ export const ChildListItem = ({ navigation, child, color }) => {
   }
 
   const Header = (props) => (
-    <View {...props} style={{flexDirection: 'row', alignItems: 'center'}}>
-      <View style={{margin: 20, marginRight: 0}}>
+    <View {...props} style={{ flexDirection: 'row', alignItems: 'center' }}>
+      <View style={{ margin: 20, marginRight: 0 }}>
         <Avatar source={require('../assets/avatar.png')} shape="square" />
       </View>
-      <View style={{margin: 20, flex: 1}}>
+      <View style={{ margin: 20, flex: 1 }}>
         <Text category="h6">{child.name?.split('(')[0]}</Text>
         <Text category="s1">{`${getClassName()}`}</Text>
       </View>
     </View>
   )
 
-  const Footer = (props, info) => (
+  const Footer = () => (
     <View style={styles.itemFooter}>
       <Button
         style={[styles.item, styles[newsStatus]]}
@@ -82,7 +80,8 @@ export const ChildListItem = ({ navigation, child, color }) => {
             initialRouteName: 'Nyheter',
           })
         }
-        accessoryLeft={NewsIcon}>
+        accessoryLeft={NewsIcon}
+      >
         {`${(news || []).length}`}
       </Button>
       <Button
@@ -96,7 +95,8 @@ export const ChildListItem = ({ navigation, child, color }) => {
             initialRouteName: 'Notifieringar',
           })
         }
-        accessoryLeft={NotificationsIcon}>
+        accessoryLeft={NotificationsIcon}
+      >
         {`${(notifications || []).length}`}
       </Button>
       <Button
@@ -110,7 +110,8 @@ export const ChildListItem = ({ navigation, child, color }) => {
             initialRouteName: 'Kalender',
           })
         }
-        accessoryLeft={CalendarIcon}>
+        accessoryLeft={CalendarIcon}
+      >
         {`${(notifications || []).length}`}
       </Button>
       <Button
@@ -124,7 +125,8 @@ export const ChildListItem = ({ navigation, child, color }) => {
             initialRouteName: 'Klassen',
           })
         }
-        accessoryLeft={PeopleIcon}>
+        accessoryLeft={PeopleIcon}
+      >
         {`${(classmates || []).length}`}
       </Button>
     </View>
@@ -137,7 +139,8 @@ export const ChildListItem = ({ navigation, child, color }) => {
       status={color}
       header={Header}
       footer={Footer}
-      onPress={() => navigation.navigate('Child', { child, color })}>
+      onPress={() => navigation.navigate('Child', { child, color })}
+    >
       {[...(calendar ?? []), ...(schedule ?? [])]
         .filter((a) => moment(a.startDate).isSame('week'))
         .slice(0, 3)
@@ -146,7 +149,8 @@ export const ChildListItem = ({ navigation, child, color }) => {
             appearance="hint"
             category="c1"
             key={i}
-            style={{ textColor: styles.loaded(notificationsStatus) }}>
+            style={{ textColor: styles.loaded(notificationsStatus) }}
+          >
             {`${calendarItem.title}`}
           </Text>
         ))}