Developer Usage Front
Si eres desarrollador y quieres implementar parte del código que viste en tus proyectos, te brindamos las herramientas necesarias para que entiendas como ejecutarlo en temas de funcionalidad.
Client/public
En este espacio encontraremos el index.html en donde se va a renderizar toda la app por medio del portal
<div id="root"></div>
Por otra parte, es un archivo incial de <!DOCTYPE html> a diferencia de:
<script src=" Kit code que entrega fontawesome"> esto nos permite usar los iconos que implementamos en la página.
<link href="fonts google"> este link nos permite usar unos tipos de fuentes especificos de la página de Google fonts.Client/src/
En la carpeta de src podremos encontrar todo lo que se va a renderizar en el html con la siguiente estructura:
client/src/assets
En este apartado colocamos todas las imágenes que necesitamos a la mano, también como buenas practicas la mayoría de imágenes deberían incorporarse externamente a través de un link que las almacene en la nube.
client/src/components
Se manejaron componentes funcionales por lo que en este apartado encontrarás todos los componentes que lleven lógica y en los que nos centraremos en explicar en las Function Reference
cliente/src/context
El context se usa de React para tener un contexto global y poder suscribirte y leer la información. En nuestro caso lo usamos para la autenticación con Firebase y poder mantener la persistencia de datos.
authContext.js:
const authContext = createContext(); se crea un contexto con React y lo usamos para la autenticación con
export const useAuth = ()=>{
const context = useContext(authContext);
if (!context) throw new Error('There is not auth provider')
return context
}
const verifyEmail
const signup
const login
const loginWithGoogle
const logout
const resetPassword
Las constantes anteriores se rigen de acuerdo a la documentación en Firebase que nos permite el login, verificar el email y salirnos de la cuenta, ademas de recuperar la contraseña.
https://firebase.google.com/docs/auth/web/start?authuser=0&hl=es aquí la puedes consultar.
export function AuthProvider({ children }) {
const [user, setUser] = useState(null);
La función de authProvider nos permitirá proveer con la información del usuario siempre y cuando haya un usuario logueado, para esto recibe una propiedad children.
El children serán todos aquellos componentes que queremos que nuestro contexto global le pase la información de usuario, esto se verá reflejado en App.js
client/src/handlers
Los handlers son funciones que nos permitirán manejar las acciones por parte del usuario en este apartado tenemos 2 por el momento y un archivo de validaciones para el formulario al cual le vamos a aplicar los handlers.
createAdvisorFromClient.js
export const createAdvisorFromClient = (data,uid)=>{
const ProfileData = axios.post(`http://localhost:3002/Advisors/Create/${uid}`, data)
.then(()=>console.log('Parameters added'))
.catch(err=>console.log(err));
return ProfileData
}
la función createAdvisorFromClient recibe una data (formulario a completar usado en el complete profile) y además recibe un uid, el cual es la referencia que nos entrega Firebase de cada usurio que se registra.
Luego tenemos profileData que manda esa información al backend en la ruta que aparece con todo lo que recibe por parametros, para de esta manera crear un nuevo Advisor.SendProfileDetails.js
export const sendProfileDetails = (data,uid)=>{
const ProfileData = axios.post(`http://localhost:3002/Clients/${uid}`, data)
.then(()=>console.log('Please, verify email'))
.catch(err=>console.log(err));
return ProfileData
}
Al igual que la función anterior recibe unos datos que nos permite modificar los datos de nuestros clientes según el uid que nos entrega Firebase.
Validation
Contiene las validaciones que usamos para el formulario de registro, en el Nickname, Password con una serie de caracteres permitidos puedes buscarlos en Google como regex y ahi te mostrarán ejemplos de como generar una validacion regex.
client/src/Hooks
Aquí deberían ir todos los hooks que necesitemos en el proyecto, para poder modularizar mejor y evitar repetir código. Uno de los presentes es useModal.js que nos permite modificar el estado del modal, para saber si está abierto o cerrado y también para nos permitirá abrir o cerrar el modal. Explicaremos modales en el apartado de Function Reference.
client/src/redux
Se manejaron estados globales dentro de la aplicación con redux (Store), se manejan 3 apartados las actions, el reducer y el store.
Actions: aquí se definen todas las acciones que va a recibir el reducer, las acciones que se le pasan al reducer deben ser claras, toda esta información será despachada al store para que los componentes tengan acceso a él. Aquí podrás encontrar más documentación de como realizar un action en redux: https://es.redux.js.org/docs/basico/acciones.html.
Reducer: El reducer va a contener todos los estados iniciales que podrán ser leídos o modificados dependiendo del action que le pasemos por esta razon el reducer recibe como parametros un estado (initialState) y la action correspondiente:
const rootReducer = (state = initialState, action) => {
switch (action.type) {
case "nombre de la action"
return{
...state,
estado-que-quieres-mod-o-leer: action.payload
}
default:
return ...state
}3.Store: El store recibe todo lo que el reducer procesa para poder estar disponible a todos los componentes suscritos, para mayor información de como crear el store de redux puedes visitar: https://redux.js.org/api/store.
client/src/utils
En esencia la carpeta utils debería usarse para modularizar el código, poniendo allí aquellas funciones reutilizables que no sean tan grandes como para hacer un módulo. En nuestro caso está un array de objetos que contiene los iconos con la ruta del link para de esta manera si queremos cambiar, agregar o quitar algún icono o link de la página pueda ser modificado desde allí afectando en todos los sitios que se encuentre.
client/src/Video
Aquí pondríamos todos los videos que llegasemos a necesitar en la página, por el momento solo tenemos un video el cual usamos ReactPlayer, debemos instalar la dependencia y puedes ver todas las props e instalación necesaria en el siguiente link: https://www.npmjs.com/package/react-player
client/src/Views
En views se mostrarán todos los componentes dumbs o que no manejan lógica, solo que renderizan lo que los componentes smart que están en el apartado components les pasan. Es más la parte visual de la página.
App.js
En app.js le pasamos la función authProvider descrita anteriormente con el contexto de ejecución, además contendrá todas las rutas requeridas por parte del usuario, gran parte de lo que se renderizará estará en estas rutas, con la siguiente estructura.
<Route exact path='/' element={<Landing />} />
El path es la ruta a donde el usuario se dirigirá y el element es el componente que se renderizará.Firebase.js
Aquí se pondrán todas las credenciales para el correcto funcionamiento de Firebase y la inicialización del mismo, puedes visitar la documentación de firebase en el apartado de get started para saber que es lo que necesitas para comenzar tu proyecto web en firebase.
Index.js
El index.js es el archivo que le pasamos al HTML para que renderice toda la información mediante el id "root", para esto le pasamos el Provider de react-redux que contiene el store con toda la información que los componentes pueden leer o modificar, aparte para que funcione en la web le pasamos el BrowserRouter de react-router-dom que nos permite acceder al historial de navegación, redireccionar, crear nuestras rutas a otras páginas entre otras cosas. Además le pasamos el componente App que contiene toda la información de nuestra aplicación.
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
);Last updated