From 6ef48250cbca602363e9cc0e7abd63b40156bf5f Mon Sep 17 00:00:00 2001 From: bgaunt2003 Date: Mon, 1 Apr 2024 12:46:52 +0100 Subject: [PATCH] 1 --- .../__pycache__/__init__.cpython-310.pyc | Bin 176 -> 177 bytes .../__pycache__/settings.cpython-310.pyc | Bin 3093 -> 3094 bytes .../backend/__pycache__/urls.cpython-310.pyc | Bin 1022 -> 1030 bytes .../backend/__pycache__/wsgi.cpython-310.pyc | Bin 579 -> 580 bytes backend/community/__init__.py | 0 backend/community/admin.py | 3 + backend/community/apps.py | 6 ++ backend/community/authentication.py | 47 ++++++++++ backend/community/db_GetPostData.py | 12 +++ backend/community/migrations/__init__.py | 0 backend/community/models.py | 14 +++ backend/community/tests.py | 3 + backend/community/views.py | 56 ++++++++++++ .../__pycache__/__init__.cpython-310.pyc | Bin 179 -> 180 bytes .../__pycache__/apps.cpython-310.pyc | Bin 464 -> 465 bytes .../authentication.cpython-310.pyc | Bin 1510 -> 1511 bytes .../__pycache__/db_service.cpython-310.pyc | Bin 728 -> 1087 bytes .../__pycache__/models.cpython-310.pyc | Bin 728 -> 912 bytes .../__pycache__/urls.cpython-310.pyc | Bin 344 -> 426 bytes .../__pycache__/views.cpython-310.pyc | Bin 1045 -> 2080 bytes .../__pycache__/0001_initial.cpython-310.pyc | Bin 980 -> 981 bytes ...task_title_alter_task_user.cpython-310.pyc | Bin 0 -> 1053 bytes .../0003_task_created_at.cpython-310.pyc | Bin 0 -> 723 bytes .../__pycache__/__init__.cpython-310.pyc | Bin 190 -> 191 bytes web/src/components/post.js | 66 ++++++++++++-- web/src/components/postspare.js | 33 +++++++ web/src/css/community.css | 28 ++++++ web/src/css/post.css | 85 ++++++++++++++++++ web/src/pages/Community.js | 45 +++++++--- 29 files changed, 380 insertions(+), 18 deletions(-) create mode 100644 backend/community/__init__.py create mode 100644 backend/community/admin.py create mode 100644 backend/community/apps.py create mode 100644 backend/community/authentication.py create mode 100644 backend/community/db_GetPostData.py create mode 100644 backend/community/migrations/__init__.py create mode 100644 backend/community/models.py create mode 100644 backend/community/tests.py create mode 100644 backend/community/views.py create mode 100644 backend/to_do_list/migrations/__pycache__/0002_task_task_id_task_title_alter_task_user.cpython-310.pyc create mode 100644 backend/to_do_list/migrations/__pycache__/0003_task_created_at.cpython-310.pyc create mode 100644 web/src/components/postspare.js diff --git a/backend/backend/__pycache__/__init__.cpython-310.pyc b/backend/backend/__pycache__/__init__.cpython-310.pyc index b1daa3a116a3c1219b3477210d1cc2d88a16875f..a16b9132a8ef2d39c67bc831abdf0b7599d4e370 100644 GIT binary patch delta 30 kcmdnMxRH@3pO=@50SL_3v!qSrv1SaJ=%L4GG_lMI0A#fW`v3p{ delta 28 icmdnUxPg%;pO=@50SH##`;czW@LL diff --git a/backend/backend/__pycache__/wsgi.cpython-310.pyc b/backend/backend/__pycache__/wsgi.cpython-310.pyc index 1a2733e6da4ca7d767db2bcd7c38c376a0acc6a3..d208bff6e515c2d15cc643b15134a374b9b42484 100644 GIT binary patch delta 33 ncmX@ia)gB^pO=@50SL_3v!re0ImO5rF!?&89;4A@Rwg?DhzAG! delta 31 lcmX@Ya+rlDpO=@50SH##`;@wo=M*EO|K#h8dXw3h>;RKF30VLD diff --git a/backend/community/__init__.py b/backend/community/__init__.py new file mode 100644 index 00000000..e69de29b diff --git a/backend/community/admin.py b/backend/community/admin.py new file mode 100644 index 00000000..8c38f3f3 --- /dev/null +++ b/backend/community/admin.py @@ -0,0 +1,3 @@ +from django.contrib import admin + +# Register your models here. diff --git a/backend/community/apps.py b/backend/community/apps.py new file mode 100644 index 00000000..4f527127 --- /dev/null +++ b/backend/community/apps.py @@ -0,0 +1,6 @@ +from django.apps import AppConfig + + +class CommunityConfig(AppConfig): + default_auto_field = 'django.db.models.BigAutoField' + name = 'community' diff --git a/backend/community/authentication.py b/backend/community/authentication.py new file mode 100644 index 00000000..2e7d190d --- /dev/null +++ b/backend/community/authentication.py @@ -0,0 +1,47 @@ +from django.contrib.auth.models import User +from django.conf import settings +from rest_framework import authentication, exceptions +import jwt + +class JWTAuthentication(authentication.BaseAuthentication): + def authenticate(self, request): + auth_header = authentication.get_authorization_header(request).decode('utf-8') + if not auth_header or not auth_header.startswith('Bearer '): + print("No JWT token found in request headers") + return None + + token = auth_header.split(' ')[1] + try: + payload = jwt.decode(token, settings.SUPABASE_SECRET_KEY, algorithms=['HS256'], audience='authenticated') + user_id = payload['sub'] + email = payload.get('email', '') + first_name = payload.get('user_metadata', {}).get('first_name', '') + last_name = payload.get('user_metadata', {}).get('last_name', '') + + # Check if the user exists and update/create accordingly + user, created = User.objects.get_or_create(username=user_id, defaults={ + 'first_name': first_name, + 'last_name': last_name, + 'email': email + }) + + # If the user was not created (i.e., it already exists), update its details + if not created: + user.first_name = first_name + user.last_name = last_name + user.email = email + user.save() + + if created: + print("\nNew user authenticated and created") + else: + print("User authenticated") + + return (user, token) + + except jwt.ExpiredSignatureError: + raise exceptions.AuthenticationFailed('Token expired, login again') + except jwt.InvalidTokenError: + raise exceptions.AuthenticationFailed('Invalid token') + except Exception as e: + raise exceptions.AuthenticationFailed(f'Unexpected error during authentication: {e}') \ No newline at end of file diff --git a/backend/community/db_GetPostData.py b/backend/community/db_GetPostData.py new file mode 100644 index 00000000..96753480 --- /dev/null +++ b/backend/community/db_GetPostData.py @@ -0,0 +1,12 @@ +from supabase import create_client, Client +from django.conf import settings + +def get_supabase_client() -> Client: + url: str = settings.SUPABASE_URL + key: str = settings.SUPABASE_KEY + return create_client(url, key) + +def fetch_post(): + client = get_supabase_client() + data = client.table('posts').select('*').execute() + return data \ No newline at end of file diff --git a/backend/community/migrations/__init__.py b/backend/community/migrations/__init__.py new file mode 100644 index 00000000..e69de29b diff --git a/backend/community/models.py b/backend/community/models.py new file mode 100644 index 00000000..f89ea80c --- /dev/null +++ b/backend/community/models.py @@ -0,0 +1,14 @@ +from django.db import models +from django.contrib.auth.models import User +from django.utils import timezone # Import timezone + +class Posts(models.Model): + post_id = models.CharField(max_length=255, unique=True) + post_title = models.CharField(max_length=255) + post_content = models.CharField(max_length=255) + user = models.ForeignKey(User, on_delete=models.CASCADE, related_name='postList') + likes = models.IntegerField(default=0) + posted_at = models.DateTimeField(default=timezone.now) # Set default to the current time + + def __str__(self): + return self.title \ No newline at end of file diff --git a/backend/community/tests.py b/backend/community/tests.py new file mode 100644 index 00000000..7ce503c2 --- /dev/null +++ b/backend/community/tests.py @@ -0,0 +1,3 @@ +from django.test import TestCase + +# Create your tests here. diff --git a/backend/community/views.py b/backend/community/views.py new file mode 100644 index 00000000..0887bc17 --- /dev/null +++ b/backend/community/views.py @@ -0,0 +1,56 @@ +from django.http import JsonResponse +import json +from django.shortcuts import render +from rest_framework.views import APIView +from rest_framework.permissions import IsAuthenticated +from rest_framework.response import Response +from rest_framework import status +from django.shortcuts import get_object_or_404 +from .db_GetPostData import fetch_post #HERE DO FUNCTIONS IG. +from .models import Posts +from django.contrib.auth.models import User + +#def post(request): + # all_posts = Posts.objects.all + # return render(request, '../../web/src/components/post.js') + +class TaskListCreate(APIView): + permission_classes = [IsAuthenticated] + + def get(self, request): + user_uuid = request.user.username + + try: + response = fetch_post() + postList = [] + + if response.data: + for post_data in response.data: + user, _ = User.objects.get_or_create(username=post_data['post_id']) + post = Posts.objects.update_or_create( + post_id = post_data['post_id'], + defaults={ + 'post_title': post_data['post_title'], + 'posted_at': post_data['posted_at'], + 'post_content': post_data['post_content'], + 'likes':post_data['likes'], + 'user': user, + } + ) + + postList.append({ + 'post_id': post.post_id, + 'post_title': post.post_title, + 'post_content': post.post_content, + 'likes': post.likes, + 'posted_at': post.posted_at + }) + + print(len(postList), "tasks found") + + return JsonResponse({'tasks': postList}, safe=False) + + except Exception as e: + print("Error syncing tasks") + print(e) + return JsonResponse({'error': 'Failed to fetch and sync tasks.'}, status=500) \ No newline at end of file diff --git a/backend/to_do_list/__pycache__/__init__.cpython-310.pyc b/backend/to_do_list/__pycache__/__init__.cpython-310.pyc index a46979066c5f35077e53c7a999b1081c9d539c66..19aefa09b671ab355adabd73f55ba590dc19bfac 100644 GIT binary patch delta 30 kcmdnYxP_4?pO=@50SL_3v!qSrv1SaP=%L4GG_lMU0A+y(2LJ#7 delta 28 icmdnOxS5eBpO=@50SH##`;e36+apO=@50SL_3v!re05oTlzo~*#A$7nR!kFf~=d)5av delta 31 lcmcb}e1VxKpO=@50SH##`;@woN0^Z@XtDyM-eiBqCIE@92$BE* diff --git a/backend/to_do_list/__pycache__/authentication.cpython-310.pyc b/backend/to_do_list/__pycache__/authentication.cpython-310.pyc index 2dd14bc9e934bed6cbbbb9c180639fbebb1c3c21..b895a75362e2fac72d74a69a48707039770f60b2 100644 GIT binary patch delta 34 ocmaFH{hXU8pO=@50SL_3v!re0QDU5tNQc;5E=aO=fK~(tJDf&1mM+>|5{}H;Q_F%Og8|;WvAH-uMpZ^P|&5)tt*ZBpx=@D4((VK#DYhVEimat%o zDL;1+$(VQ>8UDoY2j+(grp$&DUxkkho5V$H?8j@N$|JE+2WNE}jwwN}ikw=~_^^K| z^MO{v7GgY7(rV!qkfD~Th6yOm;uj@Qk{_RvAD@$1ToPZBSe#v4B~+4Gl9Q^Vkdj)QT$EW*l9``( zi@mfswJ1I_Wimfg7LN=g3uBQe&^|v+_Q^Mybr?k_bF--NZ~#RF7p{>%6h_#Cf`|x;g0OpWy!2s0n5x;$Y<{%UgUen# zxYq%PJcTD8!k3VK1HrrCMXRHS>83uas=unQy1vWL;kX%%Vn*lDSAQ`RoADukyt#k# z4lwXazmiIF_KJZI@``~(z6?HjDumz-OT*3V;A6^dWQqzen;Pe?&-RfNJR@rt1jrNz zrUZIRA2ubA40 zA&r$-f10=FKmL&BG!-_k@{6p*`qZ4+U{x3ISD11g(yNt*h%IpjO`QRjXwW7a%iJJj zbzb4-*TVy83R6;v^;;|#UzpyZ(%)~p*L=c{x(oi`a72k#5Cr@(aoUqCYmLsblk{5m zjo-UFcz%}amj#xfLMNFOpk0w20=9EqyfZ~pcR%^giKIKj!B1o9)e_i|ql_-m( delta 401 zcmYjNJxjw-6n*#QB~8+#*hTOQTpX%UrGq#W2L;7J7weM25_+$;HBCy=g1cP{mi!9o zACe62T^(KYzPR)~-r;cWdFNj4d*#!tCBE+pKFhCfx`9P)7n+Nsos(;U2CA7rMKDxv zMqr|OFB;ZLdmB(#qXa3+n5l=1(%z!J)o*i&L;xrPNybo-$!HzMiYoFQlmSi;M R19_N-Nq|v+S%8t_9{^sbL(~8O delta 207 zcmZ3*e1l0lpO=@50SH##`;@vLNIwQ~kO3=@;{e3P1{1XwsSkOp?7kppb<4Xn!AM;c}8|~zX+nh$X;G6!YBmU zXF*;s8d0NYMolxW<*lL}wT)evcZzP*CDt8_)mh`d#TuL*JJAY^o2&)nmKm=yd&BCt zpTMcCKGBU&WjX$e%Skzwd>s`2^)K&!o$*5u+jr&lsoLdZm8FT|3{=6XDahR&uHtfQ z#8c=*eCfiaCj>XOb!VHabT^(#E@G9)J*hiIBKG1$#%Wnha;`Y6r<*W^{XMWt@jNd+ zHVm#odwL##TM=PaWOHYSM3fO`-?t){IdBuITe#2XnN&9fhhwI=^7N^LfN{D3P5ufn zCnIY_7WV8jWzX$nvT$~+1)V!1N8CZYX?=Hj;VL?EN8a3J52xV5vIu(DW_VW*xBavK6%VtZ#u&i|~hVW7!{)L#w~K zu6^VD%)|`EaZ+&YV=&^3X;)<`=Q>P{$5@;wU1waTBAckJ9P8R?m{{KxU2vONL0ARQ z6t@#=Aogw1K~2E;b~4SC>{FwtR-mylgRdb6Zeyrrvdw3!w}dD~PaciaY`oJmv)YAC zOEG)>c9P|s^;Fq2BlF5XR*~_jVkW;#L>-&^f4ss_V8>@aDZp8C#?F+s? zn{nR*AE)II0=no5SIWHHkGvmG+lG(1bs>#5*we+vbg{!+YRmX>j<( znBNrH0UzEh(`fYHcNnTNW@Vg1QVb6undM+|q#f`A z`bk~|2#9S5gc8pV$r(VeYQ!cUp}&WJ(K>}$e8WFh{1(^-;iAZ-1fs=ho=C~1cn>Db-CuxrQP%`$ zKzr%|1eQk{w$c4>y%1;(RUyPv-ZL>y9Z;P0kNFunCQyTdb#V@M${qkW1=g!RF)Z5DzMQ5h zmvZ(h9;b&@5Xha#-f4mj`ktu43W4Vmcu7OgDsdoP4mf1s8>oI00rSm#OT2{=vZVra zmZp5`NBRc<|spp)K<`~i0 z{}}v}P3Wkov;3mmErm*_N*dQiA=`=}D-N=hn`&TOt36;N&t;YO=a(zfa;!wQHAvtO nH&_~A)iCTb7kki~dT6+)?f`~a7*37isnCym`iPf;N zg?Q~DES^O0>VM(iv1cz{#ZwRBHyeb`GH-X@ym|Y+nfccEEb8gXN)@Q3KYy!jZ&BaE zr;9sxZ}>78h9l7x2v0zUQhWj_6rX$Diew#VR~A3+ZTv!7*v6u9q-_7BH!({0Y-HY= z{5fu*$p?7iN zzl?c6*|~|1)U>&;b*fus9dUBpDyMf_g|8exZ5~ANP|21}my+fDPW*>9fII?YBRete zu;6YF3gIw`MoI@asp7&P>o~CmmywM$b4+FbeP4}joF?rc5BaTza4f3tpx5c^vXj5& zJNX5_y?u>_W|Kf5V*&*Rgq*FiI;-OrigWfizvPb&yQ^cRN3k*F+3OD@W0cX?XU%HCA%%YF-Op99HF<9+mJe?o$c>^;bMxM(vCWu{TQPWT+mvt6*vb LHOg2kpEdRmdNz){ diff --git a/backend/to_do_list/migrations/__pycache__/0001_initial.cpython-310.pyc b/backend/to_do_list/migrations/__pycache__/0001_initial.cpython-310.pyc index f3e3e82b8e252996aa57e0a4683358cdea66d61c..db9ebe3429c455b36a7c9c814045971e586692e5 100644 GIT binary patch delta 33 ncmcb@ewCdkpO=@50SL_3v!re0*}=q^Hu)%%9;4CZ&rA;ikJkyQ delta 31 mcmcc0eubSUpO=@50SH##`;@woX9p8w>g1zLdXv8}Jp=%n(F+Cu diff --git a/backend/to_do_list/migrations/__pycache__/0002_task_task_id_task_title_alter_task_user.cpython-310.pyc b/backend/to_do_list/migrations/__pycache__/0002_task_task_id_task_title_alter_task_user.cpython-310.pyc new file mode 100644 index 0000000000000000000000000000000000000000..a037f731cd79f983aa5ff22b5662b102b220ce82 GIT binary patch literal 1053 zcmYjQOK;Oa5cWHc<1{Hk2(Dbf5{gPMNEJejk`^RrE0OkMSz0;SNov=z)7?!WTtVFO zAK=J||Fc(4J#$06X6+>HO8a?sXXp8ii)Pc)a6S8OjcrTQeyGFkg?HLMZoY>=HL7P? zsN>hjjHwx#y1FwnYift~)CnD3d#O>2+MhIPgPqnsnqiIV11)f_(Ox?abm?*sBFQH_ zFr+t4CM*_7k#p%x3kn$@sdu-R%5NVx|9}8x^w6L>m|rZ6;C$65Mpy$gb*Vv3sHdKa zPaRrYn$)HBrM1#|8(m{*Y%~qD@=@bMGu=w-X)A5hrt(X-(7v@aCuX=!+gQQ2tRJnj zRjG@D(1K(M7t-I^*?CHmJP}EpNlV21Le>O(1zZ1!+~d=aWJjbST}j92^%}>vadcZvQ}f#SB&>^i5-r&}j+3 zKKJ&bGi(PhF*?bi&yp*M`o(BIg2)HfC-TVcGnD$2Ok?RG{> zR%D`;ndIy(0|D|o1Bs#zzlkgae#X-957n^KG_Xlq?S{fseWz{I_JEBpUF`0P$T*>` z*97RhWC8FU&jiXkga8Ca^$g>BUMKZEkk=f-YeDfNh^X7l&fnd3aV<@+pjS<$P4;B9 zTCJ5S^u+`f?2XDasEWqmFgZqzgOx7PCgp&IK~RNBxt#%Si?K1OATI9xsw-Nw(qp)- zuz}NbVPoa}O4&py${Xo=Wsj8lG!~7^br#?yc7R=3p&kMvYvWe{Z`>V&aOPq|jXzW^ zdY_G;F1lTB!_icYwy~ke*Scc3+$9=q)L#U$`c8e68_ L^u)n2e<=O~qPWl2 literal 0 HcmV?d00001 diff --git a/backend/to_do_list/migrations/__pycache__/__init__.cpython-310.pyc b/backend/to_do_list/migrations/__pycache__/__init__.cpython-310.pyc index 1098992d304879ff05f9bf797a174f648fffcc79..fd40f9b6578d1d45d3dc6308cdf76c2107df5f06 100644 GIT binary patch delta 30 kcmdnTxSx?HpO=@50SL_3v!qSrv1Uw~=%L4GG_lMB0BCIoGXMYp delta 28 icmdnbxQ~%1pO=@50SH##`;`y diff --git a/web/src/components/post.js b/web/src/components/post.js index fb22690f..cc538f89 100644 --- a/web/src/components/post.js +++ b/web/src/components/post.js @@ -1,11 +1,67 @@ -import React from 'react' +import React, {useState, useEffect, useCallback} from "react"; import "../css/post.css" -function post() { +import UserIcon from "../assets/images/UserIcon.png" +function Post() { + const [postList, setPosts] = useState([]); + + const fetchPosts = useCallback(async () => { + const response = await fetch('/community/postList', { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + }, + }); + const data = await response.json(); + if (data && data.postList) { + setPosts(data.postList); + } else { + // Handle any errors or empty responses + console.error('Failed to fetch tasks or no tasks available'); + } + }, ); + useEffect(() => { + fetchPosts(); + }, [fetchPosts]); + + + + const [liked, setLike] = useState(false); + + const handleLike = () => { + setLike(!liked); + }; + + const [flagged, setFlag] = useState(false); + + const handleFlag = () => { + setFlag(!flagged); + }; return ( -
- +
+ + + {postList.map((postList, index) => ( +
+ {/*Insert users profile picture here */}
+
+ {/*Insert post title here */}

{postList.post_title}

+

{postList.post_content}

+
+ {/*Insert users Name here */}

{postList.user}

+ + + {/*Insert date posted here */}

{postList.posted_at}

+
+ ))} + {/*
*/} + + + +
) } -export default post +export default Post diff --git a/web/src/components/postspare.js b/web/src/components/postspare.js new file mode 100644 index 00000000..a4da8c6f --- /dev/null +++ b/web/src/components/postspare.js @@ -0,0 +1,33 @@ +import React, { useState } from 'react'; +import "../css/post.css" +import UserIcon from "../assets/images/UserIcon.png" +function Post() { + const [liked, setLike] = useState(false); + + const handleLike = () => { + setLike(!liked); + }; + + const [flagged, setFlag] = useState(false); + + const handleFlag = () => { + setFlag(!flagged); + }; + return ( +
+ {/*Insert users profile picture here */}
+
+ {/*Insert post title here */}

Happiness

+

dgsi fodj sdjfids jiofnioa hg iohparuiogbuah bpaoiidfsn nje fnsjfknsndfj nsk fnsn fdk slnfd kskd fnsanfdknas kdfna dfknasdkf nsdanf ksadn fknas dkfnask nfdksnf kdnsafkl nas;lf nads;n fdas nfksadn fn;asdnf;aldfn;ansfd ndnfasndfla ndfln asnf asnfd ;lasnf d;nasdfk; adfdklasn f;las flk;andsfkl nasdnf kas f;ldnaks nfd;ak nsflkdan s;kfldn aklsdnf ;asdn fl;aks nf u phg iowah nuifp hnaw uibhefubqwu brigf ehrifje hgbrgui bg uihqe ugta ehig prqhuiri hh rp ibaeur buiarh angrjg nabgur aug boib g oa

+
+ {/*Insert users Name here */}

Jane

+ + + {/*Insert date posted here */}

01/04/24

+
+ ) +} + +export default Post \ No newline at end of file diff --git a/web/src/css/community.css b/web/src/css/community.css index 75eecff5..f6724d5b 100644 --- a/web/src/css/community.css +++ b/web/src/css/community.css @@ -55,6 +55,9 @@ border-radius: 140px; background: rgba(143, 143, 143, 0.50); box-shadow: 2px 4px 4px 0px rgba(0, 0, 0, 0.25); + display: flex; + flex-direction: column; + align-items: center; } .Community .postsWrapper::-webkit-scrollbar { display: none; /* Hide scrollbar */ @@ -63,4 +66,29 @@ margin-top: 2vh; margin-left: 15vw; width: 50vw; +} + +.Community .modal { + display: none; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + padding: 20px; + background-color: #fff; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); + z-index: 1000; +} + +/* Style for the overlay/background behind the modal */ +.Community .overlay { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + z-index: 900; } \ No newline at end of file diff --git a/web/src/css/post.css b/web/src/css/post.css index e69de29b..0528d216 100644 --- a/web/src/css/post.css +++ b/web/src/css/post.css @@ -0,0 +1,85 @@ +.PostHolder { + border-radius: 33px; + border: 2px solid #FF004F; + background: rgba(255, 255, 255, 0.80); + width: 50vw; + height: 13vh; + margin-top: 2vh; + padding: 10px; + display: flex; + flex-direction: row; + color: black; +} + +.PostHolder .imgHolder { + width: 10vh; /* Make width and height equal for square shape */ + height: 10vh; + border-radius: 4px; + border: 3px solid #FF004F; + background: #D9D9D9; + margin-top: 0.6vh; + margin-left: 0.2vw; +} + +.PostHolder .imgHolder img { + max-width: 100%; /* Make the image fill the container horizontally */ + max-height: 100%; /* Make the image fill the container vertically */ +} + +.PostHolder .Postinfo { + height: 100%; + display: flex; + flex-direction: column; + width: 75%; + word-wrap: break-word; + font-size: 15px; + font-style: normal; + font-weight: 400; + line-height: 114.583%; /* 22.917px */ + margin-top: 1vh; + margin-left: 0.5vw; + +} + +.PostHolder .PostTitle{ + text-shadow: none; + font-size: 40px; + font-style: normal; + font-weight: 500; + letter-spacing: 2.8px; + + text-align: left; +} +.PostHolder .infoContent{ + margin-top: 1vh; + overflow-y: hidden; + display: flex; + flex-direction: row; +} + +.PostHolder .likeButton { + background-color: grey; /* Change to your desired color */ + width: 3vh; /* Make width and height equal for square shape */ + height: 3vh; + border-radius: 50px; + margin-top: 8vh; +} + +.PostHolder .likeButton.clicked { + background-color: red; /* Change to your desired color */ +} + +.PostHolder .Name{ + margin-left: -3vw; + font-size: 22px; +} +.PostHolder .flag{ + margin-top: 3.5vh; + background-color: rgb(212, 212, 212); /* Change to your desired color */ + width: 3vh; /* Make width and height equal for square shape */ + height: 3vh; + border-radius: 50px; +} +.PostHolder .flag.clicked { + background-color: rgb(2, 81, 110); /* Change to your desired color */ +} \ No newline at end of file diff --git a/web/src/pages/Community.js b/web/src/pages/Community.js index 233bbd1e..d1f20dbe 100644 --- a/web/src/pages/Community.js +++ b/web/src/pages/Community.js @@ -1,14 +1,40 @@ -import React from 'react' +import React, { useState } from 'react'; import Navbar from "../components/Navbar"; import "../css/community.css" import filter from "../assets/images/filter icon.png" import Line from "../assets/images/Line.png" -import post from "../assets/images/post.png" +import Post from "../components/post" + function Community() { + + const [showModal, setShowModal] = useState(false); + + const openModal = () => { + setShowModal(true); + }; + + const closeModal = () => { + setShowModal(false); + }; + + const handleOverlayClick = () => { + closeModal(); + }; + + + return (
- + + {showModal && ( +
+

add post

+ {/* Insert add post POST form here*/} +
+ )} + {showModal &&
} +
@@ -20,16 +46,9 @@ function Community() {
{/* Make into components instead of img maybe or cld be like this as just prototype */} - - - - - - - - - - + + +
)