Testando2

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}

desktop.ini

@@ -0,0 +1,6 @@
+[.ShellClassInfo]
+IconResource=C:\Users\Rudson\Desktop\Icones\ICONES RAYNARA\midia-social.ico,0
+[ViewState]
+Mode=
+Vid=
+FolderType=Generic

package.json

@@ -16,6 +16,7 @@
     "pretest": "npm run htmlhint && npm run eslint && npm run stylelint",
     "test": "jest --coverage",
     "start": "serve -s src/"
+
   },
   "devDependencies": {
     "@babel/core": "^7.11.4",
@@ -34,5 +35,8 @@
   },
   "engines": {
     "node": ">=14"
+  },
+  "dependencies": {
+    "firebase": "^9.6.9"
   }
-}
+}

src/annotation.txt

@@ -0,0 +1,13 @@
+
+
+FAZENDO:
+- fazer função para aumentar a linha do textarea
+- fazer função que verifique o tamanho do container header e atribua o tamanho para o modal menu --> class="modal-dropdown"
+
+
+FAZER:
+CSS - REPSONSIVO
+- arrumar os tamanhos de TEXTO E ÍCONES no media querie (3 medidas - figma)
+- aumentar um pouco os espaçamentos e paddings/margins, dependendo do elemento
+- arrumar a altura do top
+- aumentar a largura do dropdown menu, para diferentes tamanhos de telas

src/config/__mocks__/export.js

@@ -0,0 +1,13 @@
+export const initializeApp = jest.fn();
+export const getAuth = jest.fn();
+export const createUserWithEmailAndPassword = jest.fn();
+export const signInWithEmailAndPassword = jest.fn();
+export const GoogleAuthProvider = jest.fn();
+export const signInWithPopup = jest.fn();
+export const onAuthStateChanged = jest.fn();
+export const signOut = jest.fn();
+export const sendPasswordResetEmail = jest.fn();
+export const sendEmailVerification = jest.fn();
+export const getFirestore = jest.fn();
+export const collection = jest.fn();
+export const addDoc = jest.fn();

src/config/authentication.js

@@ -0,0 +1,39 @@
+import {
+  createUserWithEmailAndPassword,
+  signInWithEmailAndPassword,
+  GoogleAuthProvider,
+  signInWithPopup,
+  signOut,
+  sendPasswordResetEmail,
+  onAuthStateChanged,
+  updateProfile,
+} from './export.js';
+import { auth } from './start-firebase.js';
+
+export function registerNewUser(name, email, password) {
+  return createUserWithEmailAndPassword(auth, email, password)
+    .then(() => updateProfile(auth.currentUser, { displayName: name }));
+}
+
+export function authUserLabFriends(email, password) {
+  return signInWithEmailAndPassword(auth, email, password);
+}
+
+export function authUserWithGoogle() {
+  const provider = new GoogleAuthProvider();
+  return signInWithPopup(auth, provider);
+}
+
+export function logout() {
+  return signOut(auth).then();
+}
+
+export function forgotPassword(email) {
+  return sendPasswordResetEmail(auth, email);
+}
+
+export function authChange(cb) {
+  return onAuthStateChanged(auth, (user) => {
+    cb(user !== null);
+  });
+}

src/config/export.js

@@ -0,0 +1,13 @@
+export {
+  getAuth,
+  createUserWithEmailAndPassword,
+  signInWithEmailAndPassword,
+  GoogleAuthProvider,
+  signInWithPopup,
+  signOut,
+  sendPasswordResetEmail,
+  onAuthStateChanged,
+  updateProfile,
+} from 'https://www.gstatic.com/firebasejs/9.6.9/firebase-auth.js'; // eslint-disable-line
+
+export { getFirestore, collection, addDoc, getDocs } from 'https://www.gstatic.com/firebasejs/9.6.9/firebase-firestore.js'; // eslint-disable-line

src/config/posts.js

@@ -0,0 +1,33 @@
+import { collection, addDoc } from './export.js';
+import { db, auth } from './start-firebase.js';
+
+export function createNewPost(newText) {
+  try {
+    if (newText.length === 0) {
+      // colocar mensagem avisando que não tem texto na postagem
+      return;
+    }
+
+    const postsCollection = collection(db, 'posts');
+    const newPost = {
+      userId: auth.currentUser.uid,
+      text: newText,
+      like: 0,
+      createdAt: new Date()
+    };
+
+    addDoc(postsCollection, newPost)
+      .then(() => {
+        window.location.hash = '#feed';
+      })
+      .catch((error) => {
+        return error; // só return ?
+      });
+  } catch (e) {
+    return e;
+  }
+}
+
+export function getPosts() {
+  // recuperar posts do firebase
+}

