diff --git a/.firebase/hosting.cHVibGlj.cache b/.firebase/hosting.cHVibGlj.cache new file mode 100644 index 00000000..9fd4e6a5 --- /dev/null +++ b/.firebase/hosting.cHVibGlj.cache @@ -0,0 +1 @@ +index.html,1586820061765,a027ac5a687715c8a26157edd0b402a46dae34d8d17c504f8a532cf7aa358c0b diff --git a/.firebaserc b/.firebaserc new file mode 100644 index 00000000..3ce3685a --- /dev/null +++ b/.firebaserc @@ -0,0 +1,5 @@ +{ + "projects": { + "default": "bichigra-m" + } +} diff --git a/.gitignore b/.gitignore index 47735411..d305df47 100644 --- a/.gitignore +++ b/.gitignore @@ -3,4 +3,5 @@ coverage/ node_modules/ .yarn.lock -package-lock.json \ No newline at end of file +package-lock.json +.now \ No newline at end of file diff --git a/Readme.md b/Readme.md index ed84ec5c..7de5e74e 100644 --- a/Readme.md +++ b/Readme.md @@ -1,272 +1,45 @@ -# Creando una Red Social +# Bichigram 🐞 -Bienvenida a tu primer proyecto del track de Frontend en Laboratoria. +## Resúmen del proyecto -En este proyecto construirás una red social, cuya temáticas dejaremos a tu elección. +Bichigram es una red social dirigida a cualquier persona interesada en los artrópodos para a ayudar a otros a identificar, catalogar y aprender sobre ellos. -Aquí algunas ideas para inspirarte: +La aplicación fue creada con un enfóque mobile first, y para la implementación se utilizó HTML5, SASS, Vanilla JS y Firebase. -- Alimentación -- Feminismo -- Educación -- Salud -- Energías Renovables - -Las **caraterísticas técnicas** de tu aplicación serán las siguientes: -- Debe ser una Single-Page Application [SPA](https://dzone.com/articles/how-single-page-web-applications-actually-work) ([versión traducida](https://dzone.com/articles/how-single-page-web-applications-actually-work)) -- Debe ser diseñada con un enfoque [mobile first](https://darwindigital.com/mobile-first-versus-responsive-web-design/) ([versión traducida](https://translate.google.com/translate?hl=&sl=auto&tl=es&u=https%3A%2F%2Fdarwindigital.com%2Fmobile-first-versus-responsive-web-design)) -- Debe permitir la persintencia de datos +Bichigram consiste en una SPA con las siguientes pantallas: + * Página de bienvenida + * Inicio de sesión para usuarios ya registrados + * Registro + * Crear nueva publicación + * Noticias (feed) + * Perfil -Para implementar tu aplicación usarás *HTML5*, *CCS3* o *SASS*, *Vanilla JavaScript(ES6+)*, *Firebase* o *LocalStogarge* - -## Objetivo - -El objetivo de este proyecto es construir una Red Social, Single-Page Application (SPA), responsiva en la que podamos escribir, leer, actualizar y eliminar datos. - -Para ello deberás poner en juego tu creatividad para generar ideas que lleven a una solución original y valiosa del problema, trabajando en equipo buscando feedback constante. - -En otras palabras, seguirás afianzando todo lo aprendido en el Common Core, pero en particular verás : - -### Planificación - -* Te recomendamos utilizar *projects*, *issues* y *milestones* de GitHub para gestionar la planificación de tu proyecto. Estos recursos serán la fuente de organización de tu equipo y a través de estas herramientas tus coaches podrán ver el avance del proyecto y darte feedback. - -* Escribir, de manera colaborativa, las **Definiciones de terminado** y **Criterios de Aceptación** por cada **Historia de usuario** que te daremos para este proyecto y que se deberán ver reflejadas en tu planificación. - -* **Priorizar** la implementación de tus funcionalidades, en función al esfuerzo que demandan en relación al valor que le aportan al usuario, y ejecutar en equipo todas las historias de usuario dentro del tiempo estimado para cada sprint y que finalmente se vean reflejadas en publicaciones completamentamente funcionales al final de cada sprint. - -* Adquirir la disciplina de la completitud, terminando una historia de usuario antes de pasar a la siguiente (es decir, que cumple con *Definición de Terminado* y *Criterios de Aceptación* contemplando todos los puntos que son objetivos de aprendizaje para este proyecto). - -### Desarrollo frontend - -#### Arquitectura de la aplicación - -- Diseñar la arquitectura de tu aplicación, modularizando tu código a través de *es modules* ([`import`](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/import) y [`export`](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/export)) - -- Familiarizarte con el patrón modelo - vista - controlador ([MVC](https://es.wikipedia.org/wiki/Modelo%E2%80%93vista%E2%80%93controlador)). - -#### Tecnologías HTML5 y CSS3/SASS - -* Aplicar HTML5 semántico en tu proyecto. -* Aplicar y reforzar los conceptos fundamentales de CSS3. -* Implementar selectores de clase evitando la redundancia de estilos en CCS3. -* Utilizar `flexbox` para lograr un diseño `mobile first`, implementando un layout que te permita crear un diseño adaptativo para **mobile y desktop** - -A continuación te proporcionamos el layout (diseño) de la vista mobile y desktop que deberás replicar visualmente y cuyo contenido, colores y fuentes de texto, dejaremos a tu elección. - -* Vista mobile - - ![mobile](https://user-images.githubusercontent.com/32286663/56174616-ec9f6100-5fb8-11e9-9edb-d5ef7c251d9c.png) - -* Vista Desktop - - ![desktop](https://user-images.githubusercontent.com/32286663/56174626-fcb74080-5fb8-11e9-8854-26e8d9c4e25f.png) - -#### JavaScript (ES6+) - -* Utilizar modulos de ES6 para poder modularizar tu código JavaScript. -* Reforzar tu conocimiento sobre el uso de Template literals (Template strings). -* Reforzar tu conocimiento de la manipulacion de los elementos del DOM a traves JavaScript. -* Implementar un sistema de rutas para cambiar de una vista a otra de manera dinámica (SPA). -* Testear la lógica de tu aplicación, con Jest cuidando que el coverage pase el 90% de statements (sentencias), functions (funciones), lines (líneas), y branches (ramas). - -### Persistencia de datos - -En los proyectos anteriores solo has consumido (leído) datos, por ejemplo, a través de un archivo `json` o utilizando `fetch`. - -En este proyecto diseñarás la estructura de esos datos, la forma de consultarlos, actualizarlos, modificarlos y eliminarlos según los requerimiento del usuario. Para llevarlo a cabo utilizaras `Firestore` de `Firebase` o `LocalStogarge` una `Web Storage API` - -#### Firebase - -El objetivo de usar Firestore en este proyecto, es que aprendes a manejar y persistir datos a traves de una base de datos no relacional, en tiempo real y puedas implementar operaciones CRUD (Creación, Lectura, Actualización y eliminación) de datos. - -## Consideraciones generales del proyecto - -* Este proyecto debe ser desarrollado en equipos de trabajo de 3 integrantes. - -* La duración propuesta del proyecto es **3 sprints**, con una duración de una semana cada uno. - -* Te daremos las **historias de usuario** con el fin de presentarte los requerimientos y funcionalidades que desea el usuario final. - -* La **planificación es vital**, para ello te recomendamos utilizar el flujo de trabajo colaborativo que nos ofrecen los projects de GitHub, para que puedas **escribir tus definiciones de terminado** y **criterios de aceptación** por cada historia de usuario con el objetivo que determinen, en equipo, **qué hacer** en el sprint y **cómo se realizará**. - -* Para que todas las miembros de tu equipo puedan lograr los objetivos de aprendizaje, deberán determinar cuál será la estrategia de desarrollo que utilizarán: división por sub-historias, pair programming, code reviews, etc. - -## Restricciones Técnicas - -* Debes utilizar `flexbox` o `CSSGrid` para posicionar tus elementos. Si está permitido el uso de frameworks de CCS (bootstrap), y de componentes flotantes. - -* Ya te damos un diseño (layout) de la vista mobile y desktop, queremos que lo repliques a nivel *pixel perfect*, el contenido, paleta de colores y fuentes, depende de la temática que van a elegir como equipo. La implementación de ese layout deberá formar parte de la *definición de terminado* de tus historias de usuario. - -* Los test son **fundamentales** y deberán formar parte de tu definición de terminado, te recomendamos que comiences a implementarlos desde el comienzo. - -## Historias de Usuario - -* Como usuario nuevo debo poder crear una cuenta con email y password válidos para poder iniciar sesion e ingresar a la red social. - -* Como usuario nuevo debo poder tener la opción de iniciar sesión con mi cuenta de Google o Facebook para ingresar a la red social sin necesidad de crear una cuenta de email válido. - -* Como usuario loggeado debo poder crear, guardar, modificar en el mismo lugar (in place) y eliminar una publicación (post) privada o pública, que puede ser una frase o una imagen. - -* Como usuario loggeado debo poder ver todos los posts públicos y privados que he creado hasta ese momento, desde el más reciente hasta el más antiguo, así como la opción de poder cambiar la configuración de privacidad de mis post. +## Planificación -* Yo como usuario loggeado, puedo dar like y llevar un conteo de likes en mi publicación así como poder escribir, guardar, editar o eliminar un comentario en mi publicación. +La planificación se llevó a cabo en [GH Projects](https://github.com/marielcarrillo/CDMX009-Social-Network/projects/1) y se completó por historias de usuario. -* Al final debo poder ingresar a la red social y poder visualizar los datos de mi perfil creado o editarlos. - -* Te dejamos un ejemplo de cómo definir criterios de aceptación y definiciones de terminado para una H.U. Si se te complica definirlas o no tienes idea de que considerar para cada H.U. es de gran ayuda revisar redes sociales como `facebok`, `twitter`, `instagram`, `devopedia` o la red social que más te guste y puedas evaluar qué consideran en cada funcionalidad para darla como terminada y aceptada. - - > Como usuario nuevo debo poder crear una cuenta con email y password para - > poder iniciar sesion. Por otro lado, necesito también tener la opción de - > iniciar sesión con mi cuenta de Google o Facebook. - > - > **Criterios de aceptación** - > - Si el mail o password no es válido, al momento de logearme, debo poder - > ver un mensaje de error. - > - Debe ser visible si hay algún mensaje de error. - > - Debo poder ver esta página de creación en Móviles y desktop (responsive). - > - No debe necesitar recargar la página para crear una cuenta (SPA). - > - > **Definición de terminado** - > - La funcionalidad cumple satisface los criterios de aceptación. - > - La funcionalidad tiene _test unitarios_. - > - El diseño visual corresponde al prototipo de alta fidelidad. - > - El código de esta funcionalidad recibió code review. - > - La funcionalidad esta desplegada y pública para ser probada. - > - La funcionalidad fue probada manualmente. - > - Se hicieron pruebas de usuabilidad y se implementó el feedback si se - > consideró necesario. - -## Objetivos de aprendizaje - -Antes de empezar el proyecto, recuerda agregar tus objetivos de aprendizaje pendientes de tu proyecto -anterior en la siguiente sección. - -### Objetivos de aprendizajes pendientes - - -### HTML y CSS - -* [ ] [HTML semántico](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML) -* [ ] [CSS `flexbox`](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) -* [ ] Construir tu aplicación respetando el diseño realizado (maquetación). - -### DOM y Web APIs - -* [ ] [Manipulación dinámica del DOM](https://developer.mozilla.org/es/docs/Referencia_DOM_de_Gecko/Introducci%C3%B3n) -* [ ] [History API](https://developer.mozilla.org/es/docs/DOM/Manipulando_el_historial_del_navegador) -* [ ] [`localStorage`] - -### Javascript - -* [ ] [Uso de callbacks](https://developer.mozilla.org/es/docs/Glossary/Callback_function) -* [ ] [Consumo de Promesas](https://scotch.io/tutorials/javascript-promises-for-dummies#toc-consuming-promises) -* [ ] Uso ES modules -([`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) -| [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export)) - -### Firebase - -* [ ] [Firestore](https://firebase.google.com/docs/firestore) -* [ ] [Firebase Auth](https://firebase.google.com/docs/auth/web/start) -* [ ] [Firebase security rules](https://firebase.google.com/docs/rules) -* [ ] [Uso de onSnapshot](https://firebase.google.com/docs/firestore/query-data/listen) -| [onAuthStateChanged](https://firebase.google.com/docs/auth/web/start#set_an_authentication_state_observer_and_get_user_data) - -### Testing - -* [ ] [Testeo de tus funciones](https://jestjs.io/docs/es-ES/getting-started) -* [ ] [Testeo asíncrono](https://jestjs.io/docs/es-ES/asynchronous) -* [ ] [Mocking](https://jestjs.io/docs/es-ES/manual-mocks) - -### Colaboración en Github - -* [ ] Branches -* [ ] Pull Requests -* [ ] Tags - -### Organización en Github - -* [ ] Projects -* [ ] Issues -* [ ] Labels -* [ ] Milestones - -### Buenas prácticas de desarrollo - -* [ ] Modularización -* [ ] Nomenclatura / Semántica -* [ ] Linting - -*** - -## Recursos - -### Mobile first - -El concepto de [_mobile first_](https://www.mediaclick.es/blog/diseno-web-responsive-design-y-la-importancia-del-mobile-first/) -hace referencia a un proceso de diseño y desarrollo donde partimos de cómo se ve -y cómo funciona la aplicación en un dispositivo móvil primero, y más adelante se -ve como adaptar la aplicación a pantallas progresivamente grandes y -características específicas del entorno desktop. Esto es en contraposición al -modelo tradicional, donde primero se diseñaban los websites (o webapps) para -desktop y después se trataba de _arrugar_ el diseño para que entre en pantallas -más chicas. La clave acá es asegurarse de que desde el principio diseñan usando -la vista _responsive_ de las herramientas de desarrollador (developer tools) del -navegador. De esa forma, partimos de cómo se ve y comporta la aplicación en una -pantalla y entorno móvil. - -### Múltiples vistas - -En proyectos anteriores nuestras aplicaciones habían estado compuestas de una -sola _vista_ principal (una sóla _página_). En este proyecto se introduce la -necesidad de tener que dividir nuestra interfaz en varias _vistas_ o _páginas_ -y ofrecer una manera de navegar entre ellas. - -### Escritura de datos - -En los proyectos anteriores hemos consumido (leído) datos, pero todavía no -habíamos escrito datos (salvar cambios, crear datos, borrar, ...). En este -proyecto tendrás que crear (salvar) nuevos datos, así como leer, actualizar y -modificar datos existentes. Estos datos se podrán guardar de forma remota -usando [Firestore](https://firebase.google.com/docs/firestore) o de forma -local utilizando`localStorage`. - -### Autenticación y autorización - -Hasta el momento, los proyectos han sido pensados como recursos públicos, donde todos -los usuarios compartían un mismo rol y la misma información. - -En este proyecto tendrás que diferenciar la información a mostrar y modificar, -dependiendo de la identidad del usuario. -De la misma manera deberás crear reglar de autorización para el acceso a los -datos. - -Para esto utilizaras respectivamente -[`Firebase authentication`](https://firebase.google.com/docs/auth/) y -[`Firestore security rules`](https://firebase.google.com/docs/firestore/security/get-started) - -### CSS - -En este proyecto queremos que ganes confianza y experiencia con CSS profesional, -por eso usarás [`flexbox`](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) -para posicionar tus elementos. - -Recuerda que no puedes usar frameworks CSS, sólo *vanilla css* o [*sass*](https://sass-lang.com/). + ### Historias de usuario + + * Como usuario nuevo, debo poder crear una cuenta con: nombre de usuario, foto, mail y contraseña. + * Como usuario existente, debo poder loggear con mi mail/nombre de usuario y contraseña. + * Como usuario loggeado puedo compartir publicaciones. + * Como usuario loggeado puedo editar y eliminar mis publicaciones. + * Como usuario loggeado puedo dar 'me insecta' y ver cuantos 'me insecta' tiene una publicación. + * Como usuario loggeado puedo visitar mi perfil y ver mis datos (nombre y foto de perfil). + + ### Sketching + + ![sketch](https://github.com/marielcarrillo/CDMX009-Social-Network/blob/keupa/readme-img/sketch.jpg) + + ![sketch](https://github.com/marielcarrillo/CDMX009-Social-Network/blob/keupa/readme-img/sketch2.jpg) + + ### Prototipo + + A partir de las ideas en conjunto, se crearon distintos prototipos. + + ![sketch](https://github.com/marielcarrillo/CDMX009-Social-Network/blob/keupa/readme-img/layout.jpg) -### Otras: +Image from Gyazo -* [Pildora SPA](https://www.loom.com/share/fa63a8ad0e9a43428222c15b6f6613d3) -* [Repositorio de pildora de SPA](https://github.com/betsyvies/bootcamp-spa) -* [Pildora de mock Firebase](https://www.youtube.com/watch?v=06myVn41OTY&t=1s) -* [Repositorio de pildora de mock Firebase](https://github.com/Danielalab/2018-2-Testing) -* [Pildora MVC](https://github.com/merunga/todomvc-vanillajs) -* [Modulos: Export](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/export) -* [Modulos: Import](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/import) -* [Diseño web, responsive design y la importancia del mobile first - Media Click](https://www.mediaclick.es/blog/diseno-web-responsive-design-y-la-importancia-del-mobile-first/) -* [Mobile First: el enfoque actual del diseño web móvil - 1and1](https://www.1and1.es/digitalguide/paginas-web/diseno-web/mobile-first-la-nueva-tendencia-del-diseno-web/) -* [Mobile First - desarrolloweb.com](https://desarrolloweb.com/articulos/mobile-first-responsive.html) -* [Mobile First - ZURB](https://zurb.com/word/mobile-first) -* [Mobile First Is NOT Mobile Only - Nielsen Norman Group](https://www.nngroup.com/articles/mobile-first-not-mobile-only/) + Prototipo Alta definición: https://www.figma.com/file/HYBJZXi611TjN9xrBkvRFM/Bichigram?node-id=0%3A1 -*** diff --git a/_mocks_/firebase-auth-mock.js b/_mocks_/firebase-auth-mock.js new file mode 100644 index 00000000..e1b15111 --- /dev/null +++ b/_mocks_/firebase-auth-mock.js @@ -0,0 +1,16 @@ +const auth = () =>{ + return{ + singOut: (user) => { + return new Promise((resolve) =>{ + resolve ('ok ok') + }) + } + } +} +const firebaseAuth = { + auth: auth +} + +export default jest.fn(() => { + return firebaseAuth; +}) \ No newline at end of file diff --git a/_mocks_/firebase-mock.js b/_mocks_/firebase-mock.js new file mode 100644 index 00000000..b56d8288 --- /dev/null +++ b/_mocks_/firebase-mock.js @@ -0,0 +1,21 @@ +const firestore = () => { + return { + collection: (nameCollection) => { + return{ + add: (objData) =>{ + return new Promise((resolve) => { + resolve('ok ok') + }) + } + } + } + } +} + +const firebase = { + firestore: firestore, +} + +export default jest.fn(()=>{ + return firebase; +}) \ No newline at end of file diff --git a/database.rules.json b/database.rules.json new file mode 100644 index 00000000..c0aa595d --- /dev/null +++ b/database.rules.json @@ -0,0 +1,6 @@ +{ + "rules": { + ".read": "auth != null", + ".write": "auth != null" + } +} \ No newline at end of file diff --git a/firebase.json b/firebase.json new file mode 100644 index 00000000..f4ff3ab9 --- /dev/null +++ b/firebase.json @@ -0,0 +1,56 @@ +{ + "hosting": { + "public": "public", + "ignore": [ + "firebase.json", + "**/.*", + "**/node_modules/**" + ], + "rewrites": [ + { + "source": "**", + "destination": "/index.html" + } + ] + }, + "database": { + "rules": "database.rules.json" + }, + "firestore": { + "rules": "firestore.rules", + "indexes": "firestore.indexes.json" + }, + "functions": { + "predeploy": [ + "npm --prefix \"%RESOURCE_DIR%\" run lint", + "npm --prefix \"%RESOURCE_DIR%\" run build" + ], + "source": "functions" + }, + "storage": { + "rules": "storage.rules" + }, + "emulators": { + "functions": { + "port": 5001 + }, + "firestore": { + "port": 8080 + }, + "database": { + "port": 9000 + }, + "hosting": { + "port": 5000 + }, + "pubsub": { + "port": 8085 + } + }, + "rewrites": [ + { + "source": "**", + "destination": "/index.html" + } + ] +} diff --git a/firepit-log.txt b/firepit-log.txt new file mode 100644 index 00000000..39c355cc --- /dev/null +++ b/firepit-log.txt @@ -0,0 +1,27 @@ +Welcome to firepit v1.1.0! +Doing JSON parses for version checks at /snapshot/firepit/vendor/node_modules/firebase-tools/package.json +JSONStream,abort-controller,accepts,agent-base,ajv,ansi-align,ansi-escapes,ansi-regex,ansi-styles,ansicolors,anymatch,archiver,archiver-utils,argparse,array-flatten,arrify,as-array,asn1,assert-plus,async,async-each,asynckit,aws-sign2,aws4,balanced-match,base64-js,basic-auth,basic-auth-connect,bcrypt-pbkdf,big-integer,bignumber.js,binary,binary-extensions,bl,bluebird,body-parser,boxen,brace-expansion,braces,buffer,buffer-crc32,buffer-equal-constant-time,buffer-indexof-polyfill,buffers,bytes,camelcase,capture-stack-trace,cardinal,caseless,chainsaw,chalk,char-spinner,chardet,chokidar,chownr,ci-info,cjson,cli-boxes,cli-color,cli-cursor,cli-spinners,cli-table,cli-width,clone,color,color-convert,color-name,color-string,colornames,colors,colorspace,combined-stream,commander,compare-semver,compress-commons,compressible,compression,concat-map,configstore,connect,connect-query,content-disposition,content-type,cookie,cookie-signature,core-util-is,crc,crc32-stream,create-error-class,cross-env,cross-spawn,crypto-random-string,csv-streamify,d,dashdash,debug,deep-extend,deep-is,defaults,delayed-stream,depd,destroy,diagnostics,didyoumean,dot-prop,dotenv,duplexer2,duplexer3,duplexify,ecc-jsbn,ecdsa-sig-formatter,ee-first,enabled,encodeurl,end-of-stream,env-variable,es5-ext,es6-iterator,es6-symbol,es6-weak-map,escape-html,escape-string-regexp,esprima,etag,event-emitter,event-target-shim,execa,exit-code,express,ext,extend,external-editor,extsprintf,fast-deep-equal,fast-json-stable-stringify,fast-safe-stringify,fast-text-encoding,fast-url-parser,fecha,figures,filesize,fill-range,finalhandler,firebase-tools,flat-arguments,forever-agent,form-data,forwarded,fresh,fs-constants,fs-extra,fs-minipass,fs.realpath,fstream,gaxios,gcp-metadata,get-stream,getpass,glob,glob-parent,glob-slash,glob-slasher,global-dirs,google-auth-library,google-gax,google-p12-pem,got,graceful-fs,gtoken,har-schema,har-validator,has-ansi,has-flag,home-dir,http-errors,http-signature,https-proxy-agent,iconv-lite,ieee754,import-lazy,imurmurhash,inflight,inherits,ini,inquirer,ip-regex,ipaddr.js,is-arrayish,is-binary-path,is-ci,is-extglob,is-fullwidth-code-point,is-glob,is-installed-globally,is-npm,is-number,is-obj,is-path-inside,is-promise,is-redirect,is-retry-allowed,is-stream,is-stream-ended,is-typedarray,is-url,is-wsl,is2,isarray,isexe,isstream,jju,join-path,js-yaml,jsbn,json-bigint,json-parse-helpfulerror,json-schema,json-schema-traverse,json-stringify-safe,jsonfile,jsonparse,jsonschema,jsonwebtoken,jsprim,jwa,jws,klaw,kuler,latest-version,lazystream,listenercount,lodash,lodash._isnative,lodash._objecttypes,lodash._shimkeys,lodash.at,lodash.camelcase,lodash.defaults,lodash.difference,lodash.flatten,lodash.has,lodash.includes,lodash.isarguments,lodash.isboolean,lodash.isinteger,lodash.isnumber,lodash.isobject,lodash.isplainobject,lodash.isstring,lodash.keys,lodash.once,lodash.snakecase,lodash.toarray,lodash.union,lodash.values,log-symbols,logform,long,lowercase-keys,lru-cache,lru-queue,make-dir,marked,marked-terminal,media-typer,memoizee,merge-descriptors,methods,mime,mime-db,mime-types,mimic-fn,minimatch,minimist,minipass,minizlib,mkdirp,morgan,ms,mute-stream,nash,negotiator,next-tick,nice-try,node-emoji,node-fetch,node-forge,normalize-path,npm-run-path,oauth-sign,on-finished,on-headers,once,one-time,onetime,open,ora,os-tmpdir,p-defer,p-finally,package-json,parseurl,path-is-absolute,path-is-inside,path-key,path-to-regexp,performance-now,picomatch,pify,plist,portfinder,prepend-http,process-nextick-args,progress,protobufjs,proxy-addr,pseudomap,psl,punycode,qs,range-parser,raw-body,rc,readable-stream,readdirp,redeyed,registry-auth-token,registry-url,request,restore-cursor,retry-request,rimraf,router,rsvp,run-async,rxjs,safe-buffer,safer-buffer,semver,semver-diff,send,serve-static,setimmediate,setprototypeof,shebang-command,shebang-regex,signal-exit,simple-swizzle,sprintf-js,sshpk,stack-trace,statuses,stream-shift,string-length,string-width,string_decoder,strip-ansi,strip-eof,strip-json-comments,superstatic,supports-color,supports-hyperlinks,tar,tar-stream,tcp-port-used,term-size,text-hex,through,through2,timed-out,timers-ext,tmp,to-regex-range,toidentifier,tough-cookie,toxic,traverse,triple-beam,try-require,tslib,tunnel-agent,tweetnacl,type,type-is,typedarray-to-buffer,unique-string,universal-analytics,unpipe,unzip-response,unzipper,update-notifier,uri-js,url-join,url-parse-lax,util-deprecate,utils-merge,uuid,valid-url,vary,verror,walkdir,wcwidth,which,widest-line,winston,winston-transport,wrappy,write-file-atomic,ws,xdg-basedir,xmlbuilder,xmldom,xtend,yallist,zip-stream,@google-cloud,@grpc,@protobufjs,@types +Installed ft@8.1.1 and packaged ft@8.1.1 +Checking for npm/bin/npm-cli install at /Users/marielcarrillo/.cache/firebase/tools/lib/node_modules/npm/bin/npm-cli +Checking for npm/bin/npm-cli install at /Users/marielcarrillo/.cache/firebase/tools/node_modules/npm/bin/npm-cli +Checking for npm/bin/npm-cli install at /snapshot/firepit/node_modules/npm/bin/npm-cli +Found npm/bin/npm-cli install. +Checking for npm/bin/npm-cli install at /Users/marielcarrillo/.cache/firebase/tools/lib/node_modules/npm/bin/npm-cli +Checking for npm/bin/npm-cli install at /Users/marielcarrillo/.cache/firebase/tools/node_modules/npm/bin/npm-cli +Checking for npm/bin/npm-cli install at /snapshot/firepit/node_modules/npm/bin/npm-cli +Found npm/bin/npm-cli install. +ShellJSInternalError: ENOENT: no such file or directory, unlink '/Users/marielcarrillo/.cache/firebase/runtime/shell' +ShellJSInternalError: ENOENT: no such file or directory, unlink '/Users/marielcarrillo/.cache/firebase/runtime/node.bat' +ShellJSInternalError: ENOENT: no such file or directory, unlink '/Users/marielcarrillo/.cache/firebase/runtime/npm.bat' +Runtime binaries created. +/usr/local/bin/firebase +/usr/local/bin/firebase,/snapshot/firepit/firepit.js,init +Checking for npm/bin/npm-cli install at /Users/marielcarrillo/.cache/firebase/tools/lib/node_modules/npm/bin/npm-cli +Checking for npm/bin/npm-cli install at /Users/marielcarrillo/.cache/firebase/tools/node_modules/npm/bin/npm-cli +Checking for npm/bin/npm-cli install at /snapshot/firepit/node_modules/npm/bin/npm-cli +Found npm/bin/npm-cli install. +Checking for npm/bin/npm-cli install at /Users/marielcarrillo/.cache/firebase/tools/lib/node_modules/npm/bin/npm-cli +Checking for npm/bin/npm-cli install at /Users/marielcarrillo/.cache/firebase/tools/node_modules/npm/bin/npm-cli +Checking for npm/bin/npm-cli install at /snapshot/firepit/node_modules/npm/bin/npm-cli +Found npm/bin/npm-cli install. +ShellJSInternalError: ENOENT: no such file or directory, chmod '/Users/marielcarrillo/.cache/firebase/runtime/node.js' \ No newline at end of file diff --git a/firestore.indexes.json b/firestore.indexes.json new file mode 100644 index 00000000..415027e5 --- /dev/null +++ b/firestore.indexes.json @@ -0,0 +1,4 @@ +{ + "indexes": [], + "fieldOverrides": [] +} diff --git a/firestore.rules b/firestore.rules new file mode 100644 index 00000000..4718b9e9 --- /dev/null +++ b/firestore.rules @@ -0,0 +1,17 @@ +rules_version = '2'; +service cloud.firestore { + match /databases/{database}/documents { + + // This rule allows anyone on the internet to view, edit, and delete + // all data in your Firestore database. It is useful for getting + // started, but it is configured to expire after 30 days because it + // leaves your app open to attackers. At that time, all client + // requests to your Firestore database will be denied. + // + // Make sure to write security rules for your app before that time, or else + // your app will lose access to your Firestore database + match /{document=**} { + allow read, write: if request.time < timestamp.date(2020, 5, 11); + } + } +} \ No newline at end of file diff --git a/functions/.eslintrc.json b/functions/.eslintrc.json new file mode 100644 index 00000000..6b6beb65 --- /dev/null +++ b/functions/.eslintrc.json @@ -0,0 +1,123 @@ +{ + "parserOptions": { + // Required for certain syntax usages + "ecmaVersion": 2017 + }, + "plugins": [ + "promise" + ], + "extends": "eslint:recommended", + "rules": { + // Removed rule "disallow the use of console" from recommended eslint rules + "no-console": "off", + + // Removed rule "disallow multiple spaces in regular expressions" from recommended eslint rules + "no-regex-spaces": "off", + + // Removed rule "disallow the use of debugger" from recommended eslint rules + "no-debugger": "off", + + // Removed rule "disallow unused variables" from recommended eslint rules + "no-unused-vars": "off", + + // Removed rule "disallow mixed spaces and tabs for indentation" from recommended eslint rules + "no-mixed-spaces-and-tabs": "off", + + // Removed rule "disallow the use of undeclared variables unless mentioned in /*global */ comments" from recommended eslint rules + "no-undef": "off", + + // Warn against template literal placeholder syntax in regular strings + "no-template-curly-in-string": 1, + + // Warn if return statements do not either always or never specify values + "consistent-return": 1, + + // Warn if no return statements in callbacks of array methods + "array-callback-return": 1, + + // Require the use of === and !== + "eqeqeq": 2, + + // Disallow the use of alert, confirm, and prompt + "no-alert": 2, + + // Disallow the use of arguments.caller or arguments.callee + "no-caller": 2, + + // Disallow null comparisons without type-checking operators + "no-eq-null": 2, + + // Disallow the use of eval() + "no-eval": 2, + + // Warn against extending native types + "no-extend-native": 1, + + // Warn against unnecessary calls to .bind() + "no-extra-bind": 1, + + // Warn against unnecessary labels + "no-extra-label": 1, + + // Disallow leading or trailing decimal points in numeric literals + "no-floating-decimal": 2, + + // Warn against shorthand type conversions + "no-implicit-coercion": 1, + + // Warn against function declarations and expressions inside loop statements + "no-loop-func": 1, + + // Disallow new operators with the Function object + "no-new-func": 2, + + // Warn against new operators with the String, Number, and Boolean objects + "no-new-wrappers": 1, + + // Disallow throwing literals as exceptions + "no-throw-literal": 2, + + // Require using Error objects as Promise rejection reasons + "prefer-promise-reject-errors": 2, + + // Enforce “for” loop update clause moving the counter in the right direction + "for-direction": 2, + + // Enforce return statements in getters + "getter-return": 2, + + // Disallow await inside of loops + "no-await-in-loop": 2, + + // Disallow comparing against -0 + "no-compare-neg-zero": 2, + + // Warn against catch clause parameters from shadowing variables in the outer scope + "no-catch-shadow": 1, + + // Disallow identifiers from shadowing restricted names + "no-shadow-restricted-names": 2, + + // Enforce return statements in callbacks of array methods + "callback-return": 2, + + // Require error handling in callbacks + "handle-callback-err": 2, + + // Warn against string concatenation with __dirname and __filename + "no-path-concat": 1, + + // Prefer using arrow functions for callbacks + "prefer-arrow-callback": 1, + + // Return inside each then() to create readable and reusable Promise chains. + // Forces developers to return console logs and http calls in promises. + "promise/always-return": 2, + + //Enforces the use of catch() on un-returned promises + "promise/catch-or-return": 2, + + // Warn against nested then() or catch() statements + "promise/no-nesting": 1 + } +} diff --git a/functions/.gitignore b/functions/.gitignore new file mode 100644 index 00000000..40b878db --- /dev/null +++ b/functions/.gitignore @@ -0,0 +1 @@ +node_modules/ \ No newline at end of file diff --git a/functions/index.js b/functions/index.js new file mode 100644 index 00000000..bd698a23 --- /dev/null +++ b/functions/index.js @@ -0,0 +1,8 @@ +const functions = require('firebase-functions'); + +// // Create and Deploy Your First Cloud Functions +// // https://firebase.google.com/docs/functions/write-firebase-functions +// +// exports.helloWorld = functions.https.onRequest((request, response) => { +// response.send("Hello from Firebase!"); +// }); diff --git a/functions/package.json b/functions/package.json new file mode 100644 index 00000000..7b569841 --- /dev/null +++ b/functions/package.json @@ -0,0 +1,25 @@ +{ + "name": "functions", + "description": "Cloud Functions for Firebase", + "scripts": { + "lint": "eslint .", + "serve": "firebase emulators:start --only functions", + "shell": "firebase functions:shell", + "start": "npm run shell", + "deploy": "firebase deploy --only functions", + "logs": "firebase functions:log" + }, + "engines": { + "node": "8" + }, + "dependencies": { + "firebase-admin": "^8.9.0", + "firebase-functions": "^3.3.0" + }, + "devDependencies": { + "eslint": "^5.12.0", + "eslint-plugin-promise": "^4.0.1", + "firebase-functions-test": "^0.1.6" + }, + "private": true +} diff --git a/package.json b/package.json index 9a365577..3d83780d 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,6 @@ "@babel/plugin-transform-modules-commonjs": "^7.2.0", "babel-core": "^7.0.0-bridge.0", "babel-jest": "^24.8.0", - "eslint": "^6.0.1", "eslint-config-airbnb-base": "^13.2.0", "eslint-plugin-import": "^2.18.2", "eslint-plugin-jest": "^22.1.2", @@ -32,5 +31,11 @@ "serve": "^11.0.2", "stylelint": "^10.1.0", "stylelint-config-recommended": "^2.2.0" + }, + "dependencies": { + "@firebase/firestore": "^1.14.1", + "@firebase/storage": "^0.3.32", + "@google-cloud/storage": "^4.7.0", + "firebase": "^7.14.2" } -} \ No newline at end of file +} diff --git a/public/index.html b/public/index.html new file mode 100644 index 00000000..02d348b8 --- /dev/null +++ b/public/index.html @@ -0,0 +1,65 @@ + + + + + + Welcome to Firebase Hosting + + + + + + + + + + + + + + +
+

