<repo_name>RGabrielR/AeroContest<file_sep>/components/redux/reducers/rootReducer.js
import { combineReducers } from "redux";
import productsReducer from "./productsReducer";
import userReducer from './userReducer'

const rootReducer = combineReducers({
   products:  productsReducer,
   user: userReducer

});

export default rootReducer;<file_sep>/components/frontendComponents/elements/sortBarStyles.js

const sortBarStyles = {
    control: (base, state) => ({
      ...base,
      background: "#316FBE",
      // Overwrittes the different states of border
      borderColor: state.isFocused ? "#76711A" : "#316FBE",
      // Removes weird border around container
      boxShadow: state.isFocused ? null : null,
      "&:hover": {
        // Overwrittes the different states of border
        borderColor: state.isFocused ? "#76711A" : "#316FBE"
      },
    }),
};
 
 
export default sortBarStyles;<file_sep>/components/frontendComponents/elements/options.js
const options = [
  {value: 'predefined', label: 'predefined'},
  {value: 'highest', label: 'highest'},
  {value: 'lowest', label: 'lowest'},
  {value: 'canAfford', label: 'canAfford'},
  {value: 'cannotAfford', label: 'cannotAfford'}
];
export default options;<file_sep>/components/redux/reducers/userReducer.js
import * as t from '../types';

const initialState = {
  loading: false,
  user: {},
  error: ''
}

const userReducer = (state = initialState ,  action) => {
  
    switch(action.type) {
        case t.FETCH_USER_REQUEST:
        return {
          ...state,
          loading: false
        }
        case t.FETCH_USER_SUCCESS:
        return {
          loading: true,
          user: action.payload,
          error: ''
          }
        case t.FETCH_USER_ERROR:
        return {
          loading: true,
          user: [],
          error: action.payload
        }
        default:
        return state;
    }
}

export default userReducer;<file_sep>/components/redux/actions/productActions.js
import * as t from '../types';


export const fetchProducts = () => {
      return  (dispatch) => {
        fetch('https://coding-challenge-api.aerolab.co/products',
          { headers: {
            'Authorization': process.env.NEXT_PUBLIC_AUTHKEY
          }}
          ).then(p => p.json())
          .then(data => {
            const productsFetch = data
            
              dispatch(fetchProductsSuccess(productsFetch))
              })
          .catch(error => 
              dispatch(fetchProductsError(error)))
};
}
export const fetchProductsRequest = () => {
  return {
    type: t.FETCH_PRODUCTS_REQUEST
  }
};
export const fetchProductsSuccess = products => {
  return {
    type: t.FETCH_PRODUCTS_SUCCESS,
    payload: products
  }
};
export const fetchProductsError = error => {
  return {
    type: t.FETCH_PRODUCTS_ERROR,
    payload: error
  }
};

export const sortingHighest= products => {
  return (dispatch) => {
 fetch('https://coding-challenge-api.aerolab.co/products',
          { headers: {
            'Authorization': process.env.NEXT_PUBLIC_AUTHKEY
          }}
          ).then(p => p.json())
          .then(data => {
            const productsSorted = data.sort((a, b) => (b.cost - a.cost))
              dispatch(productsSortedHighest(productsSorted))
              })

}
}

export const productsSortedHighest = products => {
  return {
    type: t.PRODUCTS_SORTED_HIGHEST,
    payload: products
  }
}
export const sortingLowest= products => {
  return (dispatch) => {
   fetch('https://coding-challenge-api.aerolab.co/products',
          { headers: {
            'Authorization': process.env.NEXT_PUBLIC_AUTHKEY
          }}
          ).then(p => p.json())
          .then(data => {
            const productsSorted = data.sort((a, b) => (a.cost - b.cost))
              dispatch(productsSortedLowest(productsSorted))
              })

}
}