src/config/start-firebase.js

@@ -0,0 +1,16 @@
+// eslint-disable-next-line
+import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.6.9/firebase-app.js';
+import { getAuth, getFirestore } from './export.js';
+
+const firebaseConfig = {
+  apiKey: 'AIzaSyCNu5tg68pS65UVJ6vaUjYgYonYzfYvR7w',
+  authDomain: 'laboratoriafriends.firebaseapp.com',
+  projectId: 'laboratoriafriends',
+  storageBucket: 'laboratoriafriends.appspot.com',
+  messagingSenderId: '1048862460473',
+  appId: '1:1048862460473:web:7a932ebb5a4a76eccc9be8',
+};
+
+const app = initializeApp(firebaseConfig);
+export const auth = getAuth(app);
+export const db = getFirestore(app);

src/css/components/button.css

@@ -0,0 +1,102 @@
+button {
+  cursor: pointer;
+}
+.user-button {
+  width: 100%;
+  padding: 8px 10px;
+  font-size: 1rem;
+  font-weight: 600;
+  margin: var(--spacing-medium-top-bottom);
+  border: var(--border-input);
+  border-radius: var(--spacing-small);
+}
+.user-button:active {
+  transform: translateY(2px);
+}
+.button-pink {
+  background-color: var(--color-dark-pink);
+  color: var(--color-white);
+}
+.button-green,
+.button-add-img {
+  background-color: var(--color-dark-green);
+}
+.button-edit-profile {
+  margin: 20px 0;
+}
+.button-icon-post,
+.button-icon-profile {
+  display: flex;
+  border: none;
+  cursor: pointer;
+}
+.button-icon,
+.button-icon-post,
+.button-icon-post-edit {
+  background-color: var(--color-white);
+  border: none;
+}
+.button-icon-post-edit {
+  border-radius: 5px;
+  border: none;
+}
+.button-user-add-img {
+  display: flex;
+  padding: 10px 0;
+}
+.button-icon-profile {
+  width: 55px;
+  padding: 0;
+  padding-top: 5px;
+  background: var(--color-dark-green);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.button-add-img {
+  background-color: var(--color-dark-green);
+  margin: 0;
+  padding-bottom: 0;
+}
+.button-like {
+  justify-self: start;
+  margin-left: 5px;
+}
+.button-comment {
+  justify-self: end;
+  margin-right: 8px;
+}
+.button-add-post {
+  width: 100%;
+  border: none;
+}
+.icon-button {
+  width: 1.2rem;
+  height: 1.2rem;
+  margin-right: 10px;
+}
+#button-reset-password {
+  width: calc(100% * 0.9);
+}
+#button-logout {
+  border: var(--border-input-post);
+  width: 100%;
+  font-size: 0.75rem;
+}
+@media screen and (min-width: 550px) and (max-width: 1799px) {
+  .user-button {
+    height: 3.125rem;
+    font-size: 1.1rem;
+  }
+  .button-feed {
+    height: 2.8rem;
+  }
+}
+
+@media screen and (min-width: 1800px) and (max-width: 2600px) {
+  .user-button {
+    height: 3.6rem;
+    font-size: 1.5rem;
+    margin: var(--spacing-big-top-bottom);
+  }
+}

src/css/components/dropdown-menu.css

@@ -0,0 +1,60 @@
+.modal-dropdown {
+  /* width class='menu-header' */
+  height: 100vh;
+  position: relative;
+  top: 82px; /* width id='main-container' */
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-end;
+}
+.container-dropdown {
+  width: 200px;
+  height: auto;
+  padding: 10px 10px 0 10px;
+  background-color: var(--color-dark-yellow);
+  border-radius: 4px;
+}
+.container-dropdown::before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: -10px;
+  right: 5px;
+  width: 0;
+  height: 0;
+  border-left: 15px solid transparent;
+  border-right: 15px solid transparent;
+  border-bottom: 15px solid var(--color-dark-yellow);
+}
+.modal-dropdown-close {
+  display: none;
+}
+.dropdown-ul {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.dropdown-ul li {
+  width: 100%;
+  display: block;
+}
+.dropdown-link-icon {
+  display: flex;
+  flex-direction: row;
+}
+.name-user {
+  font-size: 0.875rem;
+  color: var(--color-dark-gray);
+  font-weight: 600;
+}
+.text-small {
+  font-size: 0.75rem;
+  color: var(--color-medium-gray);
+  margin: 5px 0;
+}
+.drop-icon {
+  width: 35px;
+  height: 35px;
+  margin-right: 5px;
+}