> ## Documentation Index
> Fetch the complete documentation index at: https://useaward.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# useOrder

The useOrder hook is used to get list of app orders or create a new order.

## Usage

### Get Orders

<CodeGroup>
  ```jsx orders.tsx theme={null}
      import { useOrder, OrderResource } from '@useawards/useaward-expo';

      export default function Orders() {
      const { isLoaded, getOrders } = useOrder();
      const [orders, setOrders]  = useState<OrderResource[]>([]);
      
      const fetchOrders = async () => {
          const result = await getOrders();

          setOrders(result || []);
      }

      useEffect(() => {
          if (isLoaded) {
          fetchOrders();
          }
      }, [isLoaded, getOrders]);

      return (
          <View>
          {orders.map((order) => (
              <Text key={order.uuid}>{order.uuid}</Text>
          ))}
          </View>
      )
      }
  ```

  ```jsx orders.js theme={null}
      import { useOrder } from '@useawards/useaward-expo';

      export default function Orders() {
          const { isLoaded, getOrders } = useOrder();
          const [orders, setOrders]  = useState<>([]);
          
          const fetchOrders = async () => {
              const result = await getOrders();

              setOrders(result || []);
          }

          useEffect(() => {
              if (isLoaded) {
              fetchOrders();
              }
          }, [isLoaded, getOrders]);

          return (
              <View>
                  {orders.map((order) => (
                      <Text key={order.uuid}>{order.uuid}</Text>
                  ))}
              </View>
          )
      }
  ```
</CodeGroup>

### Create Order

<CodeGroup>
  ```jsx orders.tsx theme={null}
      import React, {Component} from 'react';
      import { OrderResource } from "@useawards/types";
      import { useOrder } from "@useawards/useaward-react";
      import { useEffect, useState } from "react";
      import { TouchableOpacity, View } from 'react-native';

      export default function Orders() {
      const { isLoaded, getOrders, createOrder } = useOrder();
      const [orders, setOrders]  = useState<OrderResource[]>([]);

      useEffect(() => {
          if (isLoaded) {
          const fetchOrders = async () => {
              const result = await getOrders();
              setOrders(result || []);
          }

          fetchOrders();
          }
      }, [isLoaded, getOrders]);

      const handleCreateOrder = async (prizeUuid: string) => {
          const response = await createOrder(prizeUuid);

          ...
      }

      return (
          <View>
          {orders.map((order) => (
              <TouchableOpacity key={order.uuid} onPress={() => handleCreateOrder(order.prize.uuid)}>
                  <View>{order.prize.name}</View>
              </TouchableOpacity>
          ))}
          </View>
      )
  }
  ```

  ```jsx orders.js theme={null}
      import React, {Component} from 'react';
      import { useOrder } from "@useawards/useaward-react";
      import { useEffect, useState } from "react";
      import { TouchableOpacity, View } from 'react-native';

      export default function Orders() {
      const { isLoaded, getOrders, createOrder } = useOrder();
      const [orders, setOrders]  = useState([]);

      useEffect(() => {
          if (isLoaded) {
          const fetchOrders = async () => {
              const result = await getOrders();
              setOrders(result || []);
          }

          fetchOrders();
          }
      }, [isLoaded, getOrders]);

      const handleCreateOrder = async (prizeUuid: string) => {
          const response = await createOrder(prizeUuid);

          ...
      }

      return (
          <View>
          {orders.map((order) => (
              <TouchableOpacity key={order.uuid} onPress={() => handleCreateOrder(order.prize.uuid)}>
                  <View>{order.prize.name}</View>
              </TouchableOpacity>
          ))}
          </View>
      )
  }
  ```
</CodeGroup>