export const productsSortedLowest = products => {
  return {
    type: t.PRODUCTS_SORTED_LOWEST,
    payload: products
  }
}
export const sortingPredefined= () => {
      return  (dispatch) => {
        fetch('https://coding-challenge-api.aerolab.co/products',
          { headers: {
            'Authorization': process.env.NEXT_PUBLIC_AUTHKEY
          }}
          ).then(p => p.json())
          .then(data => {
            const productsFetch = data
            
              dispatch(fetchProductsSuccess(productsFetch))
              })
          .catch(error => 
              dispatch(fetchProductsError(error)))
};
}
export const productsSortedPredefined = products => {
  return {
    type: t.PRODUCTS_SORTED_PREDEFINED,
    payload: products
  }
}
export const sortCanAfford = (points) => {
  return (dispatch) => {
    fetch('https://coding-challenge-api.aerolab.co/products',
          { headers: {
            'Authorization': process.env.NEXT_PUBLIC_AUTHKEY
          }}
          ).then(p => p.json())
          .then(data => {
            const affordableProducts  = data.filter(prod => prod.cost < points);
            dispatch(affordableArray(affordableProducts));
            })
    
  }
}



export const affordableArray = products => {
  return {
    type: t.AFFORDABLE_ARRAY,
    payload: products
  }
}

export const sortCannotAfford =  points => {
  return (dispatch) => {
    fetch('https://coding-challenge-api.aerolab.co/products',
          { headers: {
            'Authorization': process.env.NEXT_PUBLIC_AUTHKEY
          }}
          ).then(p => p.json())
          .then(data => {
            const unaffordableProducts  = data.filter(prod => prod.cost > points);
            dispatch(unaffordableArray(unaffordableProducts));})
    
  }
}

export const unaffordableArray = products => {
  return {
    type: t.AFFORDABLE_ARRAY,
    payload: products
  }
}<file_sep>/components/frontendComponents/User.js
import React, { useEffect } from "react";
import { connect } from "react-redux";
import {
  fetchUser,
  buy1000,
  buy5000,
  buy7500,
} from "../redux/actions/userActions";
import Swal from "sweetalert2";
import Image from "next/image";
import Link from "next/link";

const User = (props) => {
  const { 
  user
   } = props.user;

  useEffect(() => {
    props.fetchUser();
  }, []);

if (!user) return <div className="lds-circle"> </div>;
  const buythousandpoints = () => {
    props.buy1000();
    Swal.fire("Perfect!", "You gain 1000 points!", "success");
  };
  const buyfivehundredpoints = () => {
    props.buy5000();
    Swal.fire("Perfect!", "You gain 5000 points!", "success");
  };
  const buyseventhousandfivehundredpoints = () => {
    props.buy7500();
    Swal.fire("Perfect!", "You gain 7500 points!", "success");
  };

 
  return (
    <div className="bg-gradient-to-r from-green-400 to-blue-500  text-white navbar">
      <section className="flex flex-col items-center">
        <div className=" flex flex-row">
          <h1 className="text-5xl pl-4 cursor-default self-center pb-4 mr-10">
            {user.name}
          </h1>
          <div className="tooltip mt-2">
            <Link href="/redeemed-products">
              <Image
                className="cursor-pointer"
                width="100"
                height="90"
                src="/tesoro.png"
              />
            </Link>
            <h5 className="pl-2 cursor-default">Reddemed products!</h5>
          </div>
        </div>
        <div className="ml-2 mt-4 bg-gradient-to-r from-gray-400 to-blue-300  hover:from-blue-300 hover:to-gray-400 rounded-lg cursor-default">
          <h3 className="m-1 px-4 py-1 border-4 rounded-lg text-black bg-white bg-opacity-80 text-2xl">
            {user.points + " "}
            points
          </h3>
        </div>
      </section>
      <div className="flex flex-col md:flex-row lg:flex-row md:flex-row xl:flex-row 2xl:flex-row justify-evenly items-center w-full items-start  2xl:-mt-6 lg:-mt-6 xl:-mt-6 ">
        <div
          onClick={() => buythousandpoints()}
          className=" bg-gradient-to-r from-gray-400 to-blue-300  hover:from-blue-300 hover:to-gray-400 m-1 px-4 py-1 border-4 rounded-lg text-black border-gray-600 cursor-pointer"
        >
          buy 1000 points
        </div>
        <div
          onClick={() => buyseventhousandfivehundredpoints()}
          className="middle-button bg-gradient-to-r from-gray-400 to-blue-300  hover:from-blue-300 hover:to-gray-400 m-1 px-4 py-1 border-4 rounded-lg text-black border-gray-600 cursor-pointer lg:ml-3 xl:ml-3 2xl:ml-3 order-last md:order-none lg:order-none xl:order-none 2xl:order-none"
        >
          buy 7500 points
        </div>
        <div
          onClick={() => buyfivehundredpoints()}
          className="bg-gradient-to-r from-gray-400 to-blue-300  hover:from-blue-300 hover:to-gray-400 m-1 px-4 py-1 border-4 rounded-lg text-black border-gray-600 cursor-pointer  "
        >
          buy 5000 points
        </div>
      </div>
    </div>
  );
};

