Merge pull request #68 from Coding-Club-IITG/prajit

Add file ui overhaul

Author: DreamBot706

client/src/screens/contributions/index.jsx

@@ -9,14 +9,14 @@ import { v4 as uuidv4 } from "uuid";
 import { CreateNewContribution } from "../../api/Contribution";
 import { useSelector } from "react-redux";
 import { toast } from "react-toastify";
-import googleFormLink from "../../api/googleFormLink";
 import { useDispatch } from "react-redux";
 
 import { getCourse } from "../../api/Course";
 import { UpdateCourses } from "../../actions/filebrowser_actions";
 const Contributions = () => {
     const uploadedBy = useSelector((state) => state.user.user._id);
     const userName = useSelector((state) => state.user.user.name);
+    const isBR = useSelector((state) => state.user.user.isBR);
     const currentFolder = useSelector((state) => state.fileBrowser.currentFolder);
     const code = currentFolder?.course;
     const [contributionId, setContributionId] = useState("");
@@ -25,26 +25,18 @@ const Contributions = () => {
         setContributionId(uuidv4());
     }, []);
 
-    const [description, setDescription] = useState(null);
     const [submitEnabled, setSubmitEnabled] = useState(false);
 
-    useEffect(() => {
-        if (!description) {
-            setSubmitEnabled(false);
-            return;
-        }
-        setSubmitEnabled(true);
-    }, [description]);
-
     // const [contributionId, setContributionId] = useState("");
 
     let pond = useRef();
 
