The Waiter

Karthikayan — Mon, 11 Jan 2021 06:37:57 +0000

What I built

A very simple waiter web app to make orders in a restaurant.

Category Submission:

Built for Business

App Link

https://thewaiter-5vw3p.ondigitalocean.app/

Screenshots

Description

It can be of assistance to a waiter or to customer to order the food from the menu.

Link to Source Code

https://github.com/parkourkarthik/thewaiter

Permissive License

MIT

Background

When ordering food we might have to wait until the waiter attends our table. So thought why not we have an app similar to online ordering inside the restaurant with some QR codes on the table to direct us to the link.

How I built it

I was bit late to join and had to rush up to a level of MVP. So, I had to make it as simple as possible. I made use of browser localStorage and had to overcome some problems.

Additional Resources/Info

ReactNative datetimepicker to pick both date and time in Android

Karthikayan — Mon, 02 Mar 2020 06:09:42 +0000

The @react-native-community/datetimepicker provides the feature to pick date and time using the native components of Android and iOS.

For iOS, there seems to be no problem in picking up both date and time at the same time ('datetime' mode). But for Android, it is not possible out of the box. So, I thought of writing this.

I'll start from the existing usage instructions for the datetimepicker

import React, {useState} from 'react';
import {View, Button, Platform} from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';

const App = () => {
  const [date, setDate] = useState(new Date());
  const [mode, setMode] = useState('date');
  const [show, setShow] = useState(false);

  const onChange = (event, selectedDate) => {
    const currentDate = selectedDate || date;

    setDate(currentDate);
    setShow(Platform.OS === 'ios' ? true : false);
  };

  const showMode = currentMode => {
    setShow(true);
    setMode(currentMode);
  };

  const showDatepicker = () => {
    showMode('date');
  };

  const showTimepicker = () => {
    showMode('time');
  };

  return (
    <View>
      <View>
        <Button onPress={showDatepicker} title="Show date picker!" />
      </View>
      <View>
        <Button onPress={showTimepicker} title="Show time picker!" />
      </View>
      {show && (
        <DateTimePicker
          testID="dateTimePicker"
          timeZoneOffsetInMinutes={0}
          value={date}
          mode={mode}
          is24Hour={true}
          display="default"
          onChange={onChange}
        />
      )}
    </View>
  );
};

export default App;

Let's use a clickable Text component showing datetime instead of the buttons. We don't need showTimePicker() anymore and thus can be removed.

        <TouchableOpacity onPress={showDatePicker}>
          <Text>{date}</Text>
        </TouchableOpacity>

Now, we need to modify the onChange() method to show up both date and time picker. Before that we need a time state similar to date state.

  const [time, setTime] = useState(new Date());
  //...
  const onChange = (event, selectedValue) => {
    setShow(Platform.OS === 'ios');
    if (mode == 'date') {
      const currentDate = selectedValue || new Date();
      setDate(currentDate);
      setMode('time');
      setShow(Platform.OS !== 'ios'); // to show the picker again in time mode
    } else {
      const selectedTime = selectedValue || new Date();
      setTime(selectedTime);
      setShow(Platform.OS === 'ios');
      setMode('date');
    }
  };

Now, we have date and time picker working and updating the respective state values. We just need to merge and format the date and time state.

        <TouchableOpacity onPress={showDatePicker}>
          <Text style={styles.title}>{formatDate(date, time)}</Text>
        </TouchableOpacity>

//..

const formatDate = (date, time) => {
  return `${date.getDate()}/${date.getMonth() +
    1}/${date.getFullYear()} ${time.getHours()}:${time.getMinutes()}`;
};

Checkout my git repo for the source,

ParkourKarthik / datetimepicker-demo

Demo app for using reactnative datetimepicker for picking both date and time.

P.S: This is my first ever post. I'd love to hear back ❤️. Also, I've considered only Android and I'm not sure if the code could impact iOS app if both native apps are used with a single source.

Forem: Karthikayan