const mapStateToProps = (state) => ({
  user: state.user,
});
const mapDispatchToProps = (dispatch) => {
  return {
    fetchUser: () => {
      dispatch(fetchUser());
    },
    buy1000: () => {
      dispatch(buy1000());
    },
    buy5000: () => {
      dispatch(buy5000());
    },
    buy7500: () => {
      dispatch(buy7500());
    },
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(User);
<file_sep>/components/redux/actions/userActions.js
import * as t from '../types';
export const fetchUser = () => {
      return  (dispatch) => {
        fetch('https://coding-challenge-api.aerolab.co/user/me',
          { headers: {
            'Authorization': process.env.NEXT_PUBLIC_AUTHKEY
          }}
          ).then(p => p.json())
          .then(data => {
            const userFetch = data
            
              dispatch(fetchUserSuccess(userFetch))
              })
          .catch(error => 
              dispatch(fetchUserError(error)))
};
}

export const fetchUserSuccess = user => {
  return {
    type: t.FETCH_USER_SUCCESS,
    payload: user
  }
};
export const fetchUserError = error => {
  return {
    type: t.FETCH_USER_ERROR,
    payload: error
  }
};

export const buy1000 =  () => {
  return async (dispatch) => {
    await fetch('https://coding-challenge-api.aerolab.co/user/points',
          {
            method: 'POST',
           headers: {
            'Authorization': process.env.NEXT_PUBLIC_AUTHKEY,
            "Content-Type": "application/json"
          },
           body: JSON.stringify({"amount": 1000})
          }
          );
           dispatch(fetchUser());
           console.log("llego aca")
  }
};
export const buy5000 =  () => {
  return async (dispatch) => {
    await fetch('https://coding-challenge-api.aerolab.co/user/points',
          {
            method: 'POST',
           headers: {
            'Authorization': process.env.NEXT_PUBLIC_AUTHKEY,
            "Content-Type": "application/json"
          },
           body: JSON.stringify({"amount": 5000})
          }
          );
           dispatch(fetchUser());
           console.log("llego aca")
  }
};
export const buy7500 =  () => {
  return async (dispatch) => {
    await fetch('https://coding-challenge-api.aerolab.co/user/points',
          {
            method: 'POST',
           headers: {
            'Authorization': process.env.NEXT_PUBLIC_AUTHKEY,
            "Content-Type": "application/json"
          },
           body: JSON.stringify({"amount": 7500})
          }
          );
           dispatch(fetchUser());
           console.log("llego aca")
  }
}


<file_sep>/components/redux/actions/redeemActions.js
import * as t from '../types';
import {fetchUser} from './userActions';

export const redeemProduct = id => {
return async (dispatch) => {
    await fetch('https://coding-challenge-api.aerolab.co/redeem',
          {
            method: 'POST',
           headers: {
            'Authorization': process.env.NEXT_PUBLIC_AUTHKEY,
            "Content-Type": "application/json",
            'Accept': 'application/json'
          },
           body: JSON.stringify({"productId": id})
          }
          );
           console.log(id);
           dispatch(fetchUser());
  }
 
}