+    const handleUpdateFiles = (fileItems) => {
+        if(fileItems.length > 0) setSubmitEnabled(true);
+        else setSubmitEnabled(false);
+    }
+
     async function handleSubmit() {
-        if (!description) {
-            toast.error("Please fill the complete form.");
-            return;
-        }
         const collection = document.getElementsByClassName("contri");
         const contributionSection = collection[0];
         // console.log(toggle);
@@ -56,7 +48,7 @@ const Contributions = () => {
             let resp = await CreateNewContribution({
                 parentFolder: currentFolder._id,
                 courseCode: currentFolder.course,
-                description,
+                description: "default",
                 approved: false,
                 contributionId,
                 uploadedBy,
@@ -96,25 +88,15 @@ const Contributions = () => {
     return (
         <SectionC>
             <Wrapper>
-                <div className="head">Contribute to CourseHub</div>
-                <form>
-                    <div className="description">
-                        <label htmlFor="description" className="label_description">
-                            DESCRIPTION :
-                        </label>
-                        <textarea
-                            name="description"
-                            className="input_description"
-                            placeholder="Give a brief description"
-                            value={description ? description : ""}
-                            onChange={(e) => setDescription(e.target.value)}
-                        ></textarea>
-                    </div>
-                </form>
+                <div className="head">{isBR ? "📁 Add Files" : "📁 Contribute to CourseHub"}</div>
+                <div className="disclaimer">
+                    Selected Files will get uploaded to the current folder
+                </div>
                 <div className="file_pond">
                     <FilePond
                         name="file"
                         allowMultiple={true}
+                        onupdatefiles={handleUpdateFiles}
                         maxFiles={40}
                         server={{
                             url: "http://localhost:8080/api/contribution/upload",
@@ -131,12 +113,20 @@ const Contributions = () => {
                         }}
                     />
                 </div>
-                <div className="uploaded">
-                    {/* <span>UPLOADED:</span> folder/file */}
-                    Or submit link on{" "}
-                    <a href={googleFormLink} target="_blank">
-                        Google forms.
-                    </a>
+                <div id="disclaimer-container">
+                    <div id="uploaded-container">
+                        <div>🚫</div>
+                        <div>Do not close this popup until all files are successfully uploaded!</div>
+                    </div>
+                    {
+                        !isBR ?
+                            <div id="uploaded-container">
+                                <div>⚠️</div>
+                                <div>Please contact your Branch Representative to verify the files you have uploaded so that it may be visible to everyone</div>
+                            </div>
+                        :
+                            <></>
+                    }
                 </div>
                 <div className={`button ${submitEnabled}`} onClick={handleSubmit}>
                     SUBMIT

client/src/screens/contributions/styles.scss

@@ -83,6 +83,7 @@
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
+    margin-top: 2rem;
 
     .label_description {
         font-family: 'Bold';
@@ -94,7 +95,7 @@
         width: 60%;
         padding: 0.5rem;
         font-size: 1rem;
-        height: 10vh;
+        height: 18vh;
     }
 }
 
@@ -130,24 +131,33 @@
         display: none;
         font-size: 1rem;
     }
+}
 
-    .uploaded {
-        text-align: start;
-        width: 100%;
-        margin-top: 0.75rem;
+#disclaimer-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.1rem;
+    margin-top: 2rem;
+}
 
-        span {
-            font-family: 'bold';
-            font-size: 1rem;
-        }
-    }
+#uploaded-container {
+    display: flex;
+    margin-bottom: 0;
+    gap: 8px;
+    color: #535353;
+}
 
+.disclaimer {
+    margin: 1rem 0px;
+    justify-self: center;
+    color: #535353;
 }
 
 .button {
     text-align: center;
     background-color: #FECF6F;
     padding: 1rem;
+    margin-top: 1rem;
     font-family: 'bold';
     cursor: pointer;
 

client/src/screens/dashboard/components/contributionbanner/index.jsx

@@ -9,15 +9,12 @@ const ContributionBanner = (props) => {
                     <p className="para">
                         By sharing your notes, past papers, and other resources, you'll not only be
                         helping others succeed, but you'll also get recognition for your hard work –
-                        we'll feature your name alongside the files you contribute.
+                        we'll feature your name alongside the files you contribute. You can contribute 
+                        by uploading a file to the appropriate folder and then requesting your Branch 
+                        Representative to verify the files.
                     </p>
                 </div>
                 <div className="middle"></div>
-                <div className="right">
-                    <div className="upwings"></div>
-                    <ContributeButton contributionHandler={props.contributionHandler} />
-                    <div className="downwings"></div>
-                </div>
             </div>
         </div>
     );

client/src/screens/dashboard/components/contributionbanner/styles.scss

@@ -1,23 +1,21 @@
-$small: 850px;
+$small: 1000px;
 $medium: 1250px;
 
 .contributionbanner {
     background-color: #FECF6F;
-    background-image: url(contribute.svg), none;
-    background-position: center;
-    background-repeat: no-repeat;
 
     .content {
         max-width: 1400px;
-        padding: 40px 64px;
+        padding: 0px 32px 0 64px;
         margin: auto;
         display: flex;
         justify-content: space-between;
         align-items: center;
         width: 100%;
-        height: 200px;
+        height: 250px;
 
         .left {
+            margin: 40px 0;
             flex: 1;
 
             .title {
@@ -26,12 +24,16 @@ $medium: 1250px;
             }
 
             .para {
-                max-width: 350px;
+                margin-top: 0.8rem;
                 font-size: 1rem;
             }
         }
 
         .middle {
+            background-image: url(contribute.svg), none;
+            background-position: center;
+            background-repeat: no-repeat;
+            height: 100%;
             flex: 1;
         }
 
@@ -61,22 +63,22 @@ $medium: 1250px;
         }
     }
 
-    @media screen and (max-width: $medium) {
-
-        background-image: url(contribute_smallscreen.svg), none;
-        background-position: 30vw;
+    @media screen and (max-width: $small) {
 
         .content {
             height: 100%;
             justify-content: center;
 
             .left {
-                margin-left: 10px;
-                margin-bottom: 15px;
+                margin: 40px 0;
             }
 
             .middle {
-                display: none;
+                flex: 1;
+                background-image: url(contribute_smallscreen.svg), none;
+                height: 250px;
+                background-position: center;
+                // display: none;
             }
 
             .right {
@@ -88,24 +90,6 @@ $medium: 1250px;
             }
         }
     }
+}
 
-    @media screen and (max-width: 950px) {
-        background-image: unset;
-    }
-
-    @media screen and (max-width: 1176px) {
-        background-position: 28vw;
-    }
-
-    @media screen and (max-width: 1141px) {
-        background-image: unset;
-    }
-
-    @media screen and (max-width: $small) {
-        .content {
-            flex-direction: column;
-            justify-content: flex-start;
-            align-items: flex-start;
-        }
-    }
-}
+#contribute-info {}