Welcome

+

Firebase Hosting Setup Complete

+

You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!

+ Open Hosting Documentation +
+

Firebase SDK Loading…

+ + + + diff --git a/src/example.js b/src/example.js deleted file mode 100644 index 52d2c7ea..00000000 --- a/src/example.js +++ /dev/null @@ -1,3 +0,0 @@ -export const example = () => { - // aquí tu código -} \ No newline at end of file diff --git a/src/imgBichigram/abejita.png b/src/imgBichigram/abejita.png new file mode 100755 index 00000000..e3a4a16f Binary files /dev/null and b/src/imgBichigram/abejita.png differ diff --git "a/src/imgBichigram/ara\303\261i.png" "b/src/imgBichigram/ara\303\261i.png" new file mode 100755 index 00000000..4c3bf55f Binary files /dev/null and "b/src/imgBichigram/ara\303\261i.png" differ diff --git a/src/imgBichigram/art1.png b/src/imgBichigram/art1.png new file mode 100755 index 00000000..62833233 Binary files /dev/null and b/src/imgBichigram/art1.png differ diff --git a/src/imgBichigram/art2.png b/src/imgBichigram/art2.png new file mode 100755 index 00000000..606fef96 Binary files /dev/null and b/src/imgBichigram/art2.png differ diff --git a/src/imgBichigram/art3.png b/src/imgBichigram/art3.png new file mode 100755 index 00000000..e049291b Binary files /dev/null and b/src/imgBichigram/art3.png differ diff --git a/src/imgBichigram/art4.png b/src/imgBichigram/art4.png new file mode 100755 index 00000000..5493c36d Binary files /dev/null and b/src/imgBichigram/art4.png differ diff --git a/src/imgBichigram/bichiLogin.png b/src/imgBichigram/bichiLogin.png new file mode 100644 index 00000000..11f4c17a Binary files /dev/null and b/src/imgBichigram/bichiLogin.png differ diff --git a/src/imgBichigram/bichiVerde.png b/src/imgBichigram/bichiVerde.png new file mode 100755 index 00000000..5b027ab4 Binary files /dev/null and b/src/imgBichigram/bichiVerde.png differ diff --git a/src/imgBichigram/bichigram.svg b/src/imgBichigram/bichigram.svg new file mode 100644 index 00000000..e5a7d14d --- /dev/null +++ b/src/imgBichigram/bichigram.svg @@ -0,0 +1 @@ +bichigram \ No newline at end of file diff --git a/src/imgBichigram/bichimicha.png b/src/imgBichigram/bichimicha.png new file mode 100755 index 00000000..529e1319 Binary files /dev/null and b/src/imgBichigram/bichimicha.png differ diff --git a/src/imgBichigram/btnHome.png b/src/imgBichigram/btnHome.png new file mode 100755 index 00000000..aa1d982a Binary files /dev/null and b/src/imgBichigram/btnHome.png differ diff --git a/src/imgBichigram/btnProf.png b/src/imgBichigram/btnProf.png new file mode 100755 index 00000000..90730a9c Binary files /dev/null and b/src/imgBichigram/btnProf.png differ diff --git a/src/imgBichigram/btnShare.png b/src/imgBichigram/btnShare.png new file mode 100755 index 00000000..5159ae7d Binary files /dev/null and b/src/imgBichigram/btnShare.png differ diff --git a/src/imgBichigram/cangrejo.png b/src/imgBichigram/cangrejo.png new file mode 100755 index 00000000..92f59d49 Binary files /dev/null and b/src/imgBichigram/cangrejo.png differ diff --git a/src/imgBichigram/escarabajo.png b/src/imgBichigram/escarabajo.png new file mode 100755 index 00000000..a2379459 Binary files /dev/null and b/src/imgBichigram/escarabajo.png differ diff --git a/src/imgBichigram/escorpion.png b/src/imgBichigram/escorpion.png new file mode 100755 index 00000000..034cf1e7 Binary files /dev/null and b/src/imgBichigram/escorpion.png differ diff --git a/src/imgBichigram/fb.png b/src/imgBichigram/fb.png new file mode 100755 index 00000000..3926f24d Binary files /dev/null and b/src/imgBichigram/fb.png differ diff --git a/src/imgBichigram/fondo1.jpg b/src/imgBichigram/fondo1.jpg new file mode 100755 index 00000000..957340da Binary files /dev/null and b/src/imgBichigram/fondo1.jpg differ diff --git a/src/imgBichigram/fondo2.jpg b/src/imgBichigram/fondo2.jpg new file mode 100755 index 00000000..9fdd5f46 Binary files /dev/null and b/src/imgBichigram/fondo2.jpg differ diff --git a/src/imgBichigram/fondo3.jpg b/src/imgBichigram/fondo3.jpg new file mode 100755 index 00000000..6eece466 Binary files /dev/null and b/src/imgBichigram/fondo3.jpg differ diff --git a/src/imgBichigram/fondoBichi.jpg b/src/imgBichigram/fondoBichi.jpg new file mode 100755 index 00000000..8ac0b94a Binary files /dev/null and b/src/imgBichigram/fondoBichi.jpg differ diff --git a/src/imgBichigram/google.png b/src/imgBichigram/google.png new file mode 100755 index 00000000..93f50490 Binary files /dev/null and b/src/imgBichigram/google.png differ diff --git a/src/imgBichigram/ladybug.png b/src/imgBichigram/ladybug.png new file mode 100755 index 00000000..1315e1ce Binary files /dev/null and b/src/imgBichigram/ladybug.png differ diff --git a/src/imgBichigram/langosta.png b/src/imgBichigram/langosta.png new file mode 100755 index 00000000..a9d1ed01 Binary files /dev/null and b/src/imgBichigram/langosta.png differ diff --git a/src/imgBichigram/logout.png b/src/imgBichigram/logout.png new file mode 100755 index 00000000..62c9340e Binary files /dev/null and b/src/imgBichigram/logout.png differ diff --git a/src/imgBichigram/mariposa.png b/src/imgBichigram/mariposa.png new file mode 100755 index 00000000..652b04e3 Binary files /dev/null and b/src/imgBichigram/mariposa.png differ diff --git a/src/imgBichigram/mariposaAzul.png b/src/imgBichigram/mariposaAzul.png new file mode 100755 index 00000000..990bdbb7 Binary files /dev/null and b/src/imgBichigram/mariposaAzul.png differ diff --git a/src/imgBichigram/membicha.png b/src/imgBichigram/membicha.png new file mode 100755 index 00000000..1162f90c Binary files /dev/null and b/src/imgBichigram/membicha.png differ diff --git a/src/imgBichigram/mosca.png b/src/imgBichigram/mosca.png new file mode 100755 index 00000000..f63578e7 Binary files /dev/null and b/src/imgBichigram/mosca.png differ diff --git a/src/imgBichigram/resp1.jpg b/src/imgBichigram/resp1.jpg new file mode 100755 index 00000000..2fbd015f Binary files /dev/null and b/src/imgBichigram/resp1.jpg differ diff --git a/src/imgBichigram/resp2.jpg b/src/imgBichigram/resp2.jpg new file mode 100755 index 00000000..13192ee4 Binary files /dev/null and b/src/imgBichigram/resp2.jpg differ diff --git a/src/imgBichigram/resp3.jpg b/src/imgBichigram/resp3.jpg new file mode 100755 index 00000000..9d204958 Binary files /dev/null and b/src/imgBichigram/resp3.jpg differ diff --git a/src/imgBichigram/resp4.jpg b/src/imgBichigram/resp4.jpg new file mode 100755 index 00000000..e283996e Binary files /dev/null and b/src/imgBichigram/resp4.jpg differ diff --git a/src/index.html b/src/index.html index bb6937cc..1553cb8f 100644 --- a/src/index.html +++ b/src/index.html @@ -4,9 +4,62 @@ - Document + + + Bichigram - - + +
+
+
+
+ + +
+
+

Una red social
para aprender de artrópodos

+

Ayuda a identificar
y catálogar especies

+

Dale "me embicha" a tus publicaciones favoritas!

+
+
+ +
+
+
+ + + + + + + + + + + + + + - \ No newline at end of file + + diff --git a/src/index.js b/src/index.js deleted file mode 100644 index 35868bab..00000000 --- a/src/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import { example } from './example.js'; - -example(); diff --git a/src/main.js b/src/main.js new file mode 100644 index 00000000..1bc0d7c0 --- /dev/null +++ b/src/main.js @@ -0,0 +1,28 @@ +import { changeView } from './view-controler/router.js'; + + +const init = () => { + changeView(window.location.hash); + window.addEventListener('hashchange', () => changeView(window.location.hash)); +}; + +const initFirebase = () => { + // Your web app's Firebase configuration + const firebaseConfig = { + apiKey: 'AIzaSyA9A0nhwI6q1W6-72LbE4LC9Mi9i3nWSew', + authDomain: 'bichigra-m.firebaseapp.com', + databaseURL: 'https://bichigra-m.firebaseio.com', + projectId: 'bichigra-m', + storageBucket: 'bichigra-m.appspot.com', + messagingSenderId: '349399643965', + appId: '1:349399643965:web:f1b27146da69266891b754', + measurementId: 'G-VSB54NJVLP', + }; + // Initialize Firebase + firebase.initializeApp(firebaseConfig); + firebase.analytics(); + firebase.firestore(); +}; + +window.addEventListener('load', initFirebase); +window.addEventListener('load', init); diff --git a/src/styles/_home.scss b/src/styles/_home.scss new file mode 100644 index 00000000..a964b228 --- /dev/null +++ b/src/styles/_home.scss @@ -0,0 +1,97 @@ +#backgroundHome{ + background-image: url($background1); + background-size: cover; + margin: 0; +} +#gridHome{ + display: grid; + grid-template-columns: auto; + grid-template-rows: 50px 540px 50px; + grid-gap: 2px; + margin: 0px; +} +.h1{ + @include top; +} +.h2{ + background-color: white; + overflow: scroll; + #arthropods{ + display: flex; + flex-direction: row; + justify-content: space-evenly; + margin-block-start: 10px; + margin-block-end: 15px; + .arts{ + width: 80px; + height: auto; + -webkit-filter: drop-shadow(3px 3px 3px #222); + filter: drop-shadow(3px 3px 3px #222); + } + + } + .lilGrid{ + display: grid; + grid-template-columns: 50px 1fr 1fr; + grid-template-rows: 25px 25px; + + } + .g1{ + margin: 5px; + grid-row-start: 1; + grid-row-end: 3; + img{ + border-radius: 50%; + } + + } + .g2{ + + p{ + font-family: tajawal; + font-weight: bold; + font-size: 16px; + margin-block-start: 10px; + margin-block-end: 0px; + } + margin: 0; + grid-column-start: 2; + grid-column-end: 4; + } + .g3{ + grid-column-start: 2; + grid-column-end: 4; + p{ + font-family: tajawal; + font-size: 11px; + margin-block-start: 5px; + margin-block-end: 0px; + } + } + .description{ + margin-left: 5px; + p{ + font-family: tajawal; + font-size: 12pt; + margin-block-start: 3px; + margin-block-end: 0px; + } + } + .location{ + margin-left: 5px; + p{ + font-family: tajawal; + font-size: 10pt; + margin-block-start: 0px; + margin-block-end: 0px; + } + } + .membicha{ + width: 50%; + height: auto; + } +} +.h3{ + margin: 0px; + @include footer; +} diff --git a/src/styles/_login.scss b/src/styles/_login.scss new file mode 100644 index 00000000..db147676 --- /dev/null +++ b/src/styles/_login.scss @@ -0,0 +1,52 @@ +#background2{ + background-image: url($background2); + background-size: cover; + margin: 0; +} +#gridLogin{ + display: grid; + grid-template-columns: 300px; + grid-template-rows: 280px 270px 110px; + grid-gap: 2px; + margin: 0px 30px; +} +.l1{ + p{ + margin: 20px 0px; + @include logoPrim + } + img{ + margin: 0px 20px; + width: auto; + height: 210px; + } +} +.l2{ + display: flex; + flex-direction: column; + align-items: center; + .form{ + margin: 0px 70px; + } + .input{ + @include input; + } + p{ + @include text; + } + .btn{ + margin: 5px 25px; + @include btn; + color: white; + } + .icon{ + margin: 5px 30px; + flex-direction: row; + @include icon; + } +} +.l3{ + p{ + @include text; + } +} diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss new file mode 100644 index 00000000..b55e7298 --- /dev/null +++ b/src/styles/_mixins.scss @@ -0,0 +1,91 @@ +@mixin logoPrim { + font-family: fresca; + font-size: 36pt; + color: $colorPrim; + text-align: center; + letter-spacing: 2px; + text-shadow: 2px 2px 2px black; +} +@mixin logobaby { + margin: 0px; + font-family: fresca; + font-size: 24pt; + color: $colorPrim; + text-align: center; + letter-spacing: 2px; + text-shadow: 2px 2px 2px black; +} +@mixin text { + font-family: tajawal; + font-size: 12pt; + color: $colorPrim; + text-align: center; + letter-spacing: 1pt; + text-shadow: 1px 1px 2px black; +} +@mixin btn { + width: 125px; + height: 25px; + background: $btnColor; + border-radius: 15px; + list-style-type: none; + text-align: center; + + a{ + position: relative; + color: $colorPrim; + } +} +@mixin input{ + margin: 10px 3px; + width: 170px; + padding: 6px 0px ; + box-sizing: border-box; + border: none; + border-bottom: 2px solid grey; + border-radius: 15px; + text-align: center; +} +@mixin icon { + width: 40px; + height: auto; +} +@mixin top { + display: flex; + div{ + margin: 5px 20px; + align-content: space-between; + p{ + + @include logobaby; + } + + } + img{ + margin: 0px 20px; + width: 35px; + height: auto; + } + + + +} +@mixin footer{ + a{ + margin: 0px; + } + ul{ + margin: 0px; + display: flex; + flex-direction: row; + list-style-type: none; + } + li{ + margin: 0px 20px; + } + img{ + margin: 0px; + width: 50px; + height: auto; + } +} diff --git a/src/styles/_newpost.scss b/src/styles/_newpost.scss new file mode 100644 index 00000000..c4c92238 --- /dev/null +++ b/src/styles/_newpost.scss @@ -0,0 +1,69 @@ +#backgroundNewPost{ + background-image: url($background2); + background-size: cover; + font-family: Fresca; + margin: 0; +} +#gridPost{ + display: grid; + grid-template-columns: auto; + grid-template-rows: 50px 540px 50px; + grid-gap: 2px; + margin: 0px; +} +.p1{ + @include top; +} +.p2{ + background-color: white; + form{ + display: flex; + align-items: center; + align-content: center; + flex-direction: column; + } + p{ position: absolute; + @include text; + } + #postPhoto{ + position: relative; + border-radius: 15px; + background-color: palevioletred; + width: 360px; + height: 360px; + input{ + width: 360px; + height: 360px; + opacity: 0; + } + #here{ + position: relative; + // width: 300px; + // height: 300px; + border-radius: 15px; + z-index: 1; + } + img{ + position: absolute; + width: 360px; + height: 360px; + border-radius: 15px; + } + } + .btn{ + @include btn; + color: white; + } + #registerDescription{ + width: 350px; + height: auto; + } + #registerLocation{ + width: 350px; + height: auto; + } +} +.p3{ + margin: 0px; + @include footer; +} diff --git a/src/styles/_newuser.scss b/src/styles/_newuser.scss new file mode 100644 index 00000000..4d15073a --- /dev/null +++ b/src/styles/_newuser.scss @@ -0,0 +1,77 @@ +#background3{ + background-image: url($background3); + background-size: cover; + font-family: Fresca; + margin: 0; +} +#gridNew{ + display: grid; + grid-template-columns: 300px; + grid-template-rows: 150px 350px 150px; + grid-gap: 2px; + margin: 0px 30px; +} +.n1{ + p{ + margin: 50px 0px 15px; + @include logoPrim; + } + h3{ + @include text; + } +} +.n2{ + display: flex; + flex-direction: column; + margin: 10px 30px; + justify-content: center; + align-items: center; + #imgContainer{ + position: relative; + margin: 0px; + width: 150px; + height: 150px; + background-color: hotpink; + border-radius: 15px; + color: white; + p{ + margin: 50px 25px; + position: absolute; + @include text; + } + #img{ + position: absolute; + margin: 0; + width: 150px; + height: 150px; + opacity: 0; + } + img{ + position: absolute; + margin: 0px; + border-radius: 15px; + } + } + .input{ + @include input; + } + .btn{ + margin: 0px 25px; + @include btn; + color: white; + } +} +.n3{ + display: flex; + flex-direction: column; + align-items: center; + p{ + @include text; + } + .icon{ + margin: 5px 30px; + flex-direction: row; + @include icon; + } + +} \ No newline at end of file diff --git a/src/styles/_profile.scss b/src/styles/_profile.scss new file mode 100644 index 00000000..61600a43 --- /dev/null +++ b/src/styles/_profile.scss @@ -0,0 +1,61 @@ +#backgroundProfile{ + background-image: url($background3); + background-size: cover; + margin: 0; +} +#grdProfile{ + display: grid; + grid-template-columns: auto; + grid-template-rows: 50px 540px 50px; + grid-gap: 2px; + margin: 0px; +} +#prof1{ + @include top; +} +.prof2{ + overflow: scroll; + .profilePost{ + display: flex; + justify-content: center; + img{ + width: 150px; + height: auto; + border-radius: 50%; + } + p{ + margin-block-start: 0px; + margin-block-end: 10px; + font-family: tajawal; + font-weight: bold; + font-size: 26px; + color: white; + text-shadow: 1px 1px 2px black; + } + } + .userPosts{ + img{ + width: 100%; + height: auto; + } + .descriptionProf{ + font-family: tajawal; + color: white; + font-size: 16px; + margin-block-end: 3px; + margin-block-start: 0px; + } + .btn{ + @include btn; + color: white; + } + .edit{ + color: grey; + } + } + + +} +.prof3{ + @include footer; +} \ No newline at end of file diff --git a/src/styles/_responsive.scss b/src/styles/_responsive.scss new file mode 100644 index 00000000..7a683ade --- /dev/null +++ b/src/styles/_responsive.scss @@ -0,0 +1,138 @@ +@media screen and (min-width: 500px){ + #background1 { + background-image: url($r1); + background-size: 100% 100%; + } + .gridWelcome{ + grid-template-columns: 1fr; + grid-template-rows: 1.7fr 1fr 1.4fr ; + grid-gap: 12px; + margin: 0px; + } + .w1 #logo{ + top: 35%; + } + .w3 nav #login{ + position: absolute; + left: 50%; + transform: translate(-50%); + + } + #background2{ + background-image: url($r3); + background-size: 100% 100%; + } + #gridLogin{ + grid-template-columns: 1fr; + grid-template-rows: 1fr 1fr 1fr ; + grid-gap: 15px; + } + .l1 img{ + position: absolute; + top: -5%; + left: 48%; + transform: translate(-50%); + } + .l1 p{ + position: absolute; + top: 25%; + left: 50%; + transform: translate(-50%); + + } + button.fb{ + background: none; + border: none; + } + button.google{ + background: none; + border: none; + } + #background3{ + background-image: url($r2); + background-size: 100% 100%; + } + #gridNew{ + grid-template-columns: 1fr; + grid-template-rows: 1fr 3.5fr 1fr ; + gap: 15px; + } + .n1 h3{ + margin-block-end: 0; + } + #backgroundHome{ + background-image: url($r4); + background-size: 100% 100%; + } + #gridHome{ + grid-template-columns: 1fr 600px 1fr; + grid-template-rows: 1fr; + } + .h1{ + margin: 150px 0px; + button{ + background: none; + border: none; + } + } + .h2{ + #posts{ + display: block; + overflow: scroll; + button{ + background: none; + border: none; + } + } + } + .h3{ + margin: 150px 0px; + } + #backgroundNewPost{ + background-image: url($r2); + background-size: 100% 200%; + } + #gridPost{ + grid-template-columns: 1fr 600px 1fr; + grid-template-rows: 800px; + } + .p1{ + margin: 150px 0px; + button{ + background: none; + border: none; + } + } + .p2{ + form{ + margin-top: 30px; + } + } + .p3{ + margin:150px 0px; + } + #backgroundProfile{ + background-image: url($r3); + background-size: 100% 200%; + } + #grdProfile{ + grid-template-columns: 1fr 600px 1fr; + grid-template-rows: 800px; + } + #prof1{ + margin-top: 150px; + button{ + background: none; + border: none; + } + } + .prof3{ + margin-top: 150px; + } + + + + + + + } \ No newline at end of file diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss new file mode 100644 index 00000000..9c33da2f --- /dev/null +++ b/src/styles/_variables.scss @@ -0,0 +1,10 @@ +$btnColor: #0f9e84; +$background: '../imgBichigram/fondoBichi.jpg'; +$background1: '../imgBichigram/fondo1.jpg'; +$background2: '../imgBichigram/fondo2.jpg'; +$background3: '../imgBichigram/fondo3.jpg'; +$colorPrim: white; +$r1: '../imgBichigram/resp1.jpg'; +$r2: '../imgBichigram/resp2.jpg'; +$r3: '../imgBichigram/resp3.jpg'; +$r4: '../imgBichigram/resp4.jpg'; diff --git a/src/styles/_welcome.scss b/src/styles/_welcome.scss new file mode 100644 index 00000000..5d57e43e --- /dev/null +++ b/src/styles/_welcome.scss @@ -0,0 +1,120 @@ +body{ + margin: 0; +} +#background1 { + background-image: url($background); + background-size: cover; + font-family: Fresca; + margin: 0; +} +.gridWelcome{ + display: grid; + grid-template-columns: 360px; + grid-template-rows: 210px 200px 210px ; + grid-gap: 12px; + margin: 0px; +} +.w1{ + display: flex; + align-content: center; + #logo{ + position: absolute; + top: 26%; + left: 50%; + transform: translate(-50%); + animation: fill 0.5s ease forwards 2s; + path:nth-child(1){ + stroke-dasharray: 240; + stroke-dashoffset: 240; + animation: lineAnimation 1.5s ease forwards; + } + path:nth-child(2){ + stroke-dasharray: 117; + stroke-dashoffset: 117; + animation: lineAnimation 1.5s ease forwards 0.2s; + } + path:nth-child(3){ + stroke-dasharray: 143; + stroke-dashoffset: 143; + animation: lineAnimation 1.5s ease forwards 0.4s; + } + path:nth-child(4){ + stroke-dasharray: 231; + stroke-dashoffset: 231; + animation: lineAnimation 1.5s ease forwards 0.6s; + } + path:nth-child(5){ + stroke-dasharray: 117; + stroke-dashoffset: 117; + animation: lineAnimation 1.5s ease forwards 0.8s; + } + path:nth-child(6){ + stroke-dasharray: 258; + stroke-dashoffset: 258; + animation: lineAnimation 1.5s ease forwards 1s; + } + path:nth-child(7){ + stroke-dasharray: 116; + stroke-dashoffset: 116; + animation: lineAnimation 1.5s ease forwards 1.2s; + } + path:nth-child(8){ + stroke-dasharray: 187; + stroke-dashoffset: 187; + animation: lineAnimation 1.5s ease forwards 1.4s; + } + path:nth-child(9){ + stroke-dasharray: 279; + stroke-dashoffset: 279; + animation: lineAnimation 2s ease forwards 2s; + } + } + +} +.w2{ + display: flex; + align-content: center; + flex-direction: column; + @include text; + p{ + animation: fadeIn 5s; + } +} +#newuser{ + display: none; +} +.w3{ + display: flex; + align-content: center; + animation: fadeIn 5s; + nav{ + margin-left: 80px; + #login{ + + @include btn; + } + } + +} + +@keyframes lineAnimation{ + to{ + stroke-dashoffset: 0; + } +} +@keyframes fill{ + from{ + fill: transparent; + } + to{ + fill: white; + } +} +@keyframes fadeIn{ + from{ + opacity: 0; + } + to{ + opacity: 1; + } +} diff --git a/src/styles/style.css b/src/styles/style.css new file mode 100644 index 00000000..df6b50d9 --- /dev/null +++ b/src/styles/style.css @@ -0,0 +1,1084 @@ +#background2 { + background-image: url("../imgBichigram/fondo2.jpg"); + background-size: cover; + margin: 0; +} + +#gridLogin { + display: -ms-grid; + display: grid; + -ms-grid-columns: 300px; + grid-template-columns: 300px; + -ms-grid-rows: 280px 270px 110px; + grid-template-rows: 280px 270px 110px; + grid-gap: 2px; + margin: 0px 30px; +} + +.l1 p { + margin: 20px 0px; + font-family: fresca; + font-size: 36pt; + color: white; + text-align: center; + letter-spacing: 2px; + text-shadow: 2px 2px 2px black; +} + +.l1 img { + margin: 0px 20px; + width: auto; + height: 210px; +} + +.l2 { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.l2 .form { + margin: 0px 70px; +} + +.l2 .input { + margin: 10px 3px; + width: 170px; + padding: 6px 0px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + border: none; + border-bottom: 2px solid grey; + border-radius: 15px; + text-align: center; +} + +.l2 p { + font-family: tajawal; + font-size: 12pt; + color: white; + text-align: center; + letter-spacing: 1pt; + text-shadow: 1px 1px 2px black; +} + +.l2 .btn { + margin: 5px 25px; + width: 125px; + height: 25px; + background: #0f9e84; + border-radius: 15px; + list-style-type: none; + text-align: center; + color: white; +} + +.l2 .btn a { + position: relative; + color: white; +} + +.l2 .icon { + margin: 5px 30px; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + width: 40px; + height: auto; +} + +.l3 p { + font-family: tajawal; + font-size: 12pt; + color: white; + text-align: center; + letter-spacing: 1pt; + text-shadow: 1px 1px 2px black; +} + +#background3 { + background-image: url("../imgBichigram/fondo3.jpg"); + background-size: cover; + font-family: Fresca; + margin: 0; +} + +#gridNew { + display: -ms-grid; + display: grid; + -ms-grid-columns: 300px; + grid-template-columns: 300px; + -ms-grid-rows: 150px 350px 150px; + grid-template-rows: 150px 350px 150px; + grid-gap: 2px; + margin: 0px 30px; +} + +.n1 p { + margin: 50px 0px 15px; + font-family: fresca; + font-size: 36pt; + color: white; + text-align: center; + letter-spacing: 2px; + text-shadow: 2px 2px 2px black; +} + +.n1 h3 { + font-family: tajawal; + font-size: 12pt; + color: white; + text-align: center; + letter-spacing: 1pt; + text-shadow: 1px 1px 2px black; +} + +.n2 { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + margin: 10px 30px; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.n2 #imgContainer { + position: relative; + margin: 0px; + width: 150px; + height: 150px; + background-color: hotpink; + border-radius: 15px; + color: white; +} + +.n2 #imgContainer p { + margin: 50px 25px; + position: absolute; + font-family: tajawal; + font-size: 12pt; + color: white; + text-align: center; + letter-spacing: 1pt; + text-shadow: 1px 1px 2px black; +} + +.n2 #imgContainer #img { + position: absolute; + margin: 0; + width: 150px; + height: 150px; + opacity: 0; +} + +.n2 #imgContainer img { + position: absolute; + margin: 0px; + border-radius: 15px; +} + +.n2 .input { + margin: 10px 3px; + width: 170px; + padding: 6px 0px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + border: none; + border-bottom: 2px solid grey; + border-radius: 15px; + text-align: center; +} + +.n2 .btn { + margin: 0px 25px; + width: 125px; + height: 25px; + background: #0f9e84; + border-radius: 15px; + list-style-type: none; + text-align: center; + color: white; +} + +.n2 .btn a { + position: relative; + color: white; +} + +.n3 { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.n3 p { + font-family: tajawal; + font-size: 12pt; + color: white; + text-align: center; + letter-spacing: 1pt; + text-shadow: 1px 1px 2px black; +} + +.n3 .icon { + margin: 5px 30px; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + width: 40px; + height: auto; +} + +#backgroundNewPost { + background-image: url("../imgBichigram/fondo2.jpg"); + background-size: cover; + font-family: Fresca; + margin: 0; +} + +#gridPost { + display: -ms-grid; + display: grid; + -ms-grid-columns: auto; + grid-template-columns: auto; + -ms-grid-rows: 50px 540px 50px; + grid-template-rows: 50px 540px 50px; + grid-gap: 2px; + margin: 0px; +} + +.p1 { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +.p1 div { + margin: 5px 20px; + -ms-flex-line-pack: justify; + align-content: space-between; +} + +.p1 div p { + margin: 0px; + font-family: fresca; + font-size: 24pt; + color: white; + text-align: center; + letter-spacing: 2px; + text-shadow: 2px 2px 2px black; +} + +.p1 img { + margin: 0px 20px; + width: 35px; + height: auto; +} + +.p2 { + background-color: white; +} + +.p2 form { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -ms-flex-line-pack: center; + align-content: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} + +.p2 p { + position: absolute; + font-family: tajawal; + font-size: 12pt; + color: white; + text-align: center; + letter-spacing: 1pt; + text-shadow: 1px 1px 2px black; +} + +.p2 #postPhoto { + position: relative; + border-radius: 15px; + background-color: palevioletred; + width: 360px; + height: 360px; +} + +.p2 #postPhoto input { + width: 360px; + height: 360px; + opacity: 0; +} + +.p2 #postPhoto #here { + position: relative; + border-radius: 15px; + z-index: 1; +} + +.p2 #postPhoto img { + position: absolute; + width: 360px; + height: 360px; + border-radius: 15px; +} + +.p2 .btn { + width: 125px; + height: 25px; + background: #0f9e84; + border-radius: 15px; + list-style-type: none; + text-align: center; + color: white; +} + +.p2 .btn a { + position: relative; + color: white; +} + +.p2 #registerDescription { + width: 350px; + height: auto; +} + +.p2 #registerLocation { + width: 350px; + height: auto; +} + +.p3 { + margin: 0px; +} + +.p3 a { + margin: 0px; +} + +.p3 ul { + margin: 0px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + list-style-type: none; +} + +.p3 li { + margin: 0px 20px; +} + +.p3 img { + margin: 0px; + width: 50px; + height: auto; +} + +#backgroundHome { + background-image: url("../imgBichigram/fondo1.jpg"); + background-size: cover; + margin: 0; +} + +#gridHome { + display: -ms-grid; + display: grid; + -ms-grid-columns: auto; + grid-template-columns: auto; + -ms-grid-rows: 50px 540px 50px; + grid-template-rows: 50px 540px 50px; + grid-gap: 2px; + margin: 0px; +} + +.h1 { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +.h1 div { + margin: 5px 20px; + -ms-flex-line-pack: justify; + align-content: space-between; +} + +.h1 div p { + margin: 0px; + font-family: fresca; + font-size: 24pt; + color: white; + text-align: center; + letter-spacing: 2px; + text-shadow: 2px 2px 2px black; +} + +.h1 img { + margin: 0px 20px; + width: 35px; + height: auto; +} + +.h2 { + background-color: white; + overflow: scroll; +} + +.h2 #arthropods { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: space-evenly; + -ms-flex-pack: space-evenly; + justify-content: space-evenly; + -webkit-margin-before: 10px; + margin-block-start: 10px; + -webkit-margin-after: 15px; + margin-block-end: 15px; +} + +.h2 #arthropods .arts { + width: 80px; + height: auto; + -webkit-filter: drop-shadow(3px 3px 3px #222); + filter: drop-shadow(3px 3px 3px #222); +} + +.h2 .lilGrid { + display: -ms-grid; + display: grid; + -ms-grid-columns: 50px 1fr 1fr; + grid-template-columns: 50px 1fr 1fr; + -ms-grid-rows: 25px 25px; + grid-template-rows: 25px 25px; +} + +.h2 .g1 { + margin: 5px; + -ms-grid-row: 1; + grid-row-start: 1; + grid-row-end: 3; +} + +.h2 .g1 img { + border-radius: 50%; +} + +.h2 .g2 { + margin: 0; + -ms-grid-column: 2; + grid-column-start: 2; + grid-column-end: 4; +} + +.h2 .g2 p { + font-family: tajawal; + font-weight: bold; + font-size: 16px; + -webkit-margin-before: 10px; + margin-block-start: 10px; + -webkit-margin-after: 0px; + margin-block-end: 0px; +} + +.h2 .g3 { + -ms-grid-column: 2; + grid-column-start: 2; + grid-column-end: 4; +} + +.h2 .g3 p { + font-family: tajawal; + font-size: 11px; + -webkit-margin-before: 5px; + margin-block-start: 5px; + -webkit-margin-after: 0px; + margin-block-end: 0px; +} + +.h2 .description { + margin-left: 5px; +} + +.h2 .description p { + font-family: tajawal; + font-size: 12pt; + -webkit-margin-before: 3px; + margin-block-start: 3px; + -webkit-margin-after: 0px; + margin-block-end: 0px; +} + +.h2 .location { + margin-left: 5px; +} + +.h2 .location p { + font-family: tajawal; + font-size: 10pt; + -webkit-margin-before: 0px; + margin-block-start: 0px; + -webkit-margin-after: 0px; + margin-block-end: 0px; +} + +.h2 .membicha { + width: 50%; + height: auto; +} + +.h3 { + margin: 0px; +} + +.h3 a { + margin: 0px; +} + +.h3 ul { + margin: 0px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + list-style-type: none; +} + +.h3 li { + margin: 0px 20px; +} + +.h3 img { + margin: 0px; + width: 50px; + height: auto; +} + +body { + margin: 0; +} + +#background1 { + background-image: url("../imgBichigram/fondoBichi.jpg"); + background-size: cover; + font-family: Fresca; + margin: 0; +} + +.gridWelcome { + display: -ms-grid; + display: grid; + -ms-grid-columns: 360px; + grid-template-columns: 360px; + -ms-grid-rows: 210px 200px 210px; + grid-template-rows: 210px 200px 210px; + grid-gap: 12px; + margin: 0px; +} + +.w1 { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-line-pack: center; + align-content: center; +} + +.w1 #logo { + position: absolute; + top: 26%; + left: 50%; + -webkit-transform: translate(-50%); + transform: translate(-50%); + -webkit-animation: fill 0.5s ease forwards 2s; + animation: fill 0.5s ease forwards 2s; +} + +.w1 #logo path:nth-child(1) { + stroke-dasharray: 240; + stroke-dashoffset: 240; + -webkit-animation: lineAnimation 1.5s ease forwards; + animation: lineAnimation 1.5s ease forwards; +} + +.w1 #logo path:nth-child(2) { + stroke-dasharray: 117; + stroke-dashoffset: 117; + -webkit-animation: lineAnimation 1.5s ease forwards 0.2s; + animation: lineAnimation 1.5s ease forwards 0.2s; +} + +.w1 #logo path:nth-child(3) { + stroke-dasharray: 143; + stroke-dashoffset: 143; + -webkit-animation: lineAnimation 1.5s ease forwards 0.4s; + animation: lineAnimation 1.5s ease forwards 0.4s; +} + +.w1 #logo path:nth-child(4) { + stroke-dasharray: 231; + stroke-dashoffset: 231; + -webkit-animation: lineAnimation 1.5s ease forwards 0.6s; + animation: lineAnimation 1.5s ease forwards 0.6s; +} + +.w1 #logo path:nth-child(5) { + stroke-dasharray: 117; + stroke-dashoffset: 117; + -webkit-animation: lineAnimation 1.5s ease forwards 0.8s; + animation: lineAnimation 1.5s ease forwards 0.8s; +} + +.w1 #logo path:nth-child(6) { + stroke-dasharray: 258; + stroke-dashoffset: 258; + -webkit-animation: lineAnimation 1.5s ease forwards 1s; + animation: lineAnimation 1.5s ease forwards 1s; +} + +.w1 #logo path:nth-child(7) { + stroke-dasharray: 116; + stroke-dashoffset: 116; + -webkit-animation: lineAnimation 1.5s ease forwards 1.2s; + animation: lineAnimation 1.5s ease forwards 1.2s; +} + +.w1 #logo path:nth-child(8) { + stroke-dasharray: 187; + stroke-dashoffset: 187; + -webkit-animation: lineAnimation 1.5s ease forwards 1.4s; + animation: lineAnimation 1.5s ease forwards 1.4s; +} + +.w1 #logo path:nth-child(9) { + stroke-dasharray: 279; + stroke-dashoffset: 279; + -webkit-animation: lineAnimation 2s ease forwards 2s; + animation: lineAnimation 2s ease forwards 2s; +} + +.w2 { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-line-pack: center; + align-content: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + font-family: tajawal; + font-size: 12pt; + color: white; + text-align: center; + letter-spacing: 1pt; + text-shadow: 1px 1px 2px black; +} + +.w2 p { + -webkit-animation: fadeIn 5s; + animation: fadeIn 5s; +} + +#newuser { + display: none; +} + +.w3 { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-line-pack: center; + align-content: center; + -webkit-animation: fadeIn 5s; + animation: fadeIn 5s; +} + +.w3 nav { + margin-left: 80px; +} + +.w3 nav #login { + width: 125px; + height: 25px; + background: #0f9e84; + border-radius: 15px; + list-style-type: none; + text-align: center; +} + +.w3 nav #login a { + position: relative; + color: white; +} + +@-webkit-keyframes lineAnimation { + to { + stroke-dashoffset: 0; + } +} + +@keyframes lineAnimation { + to { + stroke-dashoffset: 0; + } +} + +@-webkit-keyframes fill { + from { + fill: transparent; + } + to { + fill: white; + } +} + +@keyframes fill { + from { + fill: transparent; + } + to { + fill: white; + } +} + +@-webkit-keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +#backgroundProfile { + background-image: url("../imgBichigram/fondo3.jpg"); + background-size: cover; + margin: 0; +} + +#grdProfile { + display: -ms-grid; + display: grid; + -ms-grid-columns: auto; + grid-template-columns: auto; + -ms-grid-rows: 50px 540px 50px; + grid-template-rows: 50px 540px 50px; + grid-gap: 2px; + margin: 0px; +} + +#prof1 { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +#prof1 div { + margin: 5px 20px; + -ms-flex-line-pack: justify; + align-content: space-between; +} + +#prof1 div p { + margin: 0px; + font-family: fresca; + font-size: 24pt; + color: white; + text-align: center; + letter-spacing: 2px; + text-shadow: 2px 2px 2px black; +} + +#prof1 img { + margin: 0px 20px; + width: 35px; + height: auto; +} + +.prof2 { + overflow: scroll; +} + +.prof2 .profilePost { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} + +.prof2 .profilePost img { + width: 150px; + height: auto; + border-radius: 50%; +} + +.prof2 .profilePost p { + -webkit-margin-before: 0px; + margin-block-start: 0px; + -webkit-margin-after: 10px; + margin-block-end: 10px; + font-family: tajawal; + font-weight: bold; + font-size: 26px; + color: white; + text-shadow: 1px 1px 2px black; +} + +.prof2 .userPosts img { + width: 100%; + height: auto; +} + +.prof2 .userPosts .descriptionProf { + font-family: tajawal; + color: white; + font-size: 16px; + -webkit-margin-after: 3px; + margin-block-end: 3px; + -webkit-margin-before: 0px; + margin-block-start: 0px; +} + +.prof2 .userPosts .btn { + width: 125px; + height: 25px; + background: #0f9e84; + border-radius: 15px; + list-style-type: none; + text-align: center; + color: white; +} + +.prof2 .userPosts .btn a { + position: relative; + color: white; +} + +.prof2 .userPosts .edit { + color: grey; +} + +.prof3 a { + margin: 0px; +} + +.prof3 ul { + margin: 0px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + list-style-type: none; +} + +.prof3 li { + margin: 0px 20px; +} + +.prof3 img { + margin: 0px; + width: 50px; + height: auto; +} + +@media screen and (min-width: 500px) { + #background1 { + background-image: url("../imgBichigram/resp1.jpg"); + background-size: 100% 100%; + } + .gridWelcome { + -ms-grid-columns: 1fr; + grid-template-columns: 1fr; + -ms-grid-rows: 1.7fr 1fr 1.4fr; + grid-template-rows: 1.7fr 1fr 1.4fr; + grid-gap: 12px; + margin: 0px; + } + .w1 #logo { + top: 35%; + } + .w3 nav #login { + position: absolute; + left: 50%; + -webkit-transform: translate(-50%); + transform: translate(-50%); + } + #background2 { + background-image: url("../imgBichigram/resp3.jpg"); + background-size: 100% 100%; + } + #gridLogin { + -ms-grid-columns: 1fr; + grid-template-columns: 1fr; + -ms-grid-rows: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr; + grid-gap: 15px; + } + .l1 img { + position: absolute; + top: -5%; + left: 48%; + -webkit-transform: translate(-50%); + transform: translate(-50%); + } + .l1 p { + position: absolute; + top: 25%; + left: 50%; + -webkit-transform: translate(-50%); + transform: translate(-50%); + } + button.fb { + background: none; + border: none; + } + button.google { + background: none; + border: none; + } + #background3 { + background-image: url("../imgBichigram/resp2.jpg"); + background-size: 100% 100%; + } + #gridNew { + -ms-grid-columns: 1fr; + grid-template-columns: 1fr; + -ms-grid-rows: 1fr 3.5fr 1fr; + grid-template-rows: 1fr 3.5fr 1fr; + gap: 15px; + } + .n1 h3 { + -webkit-margin-after: 0; + margin-block-end: 0; + } + #backgroundHome { + background-image: url("../imgBichigram/resp4.jpg"); + background-size: 100% 100%; + } + #gridHome { + -ms-grid-columns: 1fr 600px 1fr; + grid-template-columns: 1fr 600px 1fr; + -ms-grid-rows: 1fr; + grid-template-rows: 1fr; + } + .h1 { + margin: 150px 0px; + } + .h1 button { + background: none; + border: none; + } + .h2 #posts { + display: block; + overflow: scroll; + } + .h2 #posts button { + background: none; + border: none; + } + .h3 { + margin: 150px 0px; + } + #backgroundNewPost { + background-image: url("../imgBichigram/resp2.jpg"); + background-size: 100% 200%; + } + #gridPost { + -ms-grid-columns: 1fr 600px 1fr; + grid-template-columns: 1fr 600px 1fr; + -ms-grid-rows: 800px; + grid-template-rows: 800px; + } + .p1 { + margin: 150px 0px; + } + .p1 button { + background: none; + border: none; + } + .p2 form { + margin-top: 30px; + } + .p3 { + margin: 150px 0px; + } + #backgroundProfile { + background-image: url("../imgBichigram/resp3.jpg"); + background-size: 100% 200%; + } + #grdProfile { + -ms-grid-columns: 1fr 600px 1fr; + grid-template-columns: 1fr 600px 1fr; + -ms-grid-rows: 800px; + grid-template-rows: 800px; + } + #prof1 { + margin-top: 150px; + } + #prof1 button { + background: none; + border: none; + } + .prof3 { + margin-top: 150px; + } +} +/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/src/styles/style.css.map b/src/styles/style.css.map new file mode 100644 index 00000000..c5dc1278 --- /dev/null +++ b/src/styles/style.css.map @@ -0,0 +1,18 @@ +{ + "version": 3, + "mappings": "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", + "sources": [ + "style.scss", + "_variables.scss", + "_mixins.scss", + "_login.scss", + "_newuser.scss", + "_newpost.scss", + "_home.scss", + "_welcome.scss", + "_profile.scss", + "_responsive.scss" + ], + "names": [], + "file": "style.css" +} \ No newline at end of file diff --git a/src/styles/style.scss b/src/styles/style.scss new file mode 100644 index 00000000..da74e7dc --- /dev/null +++ b/src/styles/style.scss @@ -0,0 +1,9 @@ +@import '_variables', + '_mixins', + '_login', + '_newuser', + '_newpost', + '_home', + '_welcome', + '_profile', + '_responsive'; diff --git a/src/view-controler/router.js b/src/view-controler/router.js new file mode 100644 index 00000000..f542dd35 --- /dev/null +++ b/src/view-controler/router.js @@ -0,0 +1,27 @@ +import { components } from '../view/index.js'; + +const changeView = (route) => { + const container = document.querySelector('#container'); + container.innerHTML = ''; + switch (route) { + case '#/home': + container.appendChild(components.home()); + break; + case '#/newpost': + container.appendChild(components.newpost()); + break; + case '#/profile': + container.appendChild(components.profile()); + break; + case '#/login': + container.appendChild(components.login()); + break; + case '#/newuser': + container.appendChild(components.newuser()); + break; + default: + break; + } +}; + +export { changeView }; diff --git a/src/view/home.js b/src/view/home.js new file mode 100644 index 00000000..01c7c443 --- /dev/null +++ b/src/view/home.js @@ -0,0 +1,91 @@ +const welcomeview = document.querySelector('#background1'); +export default () => { + welcomeview.innerHTML = ''; + const viewHome = ` +
+
+
+

Bichigram

+
+
+
+
+ + + + +
+
+
+
+ +
+
+
+`; + const divElement = document.createElement('div'); + divElement.innerHTML = viewHome; + + // initializing firestore + const db = firebase.firestore(); + const postsRef = db.collection('posts').orderBy('date', 'desc'); + const auth = firebase.auth(); + + // calling the docs and adding to the html + postsRef.onSnapshot((snap) => { + const p = document.querySelector('#posts'); + p.innerHTML = ''; + snap.forEach((doc) => { + const div = `
+
+
+

${doc.data().user}

+

${doc.data().date.toDate()}

+
+

${doc.data().description}

+

${doc.data().location}

+
+ +
`; + const nodo = document.createElement('div'); + nodo.innerHTML = div; + p.appendChild(nodo); + }); + + // Getting all the 'like' buttons to be manipulated in a node list + const likes = document.querySelectorAll('.likes'); + // Increments the counter (likes) to the target 'me embicha' button + likes.forEach(node => node.addEventListener('click', e => { + const id = e.target.id; + const likesRef = db.collection('posts').doc(id); + const increment = firebase.firestore.FieldValue.increment(1); + likesRef.update({ + counter: increment, + }); + })); + +}); + + // logout + const logout = divElement.querySelector('#logoutBtn1'); + logout.addEventListener('click', (e) => { + e.preventDefault(); + auth.signOut().then(() => { + window.location.hash = '#/login'; + }); + }); + + return divElement; +}; diff --git a/src/view/index.js b/src/view/index.js new file mode 100644 index 00000000..efa72fc5 --- /dev/null +++ b/src/view/index.js @@ -0,0 +1,21 @@ +import Home from './home.js'; +import Newpost from './newpost.js'; +import Profile from './profile.js'; +import Login from './login.js'; +import Register from './newuser.js'; + +const components = { + home: Home, + newpost: Newpost, + profile: Profile, + login: Login, + newuser: Register, +}; + +// animation +const logo = document.querySelectorAll('#logo path'); +for (let i = 0; i < logo.length; i++) { + console.log(`Letter ${i} is ${logo[i].getTotalLength()}`); +} +export { components }; + diff --git a/src/view/login.js b/src/view/login.js new file mode 100644 index 00000000..98c65be7 --- /dev/null +++ b/src/view/login.js @@ -0,0 +1,73 @@ +const welcomeview = document.querySelector('#background1'); +export default () => { + welcomeview.innerHTML = ' '; + const viewLogin = ` +
+
+
+
+

Bichigram

+
+
+

Una red social
para aprender de artrópodos!

+
+
+
+ +
+
+ + +
+
+
+

¿No tienes una cuenta? Regístrate

+
+
+
`; + + // nodes (for the creation of the HTML elements) + const divElement = document.createElement('div'); + divElement.innerHTML = viewLogin; + + // nodes (to get the DOM elements inside the form and initialize the login function) + + const emailText = divElement.querySelector('#emailText'); + const passwordText = divElement.querySelector('#passwordText'); + const loginBtn = divElement.querySelector('#loginBtn'); + const fbBtn = divElement.querySelector('.fb'); + const gBtn = divElement.querySelector('.google'); + + // login event + loginBtn.addEventListener('click', () => { + const email = emailText.value; + const pass = passwordText.value; + const auth = firebase.auth(); + + // sign in with firebase functions + const promise = auth.signInWithEmailAndPassword(email, pass); + promise.then(() => { window.location.hash = '#/home'; }); + promise.catch(err => (err)); + }); + + + // facebook sign up + fbBtn.addEventListener('click', () => { + const auth = firebase.auth(); + const provider = new firebase.auth.FacebookAuthProvider(); + const promise = auth.signInWithPopup(provider); + + promise.then(() => { window.location.hash = '#/home'; }); + promise.catch(err => (err)); + }); + + // google sign up + gBtn.addEventListener('click', () => { + const auth = firebase.auth(); + const provider = new firebase.auth.GoogleAuthProvider(); + const promise = auth.signInWithPopup(provider); + promise.then(() => { window.location.hash = '#/home'; }); + promise.catch(err => (err)); + }); + return divElement; +}; diff --git a/src/view/newpost.js b/src/view/newpost.js new file mode 100644 index 00000000..8290a394 --- /dev/null +++ b/src/view/newpost.js @@ -0,0 +1,120 @@ +const welcomeview = document.querySelector('#background1'); + +export default () => { + welcomeview.innerHTML = ' '; + // firebase + const db = firebase.firestore(); + const storage = firebase.storage(); + const docRef = db.collection('posts'); + const auth = firebase.auth(); + + // var globales + let url; + const viewNewPost = ` +
+
+
+

Bichigram

+
+
+
+
+
+
+

Sube tu bicho :)

+ +

+
+
+ +
+
+
+ +
+
+
`; + + // nodos + const divElement = document.createElement('div'); + divElement.innerHTML = viewNewPost; + + // get the div elements + const imgUpload = divElement.querySelector('#imgUpload'); + const shareImg = divElement.querySelector('#btnShare'); + const registerDescription = divElement.querySelector('#registerDescription'); + const registerLocation = divElement.querySelector('#registerLocation'); + + // Display the image + imgUpload.onchange = function (e) { + // FileReader permite leer files o blob del lado cliente de manera asíncrona + const reader = new FileReader(); + // Lee el archivo y lo manda a FileReader + reader.readAsDataURL(e.target.files[0]); + // Cuando esté listo, ejecuta el código + reader.onload = function () { + const preview = divElement.querySelector('#here'); + const image = document.createElement('img'); + + image.src = reader.result; + preview.innerHTML = ''; + preview.append(image); + }; + }; + + // func + listener for uploading the image to storage + imgUpload.addEventListener('change', () => { + // get file + const image = divElement.querySelector('#imgUpload').files[0]; + const imageName = image.name; + + // create storage reference --where the images will be uploaded and saved-- + const storageRef = storage.ref(`images/${imageName}`); + + // upload the image to storage + storageRef.put(image) + .then(snap => snap.ref.getDownloadURL()) + .then((link) => { + url = link; + }); + }); + // sending the info to firestore + shareImg.addEventListener('click', () => { + const descr = registerDescription.value; + const loc = registerLocation.value; + const user = firebase.auth().currentUser; + docRef.add({ + id: user.uid, + user: user.displayName, + userphoto: user.photoURL, + postimg: url, + description: descr, + location: loc, + date: firebase.firestore.Timestamp.fromDate(new Date()), + counter: 0, + }).then(() => { window.location.hash = '#/home'; }); + }); + + // logout + const logout = divElement.querySelector('#logoutBtn2'); + logout.addEventListener('click', (e) => { + e.preventDefault(); + auth.signOut().then(() => { + window.location.hash = '#/login'; + }); + }); + + return divElement; +}; diff --git a/src/view/newuser.js b/src/view/newuser.js new file mode 100644 index 00000000..4a37d23a --- /dev/null +++ b/src/view/newuser.js @@ -0,0 +1,96 @@ +const welcomeview = document.querySelector('#background1'); +export default () => { + welcomeview.innerHTML = ' '; + const viewNewUser = ` +
+
+
+

Bichigram

+

Registro!

+
+
+
+

Agrega tu foto

+ + +
+
+
+
+
+ +
+
+
+

Regístrate con:

+
+ + +
+
+
+
`; + + // render nodes + const divElement = document.createElement('div'); + divElement.innerHTML = viewNewUser; + + // firebase + const auth = firebase.auth(); + + // Nodes from DOM elements + const image = divElement.querySelector('#img'); + const usernameText = divElement.querySelector('#signupUser'); + const emailText = divElement.querySelector('#signupEmail'); + const passwordText = divElement.querySelector('#signupPassword'); + const signupBtn = divElement.querySelector('#signup'); + const fbBtn = divElement.querySelector('.fb'); + const gBtn = divElement.querySelector('.google'); + let url; + + // profile img + image.addEventListener('change', (e) => { + const file = e.target.files[0]; + const x = firebase.storage().ref('profilePics').child(file.name).put(file) + .then((snap) => { return snap.ref.getDownloadURL(); }) + .then(function (link) { + url = link; + const img = divElement.querySelector('#myimg'); + img.src = link; + }); + console.log(x); + }); + + // signup with Email + signupBtn.addEventListener('click', (e) => { + e.preventDefault(); + const email = emailText.value; + const pass = passwordText.value; + const username = usernameText.value; + auth.createUserWithEmailAndPassword(email, pass).then((snap) => { + snap.user.updateProfile({ + displayName: username, + photoURL: url, + }); + }).then(() => window.location.hash = '#/home'); + }); + + // facebook sign up + fbBtn.addEventListener('click', () => { + const provider = new firebase.auth.FacebookAuthProvider(); + const promise = auth.signInWithPopup(provider); + promise.then(() => window.location.hash = '#/home'); + promise.catch((err) => { return (err); }); + }); + + // google sign up + gBtn.addEventListener('click', () => { + const provider = new firebase.auth.GoogleAuthProvider(); + const promise = auth.signInWithPopup(provider); + promise.then(() => { window.location.hash = '#/home' } ); + promise.catch((err) => { return (err); } ); + }); + + return divElement; + +}; diff --git a/src/view/profile.js b/src/view/profile.js new file mode 100644 index 00000000..fad17613 --- /dev/null +++ b/src/view/profile.js @@ -0,0 +1,154 @@ +const welcomeview = document.querySelector('#background1'); +export default () => { + welcomeview.innerHTML = ' '; + const viewProfile = ` +
+
+
+

Bichigram

+
+
+
+
+
+
+
+ +
+
+ + `; + // nodos + const divElement = document.createElement('div'); + divElement.innerHTML = viewProfile; + const db = firebase.firestore(); + const postsRef = db.collection('posts'); + const auth = firebase.auth(); + + // elementos del DOM + const showInfo = divElement.querySelector('.profilePost'); + const userPosts = divElement.querySelector('.userPosts'); + + // get the Profile info + const user = firebase.auth().currentUser; + if (user != null) { + const profileInfo = ` +
+ +

${user.displayName}

+
+ `; + showInfo.innerHTML = profileInfo; + console.log(user); + } + + // setting posts info + function renderPost(doc) { + const div = document.createElement('div'); + const image = document.createElement('img'); + const description = document.createElement('p'); + description.className = 'descriptionProf'; + + const location = document.createElement('p'); + location.className = 'descriptionProf'; + + const cross = document.createElement('button'); + cross.innerHTML = 'DELETE'; + cross.className = 'btn'; + + const editBtn = document.createElement('button'); + editBtn.innerHTML = 'EDIT'; + editBtn.className = 'btn'; + + div.setAttribute('data-id', doc.id); + image.src = doc.data().postimg; + description.textContent = doc.data().description; + location.textContent = doc.data().location; + + div.appendChild(image); + div.appendChild(description); + div.appendChild(location); + div.appendChild(cross); + div.appendChild(editBtn); + + userPosts.appendChild(div); + + console.log(div); + // delete the data + cross.addEventListener('click', (e) => { + const id = e.target.parentElement.getAttribute('data-id'); + postsRef.doc(id).delete(); + }); + + // edit the data - open modal + editBtn.addEventListener('click', (e) => { + const id = e.target.parentElement.getAttribute('data-id'); + const divModal = ``; + userPosts.innerHTML = divModal; + const editOk = document.querySelector('#edit-ok'); + // this get the data to update + editOk.addEventListener('click', (e) => { + const editThis = postsRef.doc(id); + const newDesc = document.querySelector('#photoDesc'); + const setDescription = newDesc.value; + const newLoc = document.querySelector('#photoLoc'); + const setLocation = newLoc.value; + + // here we set the new description and location, + // *Necesitan actualizarse ambos campos, sino se queda como "null" + return editThis.update({ + description: setDescription, + location: setLocation, + }) + .then(() => { + console.log('Document successfully updated!'); + // *quiero cambiar la vista o cerrar la modal, AIUDA + window.location.hash = '#/home'; + }) + .catch((error) => { + // The document probably doesn't exist. + console.error('Error updating document: ', error); + }); + }); + }); + } + // get the data + postsRef.where('id', '==', user.uid).onSnapshot((snapshot) => { + const changes = snapshot.docChanges(); + changes.forEach((change) => { + if (change.type === 'added') { + renderPost(change.doc); + } else if (change.type === 'removed') { + const div = userPosts.querySelector('[data-id=' + change.doc.id + ']'); + renderPost.removeChild(div); + } + }); + }); + + // logout + const logout = divElement.querySelector('#logoutBtn3'); + logout.addEventListener('click', (e) => { + e.preventDefault(); + auth.signOut().then(() => { + window.location.hash = '#/login'; + }); + }); + + return divElement; +}; diff --git a/storage.rules b/storage.rules new file mode 100644 index 00000000..d494542e --- /dev/null +++ b/storage.rules @@ -0,0 +1,7 @@ +service firebase.storage { + match /b/{bucket}/o { + match /{allPaths=**} { + allow read, write: if request.auth!=null; + } + } +} diff --git a/test/example.spec.js b/test/example.spec.js deleted file mode 100644 index 1aca05e9..00000000 --- a/test/example.spec.js +++ /dev/null @@ -1,7 +0,0 @@ -import { example } from '../src/example.js'; - -describe('example', () => { - it('debería ser una función', () => { - expect(typeof example).toBe('function'); - }); -}); \ No newline at end of file diff --git a/test/testTemplateFucntions.spec.js b/test/testTemplateFucntions.spec.js new file mode 100644 index 00000000..ad2db042 --- /dev/null +++ b/test/testTemplateFucntions.spec.js @@ -0,0 +1,53 @@ +//import {login} from '../test/testTemplateFunctions.js'; +import MockAuth from '../_mocks_/firebase-auth-mock.js'; +import MockFirebase from '../_mocks_/firebase-mock.js'; +global.firebase = MockFirebase(); +global.firebaseAuth = MockAuth(); + +// login +function login(email){ + if(email !='') return 'ok' +} + +test ('email valdiation', () =>{ + let email= 'user@123.com'; + expect(login(email)).toBe('ok') +}) + +// Add data +const addData = (post) => + firebase.firestore().collection('posts').add({ + id: "1234", + user: 'User123', + userphoto: 'url', + postimg: 'url', + description: post, + location: 'loc', + date: 'date', + counter: 0, + }); + + describe('addData',() => { + it('should add doc', ()=>{ + return addData('cual es su id'). then((data) => { + expect(data).toBe('ok ok'); + }) + }) + }); + +// logout +const logout = () => + firebaseAuth.auth().singOut(() => { + return 'ok ok' + }); + +describe('logout', () => { + it('should log out', ()=>{ + return logout().then((user => { + expect(user).toBe('ok ok'); + })) + }) +}); + + + \ No newline at end of file diff --git a/y b/y new file mode 100644 index 00000000..415027e5 --- /dev/null +++ b/y @@ -0,0 +1,4 @@ +{ + "indexes": [], + "fieldOverrides": [] +}